ENHANCEMENT

Designing for clarity: Making navigation simple and clear

 

The impact of effective website navigation

The importance of website navigation is often overlooked. It acts as a guide to help users find content, which is important for increasing user engagement and achieving business goals. Studies show that intuitive navigation can reduce bounce rates by up to 20% and increase conversion rates by as much as 15%. A well-structured content hierarchy helps improve SEO performance by allowing search engine crawlers to target important pages. This results to better search rankings and more organic traffic.

Team

Designer πŸ™‹πŸ»β€β™€οΈ, copy writer, UX research, product owners and developers

 

My role

I led the design process, which included competitive research, information architecture, prototyping, visual design, and QA.

 

The problem

The previous version had accessibility issues, a poor Cumulative Layout Shift (CLS) score, and didn't meet the needs of business and priority targets.

Approach

I worked closely with the product owner, content writer, and data analyst to rethink and tackle the changing business needs as Sonnet expanded its product offering. Together, we restructured and simplified the information architecture, improving navigation categories, updating the copy, and giving the design a complete refresh. Check out the previous design below:

 
 
 

Strategy & vision

I began the work by conducting competitive research to help UX driven decisions and gain stakeholders' alignment. However, when I presented the findings, it became clear that stakeholders were disinterested. They were looking for ideas that would directly impact the Session to Start Quote (StoSQ) metric. As a result, the project was put on hold. After a three-month hiatus, the product owner regained alignment from stakeholders. I started to work on the project, focusing on refining the information architecture and developing low-fidelity wireframes.

journey mapping
information architecture
 

Design execution & validation

Once we finalized the information architecture, my focus shifted to the mobile viewport, which was the most challenging given the limited screen real estate. The process involved quick sketches and creating early-stage concepts. Prototyping was the most effective way to gain meaningful feedback from the team and stakeholders. Sharing work in progress whenever I reach a milestone became essential for getting approval from leadership and ensuring everyone was on the same page.

lo-fi wireframes
lo-fi wireframe
 

Always fight for good UX

Initially overlooked by the business, the importance of prioritizing this project became clear as the business grew. Ultimately, stakeholders were highly satisfied with the team’s enhancements to the site navigation, which included better content organization and improving the user experience.