Eyrus is a fast growing project management tool used in construction, manufacturing, the medical field, and more. Eyrus solves a workforce visibility and progress tracking problems. Imagine owning 20 active construction projects, each with 300 contractors walking on and off the construction site, everyday. Eyrus solved this by leveraging IoT and proprietary hardware devices that track each worker on-site and how they are contributing to the overall progress of a project. Those are the main insights delivered to the customer via the application.
I was hired as a the only product designer with Eyrus. I was responsible for consolidating three separate products with completely different UI styles and design patterns into a single application. The UI redesign resulted in building out the companies first design system.
Some major successes of the project:
- Designing a new IA and navigation that was capable of consolidating three separate products into one
- Creating common design patterns for both web and mobile experiences
- Rethinking and optimizing the UX of existing features while adding new functionality
- Creating the v1 design system that will be used across all Eyrus products
My work with Eyrus lasted just over a year, and ended when I handed off the progress to their first full time designer.
This case study is focused only on redesigning the information architecture and navigation patterns.
Eyrus was quickly gaining traction, and engineers were responsible for rapidly adding new features to meet customer demand.
Unfortunately, the navigation was not designed for scalability.
The existing navigation patterns were inflexible which caused the team to keep layering in features that negatively impacted the usability of the menu system.
Early on, assumptions were already shared between myself and the product team. We assumed that:
- Core Eyrus functions needed to be one product, not three.
- Users most likely hard frustrations with broken navigation patterns
- The outdated UI styling was potentially deterring new customers
Some big questions Eyrus and I needed to answer were:
- What are current users biggest pain points with navigation?
- Is there validity in the business decision to combine the three products and if so what functions/features will be kept or retired?
- What are user's expectations with UI styling?
- Is self service important to Eyrus customers and if so, how does the product support it?
As a contractor, access to customers was limited. Research for this project was mainly completed in three ways:
- Usability evaluations; this included performing tree tests, first click tests, and a heuristic analysis based on Jacob Nielson's 10 heuristics guidelines
- Stakeholder interviews; the founders and staff at Eyrus all have ample experience working in the industry and were a solid resource for information
- Competitive audits and feature comparisons
- Zoom sessions with industry experts that have used other products similar to Eyrus
Through user and stakeholder testing, we learned that primary user concerns were:
- Users were in fact frustrated with navigation. Specifically the navigation design patterns didn't work well. Users were not sure if a navigation link would be a tab, button, dropdown, or hidden in the hamburger menu
- Task completion times were not satisfactory to the users we interviewed
- Interface colors were confusing and caused problems with user choice. Primary and secondary buttons had the same colors
- Users desired self-service functions currently available only by contacting Eyrus customer support
I knew that the biggest challenge of the project was going to be combining three applications, along with all their functions and features, into one navigation system.
I audited the existing navigation based on this criteria:
- Navigation clarity
- First click tests
- User goals
- System feedback
- Visual indicators and navigational cues
- Scannability
- Scalability
Below are examples of the existing navigation patterns.
After many rounds of navigation audits I started exploring new navigation systems.
I was constantly stress testing different patterns and how they would perform across web and mobile. Stakeholders and industry experts were providing feedback via prototype commenting as well as zoom sessions.
Below are some of the earlier navigation ideations.
After countless iterations, user tests, and non-helpful dribbble explorations, I finally had a breakthrough with navigation.
Some key successes with navigation were:
- Matching user expectations and needs
- Built for scalability
- Flexible and modular components
- Able to merge three separate navigations into one
In the redesign we also needed to have two unique interface styles for the organization user and the project user. This was to assist the organization user with navigating in and out of different projects within the organization user's dashboard.
The images below demonstrate the Eyrus' new navigation system.
Feel free to click around this basic prototype in Figma
Solving the navigation for Eyrus was one of the hardest technical desing challenges I have faced. The impact the new navigation system had moving forward was significant. It shaped how every page of the interface is thought about and designed. I left Eyrus with the ability to ask questions like:
- "Where does this new feature go and how does it fit into the system?"
- "What type of menu applies to this page? Vertical nav, tabs, no extra navigation needed?"
- "Should this set of features be combined and added to the module menu?"
This project forced me to dig into the depths of navigation systems and I learned so much! Some of my favorite learnings were:
- Useful discoverability patterns
- Categorizing content is one of the hardest mental models to match to
- The 'three click rule' is false
- Creating breadcrumbs with out using standard breadcrumb patterns