Untangling Navigation and Actions
Bringing clarity, structure and predictability to the Work Order
Cetec ERP
Internship Project
My Role
Concept Development
Design
UX Research
Dev Handoff
Teammates
Director of Design
Executive Leadership
Staff Engineer
Front end developer
Background
A powerful system can become overwhelming when everything lives in one place.
Cetec’s Work Order supports many roles and workflows, which means a large amount of functionality exists on a single surface.
Over time, features have been added to support new needs without a clear organizing framework.
The result felt less like a deliberate system and more like a junk drawer of functionality.
The Problem
A laundry list of navigation and actions with no clear groupings or differentiation
The Work Order 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 user to understand and feel confident in the system.
Our Goal:
Make it easy for users to easily and confidently move through the Work Order and take appropriate actions.
The Solution:
Focusing on these issues, I created GreenLens, an app paired with meta glasses that alerts users to dangerous flora around them, while also educating them about the plants properties.
Jump to Solution
Research
Understand the current system, then reshape it.
I mapped every page connected to the Work Order, identified the primary goal associated with each, and created categories. I 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.
Identifying well-understood interaction 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.
Initial designs
I created a series of functioning prototypes with the 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!
Initial Concept: An Expanding Icon Side Navigation
asdfasdf
Organizes the tabs
Multiple Icons
Stakeholder Feedback
Presented a prototype version to sales, leadership, and engineering and got their feedback.
prioritize no two clicks and ability for people to find the most important key functions / pages
1.
Don't hide information that's currently very visible
2.
Keep in mind users that have to use the Work Order consistently. Don't give them extra steps or bog them down
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 the new navigation.
Using a functional prototype, I introduced the nested structure by walking through how a user would change the revision of a Work Order’s BOM.
Afterward, I asked users to find “Pick Parts” without guidance.
All participants successfully located it, confirming that the new navigation was understandable and easy to adapt to.
Final Designs
THE FINAL DESIGN
Talk about Navs
The redesigned experience prioritizes clarity and control.
Talk about contextual tabs and actions
The redesigned experience prioritizes clarity and control.
Simple and contextual
Things that belong together are grouped together. The new Side nav
Things that belong together, are grouped together for easy access
Retains only one click needed for our users
DESIGNING FOR DEVELOPMENT
Throughout this project I was meeting with my front end developer counterpart while we worked on the previous project. We were talking about the project and I was getting her feedback on the project
I worked closely with a front-end developer throughout the project to discuss feasibility early.
Once designs were finalized, I presented them to the broader engineering team in India and got their feedback
This ensured shared understanding and smoother implementation.