WorkfloPlus
Working alongside stakeholders, product owners and a development team, I helped to design, prototype, spec and deliver Intoware’s flagship product WorkfloPlus. WorkfloPlus is a transformative digital platform that ensures processes are done correctly the first time, every time: driving productivity, connectivity and simplicity.
The Problem
At Intoware, one of the major challenges we faced with WorkfloPlus was the lack of a consistent design library or system. As the demand for new features grew from various clients, my role was to address this visual issue by establishing a solid and cohesive user interface (UI).
While enhancing the app's aesthetics was a priority, it quickly became evident that the primary focus should be on delivering an exceptional end-user experience. To simplify the task, I identified three distinct personas within the WorkfloPlus user base.
First, we had Managers, who primarily utilised desktop devices to oversee operations on a company-wide scale. Their needs revolved around gaining comprehensive insights and control.
Second, Mobile Users were field workers who relied on both iOS and Android devices. The app needed to cater to their on-the-go requirements while ensuring smooth usability on mobile platforms.
Lastly, we had Headset Users, see WorkfloPlus - Wearable for more information
By segmenting the users into these personas, I aimed to tailor the design and functionality of WorkfloPlus to best suit their unique needs, improving both the user experience and overall satisfaction.
Research & Development
To meet the needs and expectations of stakeholders, it became crucial to embark on a fresh redesign of the application. While the existing user experience had proven successful, it was necessary to revitalise its appearance.
Therefore, I decided to incorporate my WorkfloPlus Design System, aiming to maintain consistency throughout the product. One of the primary considerations was ensuring proper visibility in challenging working environments. To achieve this, careful attention was given to contrast levels, guaranteeing that users could easily navigate the application regardless of their surroundings.
Additionally, accent colours were strategically employed to make action buttons more prominent and intuitive, ensuring clear and obvious calls to action for the users. By incorporating these elements, the redesigned application was able to strike a balance between familiarity and a fresh aesthetic, delivering an enhanced user experience.
During the redesign process my WorkfloPlus design system guided a lot of my decisions. Even though we were building the product to be used on iOS, Android devices, wearable tech and web, the level of detail that Material provided, gave me the means to refine an already solid foundation and build upon to create a sleek and effective visual language to be used across the entire platform.
At this point I had a clear list of requirements in order to cast a wide net over the redesign and tick as many boxes for the 3 user personas with a powerfully consistent UI library.
Another important part of WorkfloPlus is “The Dashboard”. This allows managers the ability to view data collected from users completing jobs, create new workflows for associated jobs for users to complete, schedule jobs as well as managing team settings. With some much information having to be shown it was important to me to keep The Dashboard uniform and clean, to do this I turned to Material design conventions to instil a sense of familiarity to users.
Wireframe for Sign In/Landing/Jobs List page
Wireframe for Settings/Job Details/In Job page
Wireframe for the basic structure of the dashboard
The Solution
L) Splash Screen, C) Sign In Screen, R) Empty State Landing Screen
L) Settings Screen, C) Jobs List Screen, R) Job Details Screen
Step Types
L) Description Step, C) Text Input Step, R) Numeric Input Step
L) Date/Time Step, C) Signature Input Step, R) Decision Step
L) Media Step, C) Checklist Step, R) Selection Step
Dark Mode
Examples of dark-mode styling
The Dashboard
Design of Workflows Screen
Design of Workflows Screen
Design of Queries Screen
Design of Settings Screen