ABOUT THE PROJECT
Digging into site navigation
Navigational patterns and components for ObvioHealth’s enterprise products were in their infancy when I joined the team. The navigation had been built alongside complex features that seemed to demand the most attention. This resulted in unconventional patterns, a cluttered UI, and general lack of cohesion across products when it came to the navigation. As the design system continued to mature from atoms to molecules to organisms, I was eventually assigned the task of completing efforts to create cohesive and consistent navigational system across products, particularly Study Manager and Study Designer.
All of the components displayed in this case study were designed by me, with exception to one or two screenshots from ideation exercises (where other contributors are mentioned) and mockups of previous designs.
Client
ObvioHealth
Role
UX Designer
Timeline
Feb 2023 - Apr 2024
Team
1 designer
4 product owners
10+ engineers
Digging deeper
My effort to rework the navigation and add it to our design system started with a list of requirements. I was told the scope of this project would be limited and certain components would be off limits for redesign. Still, I felt that it was important to look beyond the initial ask, for insights or problems that we might be missing. This case study illustrates my efforts to delicately negotiate between usability, feasibility, and viability.
Challenges
01
User Access - Our team had very limited access to users for testing and research.
Consistency - Apps had 3 main different types of users, with some users overlapping and using both products. The navigation systems were inconsistent between products and sometimes different between pages.
Scalability - the original design was not scalable. It broke down quickly as more features were added. The new components needed to be designed with future updates in mind.
02
Research & Discovery
I was provided with the following list of requirements for improving navigation for both our sites:
Allow users to switch versions for Study Manager only.
Display study status more prominently.
Create a structure that is reasonably consistent between Study Manager and Study Designer to establish familiar patterns for people who use both.
Replace custom unconventional interactions with intuitive patterns already in our library.
Collaborate with engineering team to identify and resolve issues with implementing designs.
Site maps
I reviewed both products and outlined the site maps for each. This helped me understand the structure of each project and note both their similarities and differences.
Study Designer allows users to design studies by dragging shapes onto a “stage” area, representing different activities and stages of the study. Most users spend their time building studies using the schema builder. However, the admin user group doesn’t use the schema builder. Instead they spend their time managing study documents, details, and team members.
Preview of original Design
User Research
I designed and conducted several user interviews and shared unmoderated tests with users to try to understand what was working well with the current design and what was not working.
Testing challenges– Initial testing rounds failed to capture reliable results from Study Manager users. At the time, they did not feel convinced of the product team’s concern with their feedback and ability to make impactful updates to the application. Unfortunately, the damaged relationship only exacerbated usability problems as new releases were rolled out without user testing. When I joined ObvioHealth, I worked hard to repair this mistrust but change happened gradually. Some of my designs were only tested by Study Designer users before rollout. Although the final designs tested well in the end and users expressed appreciation for the updates, this initial lack of access limited my ability to fully dig into the interplay between the top and side nav bars, once again underlining the importance of access to users from the beginning.
03
Ideation
Taking into account the requirements, user feedback, and my understanding of the current workflows, I began considering how the navigation could be modified to support our goals to improve usability, scalability, and consistency.
Top Navigation
The top navigations share several key elements like the study name, a way to return to the Study Listing screen, and links to the Study Team, Documents, and Study Details pages. We needed to add a way for users to switch between study versions from any page and the study status needed to be more prominent.
Starting point - I quickly brainstormed with the other designers on my team, Shreya Singh, Angel Cortez, and Nick Pirolo to come up with some rough ideas. This gave me more opportunities to ask questions about the current designs.
Idea 1 - Since Study Team, Documents, and Details are pages all used by the same user, I explored options for reducing cognitive burden on the main page by grouping these pages together inside a panel. I tried centering the study name, version, and status to set it a part from other controls in the navigation and achieve more visual balance. I concluded that the breadcrumb structure was unnecessary given the flatness of the IA.
Idea 2 - I wondered if it would make sense to display the admin info in a modal. This would reduce the number of buttons in the navigation but I quickly realized a modal would be inadequate for the amount of information and complex workflows that are displayed on these pages. I tried displaying only the ObvioHealth logo instead of the product name, but this brought up concners that users need to be able to see the product name on this page–which they are likely to use the most–given that logos between products are not distinct.
Idea 3 - For both products, it was clear that study-level pages could be divided into 2 sections: the study builder/study oversight section and the admin section. I considered separating these sections into tabs that could be displayed in the top navigation. I designed a toolbar for Study Designer.
Page Headers
Page headers are were inconsistent across all products and even within the same products. Here are some examples from Study Manager. I pulled together headers from each page across all products and compared them, looking for ways to simplify and consolidate. Feedback from users helped me identify which controls are used most frequently and which could be removed or simplified.
Side Navigation
Only Study Manager has a side navigation, which allows users to quickly access and review the information about participants, activities, etc that they need to review regularly in order to keep studies running smoothly.
04
Results
The new design system helped improve product usability, scalability and consistency across the ObvioHealth suite. As the products matured, other designers were able to easily build on this design, adding ways to view multiple versions and sites at a time. The navigation systems for Study Designer and Study Manager have similar frameworks, making them highly learnable and familiar to people who use both products. At the same time, the structure is flexible enough to allow for the nuances of each product.
Usability
Metrics– Rate of success navigating from a specific study back to the study listing screen went from 0% success to 90-100% direct success. For subpages, users were able to return to the main page with 80-90% direct success. Users could quickly identify the study status when it was displayed as a tag instead of a breadcrumb.
Scalability and Consistency
Metrics– The new side navigation and page headers are approximately 50% slimmer than the original components, giving users back approximately 157px of screen real estate. Users were still able to find Documents, Details, and Study Team easily. Users were still able to easily switch between subpages using the picker.
Responsiveness
Devices– ObvioHealth’s enterprise products were designed for desktop, not mobile devices. But discussions with users exposed opportunities to increase efficiency and access to information by optimizing for smaller devices. This was especially apparent for users with touchscreen laptops that doubled as tablets. The simplified navigation was designed and built to be responsive and helped products scale more gracefully.
Nicholas Pirolo
Former Director of Design at ObvioHealth
"Eden's proactive engagement with our development team and her ability to understand and explore trade-offs was key to our success…Passionate and knowledgeable about design systems, Eden consistently demonstrates initiative through iterative user research and design improvements. As a thought partner, she offers valuable insights and innovative solutions to other members of the design team."CONCLUSION
What did I learn?
Establish an accurate baseline before testing new designs – For this project, I could have done a better job establishing my baseline metrics in the beginning. Instead, I had to retroactively ask users to test old designs, making the whole process a bit messy.
Invest in building rapport with/gaining access to users – The initial lack of buy-in from users was probably my biggest challenge for this project. I would be curious to see how the redesigns might have emerged if opportunities to test and discuss designs with users had been more accessible from the beginning.
Dig deeper – Requirements don’t always capture the full picture. It’s important to understand the problem thoroughly by asking questions and talking to users.
UP NEXT
Designing for AppleWatch
PREVIOUS
