WorkfloPlus - PWA
Working closely with a product owner and development team, I helped to design, prototype and deliver the next stage in WorkfloPlus’ evolution. Our main aim in this project was the overhaul the UI/UX of the application allowing it to be better suited to be used within a web browser, not just on mobile applications and wearable technology.
The Problem
While WorkfloPlus boasted an established and successful user experience, it was primarily designed to optimise screen real estate on small and limiting devices. However, when adapting it to a progressive web application (PWA) accessible across various devices through web browsers, I realised that its existing design was not adequately suited for the responsive nature of PWAs. Thus, I embarked on a design journey to create a solution that would effectively cater to a wide range of devices, from mobile web browsers to large desktop monitors. By embracing a more flexible and adaptive approach, the goal was to ensure that WorkfloPlus remains effective and visually appealing, regardless of the device it is accessed on.
Research & Development
During the design process of our application, extensive user research revealed the crucial need for a fluid user experience across multiple platforms, including mobile, desktop, and tablet. Recognising the diverse ways in which our users interacted with the system, we understood the importance of providing a seamless and consistent experience regardless of the device they used.
Additionally, the feedback emphasised the significance of merging administrative and working tasks within the application, while keeping them visually separate to maintain clarity and efficiency. By incorporating these insights into our design approach, we ensured that our product delivers a cohesive experience that enhances productivity and user satisfaction.
Responsive Wireframe for Schedule View
Schedule Screen Desktop V1 Prototype
Responsive Wireframe for Job List View
Schedule Screen Desktop V1 Prototype
Responsive Wireframe for Job Details
Job Details Desktop V1 Prototype
Responsive Wireframe for the In-Job View
The Solution
Responsive Designs for the Schedule Screen
Responsive Designs for the Jobs List
Job Details
Responsive Designs for the Job Details Screen
Responsive Designs for the Job Details Screen with Captured Media
Task State Filtering
Edit Job Modal
Job Scheduling
Job Assignment
Scheduling Helper Modal
Task Details
Responsive Designs for the Task Management Screen
In Task Step Types
Description Step
Text Input Step
Markdown Step
Selection Step
Media Step
Media Step - Media Opened
Enable Location Modal
Enable Location Modal
Job Browsing (Admin Feature - Desktop Only)
V1 Design of Job Browsing
Workflow Management (Desktop Only Feature)
User Management (Admin Feature - Desktop Only)
Concept of a reworked users list, focusing on utilising the space better and having the users information clearly displayed as a list view.
Reworked User Creation screen, prioritising a streamlined experience, removing unnecessary visual distractions and ensuring a seamless and focused process for users.
Reworked User Details screen, focusing on presenting information in a hierarchical manner, prioritising the importance of each detail for a more intuitive and user-friendly experience.