ACRRM Navigation High Fidelity Mockup

Optimising Website Navigation for a WFH Reality

A UX Research and Design project that aimed to optimise the website menu for smaller screen devices. This was in response to observing an increase in accessing the website on smaller laptops due to many website visitors working from home.

I conducted research to better understand what pain points our stakeholders were experiencing with the current menu and how to align the menu with how they wanted to use the website.

Company Profile

The Australian College of Rural and Remote Medicine is a medical college that provides leadership, training and professional networking for doctors in rural and remote communities across Australia.

As a part of the internal website team, my responsibilities included managing the website and ensuring good customer experience for various website visitors, primarily medical professionals who use the website for information and resources.

Design Problem

With the onset of the pandemic, Work From Home became the norm for many. As such, visitors began to increasingly access the website via laptops, rather than larger desktop monitors which was the previous norm.

This exacerbated a design issue with the website’s navigation menu. The large volume of navigation links needing to be displayed, caused the menu, when active, to obscure over 80% of the screen.

While manageable on larger screens, on smaller sized laptops, the mega-menu obscured the entire screen and was almost impossible to close. This caused a significant pain point in the user experience and led to increased complaints and support requests.

Working closely alongside a Business Analyst, he and I received the design project and began to conduct user experience research in order to provide recommendations.

Design Problem

Original Design was poorly optimised for smaller screen devices

Understanding the surrounding contexts
  • An Increase in Work from Home led to an increase in visitors accessing the website on smaller sized laptops.
  • The design of the website navigation did not afford itself well to smaller screen devices.
  • This created a frustrating user experience as when active, the navigation mega menu took over the visitor’s screen.
  • The micro-interactions made it difficult to close the navigation once open – causing more frustration.
  • </ul

Design Solution

The new navigation design combined mega-menu and traditional navigation styles. The new slim UI ensures an effective and space-efficient navigation, ideal for smaller screen sizes such as 13″ laptops.

The design for the new UX mouse interactions aimed to provide a more organic and intuitive navigation experience. To ensure visitors activated the menu when they wanted, we changed the initial opening action to a click. The new design used the hover interaction for Secondary Tier links. This improved visitors ease and speed to explore the navigation links and find relevant information.

Design Solution

New and Improved UX and UI centered around the needs of actual visitors

Increasing the design scalability across smaller screen laptops
  • The placement of the Primary Tier links now allow more to fit on the screen
  • The space taken up by the navigation is reduced and visitors are able to ‘exit’ the navigation easier
  • Micro Interactions have been planned out to provide visitors with greater agency when activating the navigation via a ‘click’
  • Using the Hover Interaction on Second Tier menu items, visitors are afforded greater exploration to preview the Tertiary Tiers
Improving visual accessibility for Mobile
  • Ensured colour contrast ratios and font weights aided in readability

Design Process

UX & UI Research

We conducted research to better understand how and why visitors wanted to use the website. We created a pool of participants from the ACRRM community including rural doctors, members, fellows and staff.

Key to designing an effective navigation system was to pinpoint the problems each visitor experienced when visiting the website and identify their core goals. With this insight, we could design a menu that would more easily connect website visitors to the content they wanted to find. Virtual user interviews via Microsoft Teams allowed us to explore and observe firsthand how users used the website navigation to explore and access content on the website.

I explored and evaluated other websites’ navigation UX and UI. Using SWOT analysis, I identified key insights that I could use to form a design hypothesis as well as inform the design process and inspire new solutions.

I also set up Hotjar to generate heatmaps and observe screen recordings from actual website visitors. This provided us with contextual insights into identifying more specific pain points in the UI as well as the interactions.

The various methods we used as part of this research phase, solidified our focus into two core issues as well as point to potential solutions:

  1. User Interface: Improve the visual design and layout of the menu so that it increases its adaptability across a greater range of devices including smaller laptops.
  2. User Experience: Revise click and hover mouse interactions for the menu navigation to give visitors greater agency when opening the menu and exploring second and third tier navigation items.

 

Design Phase

With Rapid Prototyping design methods, I could quickly validate and refine our design artefacts. I trialled ideas collected from brainstorming sessions as well as suggestions gathered from the user interviews. These led to us creating design solutions that were then refined into Low Fidelity Wireframes.
Through an iterative design process, used to repeatedly refine the design, we reached a High Fidelity design solution we were confident would address the primary pain points identified from the research phase.

We created an interactive prototype to test the design solution and validate our design hypothesis. Figma was used to design both the HiFi mockup and interactive prototype.

Next we followed up with our interview participants and ran testing sessions with them using the interactive Figma prototype. Each participant followed a series of scripted scenarios as we observed how they interacted with the prototype menu. Once I addressed feedback and insights revealed by these sessions, I were confident to prepare the design for implementation.

We took the designs and engaged the development team, crafting clear handover documentation. The Figma prototype played a key role in communicating the design, especially the mouse interactions.

Design Process

Engaging Stakeholders to better understand their intrinsic needs
  • Stakeholder Interview Sessions
  • Build User Personas
  • Product Observation Sessions
  • HotJar Analysis
  • Card Sorting Exercises
Using Iterative Design to continually refine the solution
  • Rapid Prototyping
  • Wireframes
  • Prototypes
    • Low Fidelity
    • Mid Fidelity
    • High Fidelity
    • Interactive Prototype
  • Usability Testing Sessions

Outcome

To analyse the success of the design, I again used Hotjar to monitor how visitors interacted with the new menu navigation. I observed visitors interacting with the menu across more devices. Using the screen recording and heatmap tools, I saw a tangible reduction in rage-clicks that indicated less frustration.

Due to the scaleable nature of the new design, I recorded fewer visitors using smaller screen devices getting trapped on the navigation menu. I also noted a reduction in negative website feedback and support requests in the weeks following launch.

By choosing to be led by the user research phase conducted at the beginning of the project, I designed a solution that more directly addressed primary pain points and provided website visitors with a website menu that was easy to use, aided exploration of content and adapted to their devices – of any size.

Improving the Work from Home Experience

Outcome

Validating the Design Hypothesis

New design deployed to the website, with Hotjar enabled record user behaviour trends

Monitored the website over the following weeks and months to track user behaviour

  • Observed a decrease in users getting trapped when the navigation activated
  • Decrease in recorded rage clicks from users getting frustrated
  • Ensured the navigation scaled across a wider range of devices – including smaller sized laptops
  • Enabled the ACRRM marketing team with greater flexibility in the number of links the website could support
  • Observed a decrease in support requests and complaints about the navigation

Related Case Studies