Helping users find their way through duo.com

Responsibilities:

Growth, UX, Brand, Visual Design, Responsive Design

Role:

UX Designer


Key Outcomes


Simplified UX

Made the site navigation more clear and concise, while adding a new pricing fly-out to make pricing more transparent for users.

Increased Accessibility

Implemented visual cues for selection and keyboard nav.

Brand delight

Injected playfulness through visual design and icons.

Prioritized Leads and Conversions

Streamlined potential buyer call-to-actions—ensuring users are following the desired path and result in potential conversion.




Background

Duo.com has gone through several iterations of a navigation redesign over the years as Duo has grown as a company with more offerings every year. As this expansion happened, the navigation slowly grew to be more complex, with user data showing that many areas of the navigation were being under-utilized.

In effort to be proactive about making the overall user experience better for duo.com, the design team (me and my design lead) wanted to target one of the first points of contact for many users–the navigation.


Background

Duo.com has gone through several iterations of a navigation redesign over the years as Duo has grown as a company with more offerings every year. As this expansion happened, the navigation slowly grew to be more complex, with user data showing that many areas of the navigation were being under-utilized.

In effort to be proactive about making the overall user experience better for duo.com, the design team (me and my design lead) wanted to target one of the first points of contact for many users–the navigation.



The Design Process


Discovery

What initially triggered our discovery of this project was due to our marketing teams tasked with the goal to increase sales conversions in the next fiscal year with a targeted increase of at least 40%. The duo.com team wanted to find multiple opportunities to align our efforts with this goal and improve the website.

So, I led a customer journey mapping session where we kept a Chief Information Security Officer (CISO) persona in mind since our primary goal for this exercise was to increase sales leads and conversions. You can see this persona's profile below:



In the exercise below, we uncovered several projects and prioritized them accordingly—one of them being to audit the main navigation. Take a look at this high level overview:



In the Consideration phase, we hypothesized that the navigation was a main pain point for this buyer persona. However, since the navigation was redesigned with an agency not long before we completed this exercise, this project was deprioritized amongst the projects could show leadership short term wins. We revisited it in the later half of the fiscal year.



Research

The current state of the navigation had numerous issues that I audited below. I referenced our website analytics in detail via our Contentsquare tool to understand clicks and where users drop off. Our most notable data showed that important Call to Action buttons were hidden due to the sheer amount of text. I also saw which pages were more popular and which pages were not getting any attention at all.


"A site’s main navigation is the visual representation and user interface for the category taxonomy, and it serves as the primary interface for browsing the site’s product catalog.

Having a user-friendly main navigation UI is as important as having a solid category taxonomy, as what the user sees and interacts with largely determines if they will be able to navigate the site intuitively or are halted every time they try to browse the site’s categories." *


*Direct quote from a research study done by Baymard Institute, an independent web UX Research institution


The Problem

Our potential customers want to find the best security solution that fits the needs of their business but are frustrated dealing with our website's main navigation when comparing our solution to other options, due to poor discoverability of key content, complex copy, and lack of clear CTAs.


From our user insights and my audit, I sought out to frame "How might we" statements to break the problem into actionable pieces:


The Challenge

  1. How might we ensure we help our users find the information they are looking for?

  2. How might we get our users closer to the solution that fits their organization and budget?


With these challenge statements, I made sure to involve key stakeholders across our marketing team and brand to ensure I accounted for each perspective for this solution. We came up with the solution to focus our scope on increasing discoverability of key content and focus our call to action opportunities.


Goals

Our focused scope allowed us to approach our solution with these three goals:


Simplify UX

Make the site navigation easier to read, increase page visibility, and have updated brand visuals.

Prioritize leads
& conversions

Highlight hot-leads since the site navigation is persistent across the entire site.

Improve
accessibility

Address accessibility issues in the site navigation and take note of best practices from other sites.


External Competitive Research

In addition to the duo.com site navigation design audit, I conducted an audit of a few top competitor sites and some sites that have notoriously great UX design (simple and accessible to a large user base).

In green, you'll see call-outs of some key findings that were common or shared across multiple companies.


Okta


Microsoft Security


Figma




Splunk


Stripe



Stripe


Design

After synthesizing all our research insights, I came up with a few solutions:


Removing the subtext and utilize two-column text wherever possible to make all parts viewable for 100% of users


Maintain a space for brand personality and promotion to increase hot leads


Utilize icons to call attention and thread design across the site

Remove repetition for CTAs to make it clear which actions and pages are prioritized


Build in accessibility by ensuring color contrast for text are WCAG AA compliant and optimizing keyboard navigation


Remove arrows and utilize arrows only when pushing a user out to a separate site domain


Include new priority pages at the top to boldly show our capability in the identity space


Include new pricing dropdown to give potential customers a quick glance into plans



Removing the subtext and utilize two-column text wherever possible to make all parts viewable for 100% of users


Maintain a space for brand personality and promotion to increase hot leads


Utilize icons to call attention and thread design across the site


Remove repetition for CTAs to make it clear which actions and pages are prioritized


Build in accessibility by ensuring color contrast for text are WCAG AA compliant and optimizing keyboard navigation


Remove arrows and utilize arrows only when pushing a user out to a separate site domain


Include new priority pages at the top to boldly show our capability in the identity space


Include new pricing dropdown to give potential customers a quick glance into plans







Remove repetition for CTAs to make it clear which actions and pages are prioritized


Build in accessibility by ensuring color contrast for text are WCAG AA compliant and optimizing keyboard navigation


Remove arrows and utilize arrows only when pushing a user out to a separate site domain


Include new pricing dropdown to give potential customers a quick glance into plans






Removing the subtext and utilize two-column text wherever possible to make all parts viewable for 100% of users


Maintain a space for brand personality and promotion to increase hot leads


Utilize icons to call attention and thread design across the site



Removing the subtext and utilize two-column text wherever possible to make all parts viewable for 100% of users


Maintain a space for brand personality and promotion to increase hot leads


Utilize icons to call attention and thread design across the site


Include new priority pages at the top to boldly show our capability in the identity space




Wireframes


High Fidelity Mockups

Here is an overview of just how many iterations we went through for different styles after narrowing down layouts from the wires.


We wanted to go in the direction that felt most familiar to our site and general websites, all while keeping things as simple as possible with an injection of delight.


After many, many iterations as you can see above, we continued to refine and narrow down the layout and brand delight to three separate directions:

Prototype

For stakeholder presentations, I created this prototype to give a realistic glimpse into how this overhaul would look and feel like in a direction I and my design manager advocated for.



Accessibility

In order to ensure we meet WCAG standards, I made sure to:

  • Provide sufficient contrast

  • Not use color alone to indicate selection

  • Utilize heading and spacing to group related content



Text had no issue with contrast, however we wanted to make sure that it was clear when a fly-out was hovered on. I chose to have a white background to ensure a distinct indication that it was being hovered on/opened, whether that was from keyboard navigation or via mouse.



Responsive design — Mobile

During the research phase, I also conducted an analysis of mobile execution of the same sites to understand how these designs translated to mobile. Our current design was clunky, complex, and difficult to navigate.



As you can see in the screens above, these were the current state of the navigation on mobile. It came in from the side of the screen, was smaller than ideal for accessibility, along with unnecessary promotions space that muddled the true goal for the user.

We knew that the potential buyer wouldn't be making significant purchasing decisions on their mobile device, so we opted to remove these promotions to gain hot leads via mobile.

After many iterations and refinement, I landed here with the mobile design. Here's the redesigned mobile view:

A few other considerations I had for mobile:

  1. Creating larger touch targets for each section to increase accessibility

  2. Pulling out the Administrator Login and Search bar to the top (these were amongst the top 3 things tapped on for mobile users)

  3. Including icons for continuity with desktop

  4. Have the navigation menu take up the entire screen for maximum space, with a clear entry and exit


Impact

We received positive feedback all around with our proposal presentation and were asked to up-level the presentation for the Director level. It was such a "large improvement" that many stakeholders were surprised this wasn't already how the navigation was and were less inclined to want to use the current navigation.

The project was immediately prioritized and I refined the desktop and mobile screens to be production ready.

Unfortunately, I was unable to test the design for quality assurance during the development face after handoff since I was impacted by a company-wide restructuring and was locked out of my design files.

Improvements

For a phase 2, we aimed to ensure a more seamless integration between product and the web, which wasn't in the scope of this redesign, due to priorities focused on getting potential customers to find what they need and connect our users to the right solution they are looking for.

Although I was unable to see this project until the very end of phase 1, here's what I would have done if I had stayed:

  1. Engaged in quality assurance testing with engineering. The engineer that I was closely working with and collaborated throughout the design process was also impacted by the company wide restructuring, so our work had to be passed on.

  2. Paid close attention to metrics such as clicks and click through rates on key pages, bounce rate, and increased time on site.

What I wish we had at Duo:

  1. A/B testing. This would be immensely helpful in having a clearer understanding of how the new navigation performs over the previous.

  2. Usability testing software. Our team had did not have the resources to invest in tools such as UserTesting, dScout, or Dovetail.