Work Tracker Tool
Streamlining task management and correspondence for the Federal Government.
Background
An application was developed with the goal of streamlining the work of correspondence for the end-user. The app enabled users to create, process, and monitor new and ongoing work items.
My Role
UX/UI Designer
The Team
Product Manager, UX/UI Designer, Business Analyst, QA Analyst, Developer(3)
Duration
10 weeks
Platform
Web App
The Problem
After previewing the application to potential end-users, it was determined that the application was not meeting expectations. Users felt that it was difficult to navigate, confusing to complete certain tasks, and the look and feel was sub-standard.
Impact
The redesign led to a significant decrease in user error for tool’s core functions and greatly improved user sentiment regarding overall usability.
Solution
I aimed to redesign the main dashboard and core user journeys (Work creation, correspondence, and monitoring) improving actionability and usability, while also establishing a modern look and feel that is consistent with the clients brand guidelines.
Step 1
Research & Define
At this stage my aim was to define client goals, collect all existing data/feedback, and use these insights to establish a strategic redesign. Recordings of usability testing sessions were available.
Some screens from the original application.
“This is the part that actually sucks. I should be able to click on where I need to go, especially if I’ve already done those steps.”
Main areas of frustration:
-
User reported being frustrated with how long it takes for them to navigate back and fourth between a work items active stages/pages.
-
The users felt uncertainty when taked with uploading documentation for the purpose of correspondence. They could not tell whether or not it had worked.
-
When using the system to send correspondence, users were unsure regarding what steps they needed to take and whether everything they needed to send was included in their message. Emails sent from the system did not seem to match what they had seen earlier.
-
Multiple user as well as stakeholders reported that the look and feel of the application felt outdates and inconsistent.
“This is terrible. I have no idea where the summary came from. My additional notes are not there.”
“It looks slapped together.”
Step 2
Mapping & Analysis
The overall layout and approach to navigation is misaligned with the the end-users work flow and expectations.
I gathered client documentation to identify the core workflows of the user.
I then mapped out these core flows in conjunction with the current application. Noting points of user frustration within each journey.
Lastly, I conducted a heuristic evaluation of the current application, identifying additional gaps in the experience.
Core Workflows Identified
User monitors their active work items on their dashboard.
User creates a new work item.
User transmits work item documentation to a recipient.
Profiling the User
In order to obtain greater insight into the en-user of this application I conducted a series of 1 on 1 user interviews. I recruited participants with the help of the client, outlined the interview script, led all of the interviews, and and presented the findings to key stakeholders.
Personality
Resolute & Detail Oriented
Strong understanding of subject matter and the process needed to accomplish tasks.
Moderate tech saviness
Needs
Ability to complete tasks quickly and efficiently.
Proper transparency of the status of a task/project.
Ability to navigate and edit content seamlessly.
Frustrations
Improper use of terminology, acronyms, and other language.
Lack of flexibility when she needs to be able to edit content within a PC.
Late/overdue tasks that are held up by external factors/people.
Step 3
Ideation and Design
With the core user journeys, user persona, and the major usability issues determined, I began wire framing solutions.
Improving Visibility and Transparency
The Problem
Users struggled to interact with the existing correspondence form. They mentioned being unsure if they had properly attached a document and whether any additioanl ntes they hasd added had also been properly transmitted. Overall, they were uncertain if the message sent contained everything they needed it to.
Rethinking how work items are processed
The Problem
The ‘Active Status’ of a work item limits what actions can be done and what content is visible. In the example above, if a user wanted to circulate a document to someone, they would then need to update/advance the active status to circulation. navigating this way is incredibly time consuming for the user and also hides
The Problem
The existing dashboard was visually overwhelming, lacked any sort of visual hierarchy, and most importantly did not provide users with quick insight into their active work. The users who were able to figure out how to apply filters correctly then had to scan row by row through the work item on the table
My Solution
Reimagine the managing/processing of work items from a multistep pattern in to a singular screen/experience. With this new design users would be able to, see and update the active stage, use all controls available to them, and be able to view all correspondence and documents without having to advance the stat and wait for it to load.
Incorporating Actionability
My Solution
An updates ticker at the very top, to notify users immediately when a pending request has been replied to.
Organizing their active work into 2 distinct buckets. Ready to work on and awaiting response.
My Solution
I addressed this uncertainty in the user by rdesigning the form to contain a preview of the message/request being sent out. This way, as users were to fill out the form and add documentation they could see a auto updating preview of what they were going to send out.
Establishing a Look & Feel
The client provided brand guidelines were limited to a simple color pallet. After some discussion I was given the freedom to expand upon their pallet and develop comprehensive brand guildlines, which include color, typography, iconography, and other elements.
I also leveraged Microsoft Fluent’s UI kit to assist in the devlopement of the design system.
Updating to High Fidelity
Following stakeholder sign off on both wireframes and look and feel, I designed high fidelity prototypes within Figma covering all core functionality and screens.
Dashboard Monitoring
Update cards to instantly notify users when a response to a request has come in.
Clear designation between which of a users’ active work is ready for them to take action on vs those that are still dependent on someone else.
Quick scanning insights like “Ready for“ to help users make quicker more informed decisions when determining how to prioritize their work.
Work Item Details
The details screen of a work item provides users with easy to scan comprehensive insights for a specific work item. This includes its active status, the owner of it, key details, and any correspondence and documents associated with it.
Correspondence
One central hub where users are able to conveniently monitor correspondence status, view details, and create new correspondence for a work item. Additional functionality allows them to extend due dates and send reminders for existing correspondence requests.
Step 4
Validating with Users
After completing High Fidelity prototypes for all of the core functionality of the tool. I conducted a series of remote usability tests with potential end users of the application.
“I know I can come in first thing in the morning and see what’s changed rather than having to go in and try to figure out like based on clearances.”
“It auto populated the summary which is great. It’s a lot less typing to find the offices that should be CCD”
“It’s easier because today it would be a lot more clicks for me to find the e-mail and be like, well, did I miss their reply?”
In addition to monitoring users completion rates and feedback for core task, they were also asked to rate their experience with the application on a scale of 1-10 (with 1 being the least and 10 being the most). The average experience score improved significantly following the redesign.
Before Redesign: 5.4
After Redesign: 8.2
The feedback received was overwhelmingly positive. Test participants felt that the layout and information included on the dashboard took all the guessing out of what they should work on first.
Many users also commented on the seamlessness of sending out correspondence. (This was a major point of frustration prior to the redesign.)
Next Steps
Once the user testing session were completed, I analyzed and presented the results to the stakeholders. I covered the goals of the project, research, design decisions, and lastly feedback of the final designs. Following this presentation, the client gave us to green light to move forward with the developement of the new and improved tool.
Breaking down the designs
Before handing of the designs to our developer I worked closely with our product manager to break down my high fidelity deigns into a control inventory report that covers all of the core functions and controls that would be needed.
Handoff to dev
I conducted an info session with our developers, in which I walked through all of the application’s core functionality and gave a brief demo to familiarize the team with how to navigate and use Figma (where the design are located). Within the handoff file I included notes for each step of the user journeys to provide additional context for how all actions are triggered.
What happens next?
The application is currently in development. As it continues to be build I am working closely alongside our development team to condiuct design reviews and clarify any questions that arise during the process.