top of page
My Role: Co-UX Designer
The Team: Catalyst CEO, 2 UX Designers, 1 Visual Designer & 1 Developer
Tools: Figma
Project Duration: 4 months
Problem
Users were complaining of navigation issues and complicated / information overloaded pages. The tool was lacking simplicity and was not user friendly. The UI was also outdated, creating less of a friendly feel.
How might we improve the overall UX of the tool to allow users to work more efficiently?
Requirements
The client wanted to redesign their sourcing and procurement management tool. They wanted to improve the overall UX and make the tool simpler and easier to use.
Design Process
Discovery
Understood client's requirements, vision, and problems.
Visual Design
Our Visual Designer had created a redesign concept when initially trying to obtain business with the client, which we then used for the entire project after client approval.
Design System
Client Feedback + High Fidelity Wireframes
For the entire project, bi-weekly meetings with the client were held to understand and brainstorm user flows and needs in order to create high fidelity wireframes. After each meeting, iterations were made to the designs and were reviewed in the next one.
User Research
I was the sole / lead Designer for the creation of a fully responsive Design System, which took the duration of the project.
User research was conducted throughout the project to validate designs and get feedback. The users consisted of company stakeholders and employees, whose feedback was then implemented into the designs after sessions.
In House Development + Collaboration
After a certain amount of views were completed, the Developer from our team started to code the components into Storybook. There was always back and forth communication between the Developer and the Designers to ensure coding and designs matched.
Hand Off
All final designs and prototype, the coded components in Storybook and the Design System were handed off to the client on time. We exceeded expected deliverables.
Global Navigation In Depth Redesign Process
Feedback + Insights
Major Pain Points
- So many menu items, hard to find where they need to go
- Only wants to see relevant menu items
Discovered Themes
- Organization
- Customization
Ideas
- Have tabs "all menu" and "my custom menu"
- Can search in "all menu"
- Can pin menu items to their custom menu
Previous Designs + Iterations
Previous UI
1st Iteration
Final Decisions + Designs
The themes that emerged from user feedback were organization and customization, the latter being more important. The participants wanted to create their own custom menu that contained the menu items that most pertained to their work flow. A couple of managers mentioned the potential of another menu for their whole team, while members can still create their own custom individual ones.
Three tabs were created to allow for individual and group customization: My Quick Access, Group Access and View All. My Quick Access contained pinned items set by individual users, Group Access had pinned items the manager sets for their team and View All showed all menu items. All three tabs contain search bars to allow for easy discovery. The pinning functionality can be done in the View All tab once a user goes deeper into each main menu section. The manager can pin to their team's group access or their individual quick access menu, while the user will be able to do the latter.
The user can also sort, group and rearrange their customized menus.
Clients were extremely satisfied with the final designs. They had mentioned, "The navigation was a problem we were not able to solve..."
.png)
Final Prototype
Other Designs
List View
Previous UI
First Pass
.png)
Final List View Design
.png)
Form View
Previous UI
First Pass
.png)
Final Form View Design
.png)
Added Functionality - Calendar
.png)
Design System
I was the Lead Designer for the creation of a fully responsive Design System. It was created from scratch and took the duration of the project.
Hand Off
Deliverables were handed off to the client on time. The total number of designed views exceeded the initial agreed upon total. The contract stated 40 total views and we delivered 64. The team was always ahead of the game, while striving to produce top quality work.
bottom of page