Redesign of the header
filler text
Understanding the Product
A Powerful System Can Become Overwhelming When Everything Lives in One Place
The Problem
A Laundry List with No Clear Groupings or Differentiation
The system leans on a left-rail panel to provide access to navigation and actions, with links, filters, and action-driven views all mixed into one long list.
To complicate matters, buttons behave differently depending on the user’s context, making it hard for users to understand and feel confident in the system.
Our Goal
Make it easy to move around and take actions
Research
Mapping the Current System
Our initial work focused on the Work Order part of the Cetec system.
I mapped every page connected to the Work Order, identified the primary goal associated with each, and created categories. I also interviewed Cetec team members to get feedback on my categorization scheme and to understand how customers talked about these pages.
This process clarified the general organization and showed that some pages exist to display information, others support workflows, and others primarily enable actions. Now I that I had the contents of the navigation, it was time to think about how to lay it out.
Analysis
Actions ≠ Navigation
The previous navigation design treated navigation options and actions in a comparable manner, making it difficult for users to differentiate them.
We wanted to detangle actions and navigation in the redesign.
Competitive Audit
Identifying Well-Understood Patterns
I reviewed navigation patterns in other complex software products to look for inspiration and examples.
I wanted to understand if there might be approaches for communicating hierarchy and for providing access to actions and navigation options that users would readily recognize.
This review helped ground my redesign and inspired me to explore a collapsable left rail navigation.
Side Navs from ClickUp, Figma, and Jira
Explorations
I created a series of functioning prototypes with a new navigation structure.
I wanted to explore hover states and how best to display subnavigation and provide access to actions. I also created a version to explore a collapsible left rail that displayed only icons when it was closed.
I had a lot of ideas and needed feedback!
Some early ideas
Idea 1: Collapsable Side Nav
I pursued an option with a collapsed side nav that users could expand on click in order to free up real estate.
I also experimented with icons to provide users with visual cues and modernize the interface.
Additionally, I played with including action buttons within the sub navigation as this presented an opportunity for in-context actions.
Stakeholder Feedback
I met with stakeholders from Sales, Product, and Engineering and heard their feedback after they used the first prototype to explore Idea 1.
Stakeholders raised strong concerns that the collapsible side navigation would require more clicks for users to reach their destinations than what they have to do today. To further complicate things, this approach wouldn’t scale well across the product suite. We decided to nix the collapsible side navigation and icon options from consideration.
Organized and simplified side nav
So many icons would be overwhelming
Scaling issues across the product suite
Requires more clicks relative to current design
Idea 2: Side Nav with Hover
With the stakeholder feedback in mind, I explored a second side navigation design that removed icons and used a hover state to provide access to nested pages.
With this iteration, users would not have to click more than once to reach their destination.
Scrappy User Testing
As part of a fast, scrappy round of testing, I spoke with three active Work Order users to get early feedback on Idea 2.
I started by walking through a typical task flow with my functional prototype, demonstrating the nested navigation structure in the process.
I then asked users to use the prototype on their own to find a specific page. All users successfully located the target page with no errors and commented that the new navigation was understandable.
Everyone easily used and understood the side nav with hover
Introducing a New and Improved Navigation
write text here
Simplified & Scannable
A Simple Side Nav
The new design reduced the number of options displayed in the side nav from 25 to 10.
This clean and minimal approach reduces cognitive load and improves findability.
What Belongs Together Lives Together
Grouped Nav
Conceptually similar navigation options are grouped and presented together.
Users no longer need to memorize where options live in a long list!
No Extra Work Required
Same Number of Clicks
The new design did not introduce any extra clicks for users to reach their target destination.
Efficient Access
Easy to Reach Related Areas
Users can easily navigate between related areas via the subnavigation.
Clear Differentiation
Dedicated Home for Actions
Actions always live in the same area, making it easy for users to understand what can be done given their current context.
No more hunting when you need to get something done!
Time to Build!
I created a developer hand-off document that outlines every component of the new design and how they should behave across different scenarios, including edge cases, visual states, and interactions.
Writing this document was a great exercise in clarity as I needed to think through each part of the system and ensure that all behaviors were captured and understandable.
Clarity was also key as my development team was in India and I needed to make sure that they could rely on the document to get the information since I couldn’t be there in person.
Final Thoughts
This internship was a crash course in real-world UX. I had the chance to work on a meaningful product design challenge that involved collaborating with people from different departments and across the world, and importantly, working directly with users.
My user interviews and design feedback sessions were a real highlight. Being able to hear from people who use the Work Order as part of their daily job gave me unique insights and helped me to advocate for improvements. I kept these people in mind throughout my design process and reflected on them when I made design decisions. The user research also connected the product team with users in a new way. Seeing how people used the product in the real world was an eye opener for everyone!
never considered treating things differently and how nice it is to have a clear and consistent pattern
the power of simplicity and the power of tidying up. Avoid adding complexity when not necessary
Scaling was a new thing for me to consider, importance of close collaboration w/ dev partners