Auros Methods Redesign
Role:
Lead UX Researcher, Lead UX/UI Designer
Project Duration:
Sep 2021 - Dec 2021
Project Team:
1 UX/UI Designer, 2 UX Consultants, 1 Product Owner, 1 CEO, 2 Software Engineers, 5 Business Analysts
Responsibilities:
User Research, Wireframing, Prototyping, User Testing, Component/Icon Creation
Before
After
The project
Auros is an enterprise web-based desktop application designed to help capture, share, and reuse company knowledge.
As a Product Designer at Auros, I led the redesign of the feature called Methods. Methods are a fundamental building block in the Knowledge Aware concept of Auros--making it key to the success of the product. In short, Methods are a way of providing process knowledge to end-users. Each step holds company knowledge of best practices/standards allowing them to be shared across the organization.
As of December 2021, the new designs are in the processing of being coded by Auros Software Engineers. The changes are planned for commercial release in May 2022.
The problem
End users were often unsure of where they were at in the Method, what to do at a particular step, and how to perform the required action. Because of these roadblocks, users were having trouble adopting the software feature.
The goal
Redesign Methods to improve the user experience, decrease confusion, and increase adoption.
The process
Empathise
Information gathering
Since the Product Owner and the Auros Business Analysts work directly with the Auros users on a daily basis, I conducted interviews with them. In the interviews, I gathered information on how various customers are using the feature, the goals users tend to have when using the feature, and what major roadblocks are impeding their use.
Usability tests
While hearing from the experts gave me a basic understanding of the user goals and some of their difficulties with the feature, I needed to see the feature used by some non-experts in order to develop strong empathy for them.
So, I conducted four 30-minute-long usability tests where I observed actual users execute their workflows. As they did so, I asked them about their goals, intentions, and how they felt about specific aspects of the feature. I documented their responses and gathered insights from the data.
Competitive analysis
After understanding the goals and some of the challenges, I wanted to see how other softwares try to solve them.
While Auros is unique in its attempt to display status of steps, status of the workflow and identify the current next step, because of the Method's poor visual design, all of those aspects were unclear to the end users.
Define
Journey map
From the insights uncovered in my research, I journey mapped the user experience of a typical user of Methods. This helped me analyze where the pain points were in the process and how users actually felt about them.
Persona
Using the information from my research and the journey map, I created a persona to develop and convey empathy for a typical user of Auros Methods.
User pain points
Where am I at?
Users were generally confused on where they are at in a process because the visual indication of the various states were unclear.
What do the colors mean?
The colors varied from Method to Method. Understanding what each color meant in various conexts was nearly impossible.
What is the next action?
New users didn’t know how to perform the primary actions on steps (clicking the top-right icons).
Am I done?
Users were generally unsure of how the status of the Steps impacted the Method. This led to uncertainty of the Method's completeness.
The journey map allowed to me to identify key user pain points in the exprience of using Methods.
Unclear this is item created on action
Unclear primary action
Unclear this is the next step
Step can be colored red
But it does not indicate status
Unclear Method Status
Colored halo status is unclear
Ideate
Brainstorming
I presented the information from my research to the Auros UX team (me + 2 consultants). Together, we brainstormed ideas to solve the pain points I identified. To facilitate the brainstorming, we sketched our ideas using lo-fi wireframing techniques in Figma.
Lo-fi wireframes
This was the final lo-fi wireframe from the brainstorming session. We solved for the pain points as follows:
Universal sign for
completed
Used shadow, white background, and bold text to indicate next step
Clear indicator for next action
Next step clearly indicated with label
Clear Method
progress
Lo-fi review
I reviewed the research results, the pain points and lo-fi wireframe proposal with the Product Owner and the CEO. In that review, we uncovered some improvement opportunities with the proposal.
How do I categorize steps -- e.g. indicate responsbility?
Too generic. There are 6 step types in Auros with unique actions.
Too generic. There are 12 customizable statuses in Auros
Prototype
Hi-fi wireframes
I created several hi-fi wireframes to address the feedback from the lo-fi wireframe reviews.
Unique shape for each step type with label
Unique visualization for action on each step type
Step category
Blue border, white background for next step
Clock to indicate step is pending action
Step status indicator
Method status with indication of each step status
Hi-fi prototype
Using the hi-fi wireframes, I prototyped a real Project Managment worfklow in Figma. This helped me to visualize how a real user would interact with the redesigned feature.
Test
User testing
I recruited 6 users of Auros: 3 beginners and 3 experts. Each test was a recorded 30 minute virtual session with me (the lead), the participant and another Designer to observe. I asked them to compete a series of tasks related to a process they were familiar with. I asked each of them questions like:
Where are you at in the process?
How do you know that's the next step?
Can you identify the state of the step?
What does that state mean to you?
As the participants completed the tasks and answered the questions, I documented my observations in a spreadsheet.
Insights
I reviewed the recordings and my notes to gather insights. I met with the observing UX Designer to review and document our insights. We used FigJam to create sticky notes for each insight, binning them as either a success or an improvement opportunity.
Finalize design
With the feedback from user testing I gained confidence that the designs generally resolved the user pain points. Using the insights, I created additional improvements to the design.
Removed confusing step completion symbols
Stronger indication of step category
Icon and component creation
I created new icons and added it to our design library. I also created re-usable components for future design work and to illustrate each step state to the Software Engineer team.
Icons/buttons for all of the primary and secondary actions
Components for step category, step state and Method state
Components for each step type and variants for each state
Update prototypes
I created example prototypes for the Engineering team to understand the user experience of Methods in their various states.
A fully incomplete Method
A partially complete Method
A partially complete Method
A fullly complete Method
Results
We successfully addressed the user paint points and signicantly improved the user experience.
I know where I am
Users are now able to understand where they are at in the process without being distracted by unnecessary visual cues.
I understand the color
Users now understand what color means on the step and are no longer distracted by it's previous chaotic use.
I know the next action
Users now understand what the next action is and how to peform that action because of the clear visual cues and indications of step type.
I know when I'm done
Users now understand when they are complete. The status of the steps and Method are clearly visible and easy to understand.
Next steps
-
Code the change - The changes are currently being coded by the Software Engineers. I am working with them to understand the new designs and user experience so they can code them from the perspective of the end-user.
-
Design review- After the software is coded, I will be working with the Software Engineers to review the code using real scenarios.
-
Customer interviews - We will interview customers and collect insights into how they respond to the new changes.
-
Improve designs - Designing is a continuous process. As we learn, we try to improve upon previous iterations.
Thank you!
Thank you for taking the time to review my project! Please contact me with any feedback or questions.