Differentiator for two network operating systems that manage the routing, switching, and security infrastructure, increasing traffic by 7%.
Lead designer, team of 2
6 months
🚀 Launched
Junos OS and Junos OS Evolved (Evo) are two network operating systems (OS) that power Juniper's networking and security products. These systems share many key applications, such as routing, bridging, and management software. However, several features require different setups.
The product team received negative feedback from customers and identified a decrease in satisfaction with the documentation for Junos and Evo.
The documentation for Junos OS and Evo was merged into one set, which caused confusion for customers. They often had to filter irrelevant content to find the information specific to their product.
Increase customer satisfaction. Improve SEO for the content because many customers come from search engines.
Make it clear what information applies to which OS. Highlight any differences between Junos and Evo so that customers know they are in the right place.
Based on interviews with 6 customers as a follow-up usability study, the customer satisfaction score significantly increased from 3.8 to 4.7.
We achieved the goals by implementing useful identifiers. The tabs allow customers to quickly access their desired documentation, and the color coding system helps them understand whether the product runs Junos, Evo, or both – the essential information they need but was difficult to find.
I collaborated with the brand team to gather the visual elements associated with Junos and Evo. Then, we had discussions with the product team on how to present these elements on the documentation pages in a way that would work across products.
We created a few variations to test if the changes were sufficient to differentiate Evo from Junos.
During our conversations with the product team, we recognized the importance of the switch functionality because some products run both OS. This feature benefit customers who need to view a different OS if they happen to land on the wrong page.
I worked with UX Researchers to conduct a usability study. We collected survey responses from 48 customers and completed 5 follow-up interviews.
The results showed that the tags, logos, and color-coding assured customers that they reached the correct documentation when accessing it through search.
While customers found the visual cues helpful, the average satisfaction score was 3.8 out of 5.
Participants couldn't locate the dropdown menu to switch the OS. The mixed content boxes was not ideal since customers might interpret the content as a mistake. Moreover, seeing the Junos label in the breadcrumbs on Evo pages was confusing.
After communicating the usability study results to the product team, we decided to make the following changes based on the feedback:
🔧 Move the switch functionality from the left navigation to the top section.
🔧 Indicate the OS name in breadcrumbs.
🔧 Remove any content not supported by Evo, update documentation titles, and introduce educational content about Evo.
We brainstormed the design of the switch functionality. Initially, we considered toggles or buttons, but they didn't align with users' mental models. As an alternative, I proposed using tabs, which organize groups of content at the same hierarchy level.
We also tried differentiated banners that match our branding. To enhance accessibility, I suggested choosing a light color and a dark color option.
Decision: Choose a light and dark color for banners separately to enhance accessibility and add prominent tabs.