Problem Statement
The platform's user-base was growing fast and the outdated UI needed a refresh that would allow them to implement new features and screens on the fly. The client wanted to increase retention of their users by getting updates out quicker through a more consistent and scalable set of designs.
What I Did
I was the design lead on this project – responsible for carrying out all research deliverables, deriving actionable steps from research, creating and testing a prototype, finalizing design deliverables, and all design communication and presentation with the client. Worked alongside a project manager who tracked tasks and timeline.
Definition of Done
Combine audience/stakeholder research and testing to deliver a user-optimized set of designs alongside a scalable design library.
Team
One designer (myself) and a project manager.
Original kanban board
Original work order modal
High-level Process
Understand who their users are, how they work, and what they need day-to-day and long term. Also, audit competitor platforms.
Map out the current platform architecture, identify vital screens to redesign, and map user flows.
Take learnings and build out new UI, improving interface clarity and accessibility along the way when possible.
After revisions, package components with atomic consideration and deliver updated platform to client.
.jpg)
Approach
With tight time constraints, we had just one week for research/analysis.
To start, I focused on identifying the key flows within the platform. After two client meetings, I gained a rough understanding of their audience use-cases and established the platform architecture for my own context.
My research identified two main actors:
Audience Types
On synthesizing our
customer research
Task Master
"If it's not on my list it's not happening"
The task master is usually the head of a maintenance dept. and creates tasks.
Needs an easier way to create/organize tasks for their team, to search content globally, and to have better awareness of updates to tasks as they occur.
Operators
"I get in and get out"
Quickly references kanban to see tasks and record completion and time spent on tasks throughout the day.
Some workers will have edit access and may need to update key portions of tasks.
Developed alongside stakeholders: Flow map of highest-use screens (blue boxes), key interactions (red lines), and top action items (outlined boxes)
Prototyping
I took the pain points our audiences identified, mapped where they occurred on the flow map, and identified 12 screens that would need to be redesigned to better meet user goals. I then set up a high-fidelity prototype in Figma to aid in stakeholder conversations and receive usability insights along the way.
I would have liked to do user testing on these prototypes at this stage, but it was determined to not be in-scope or fit the timeline, so I opted for testing with the client instead. We met with the CEO and their head of development.
The initial test led to the discovery that the work order modal required a longer list of attribute sections to fully accommodate new user needs when creating work orders. This shifted my design to include dynamic attributes that can serve more than one function, saving space for their dev team and time for users.
Selected Final Screens
The final designs prioritize clarity and visibility. Providing more labeling, better grouping and better use of white space for easy scanning.
Kanban Board and Work Order Modal
New design uses similar placement so returning users still know where everything is. Additions have clear labels and add functionality to the platform.
.jpg)
Search Results & Notifications
Having global search allows quick access to content across a user's entire account. Awareness of updates and edits to work orders is essential to all FlowPath users –added notifications to gain that awareness.
.jpg)
Design System
Alongside the completed screens, I delivered a documented design system in Figma to keep things consistent. I organized the components considering atomic design for scalability.
.jpg)
Learnings
At the outset, we encountered a challenge in identifying of the most crucial screens to redesign and determining the priority of each. We decided to expedite the process by involving the client in that decision-making.
In retrospect, we acknowledge that collaborating with the client from the beginning would have been more efficient. This approach would have allowed us to allocate our time better and avoid rushing through certain designs, consequently affording us more time for valuable feedback and refinement.
.jpg)
