Is Your Sidebar Hurting Your UX? Our Redesign Journey to Effortless Navigation
Published: 2024-06-30 16:41:00


Have you ever felt frustrated navigating a website with a clunky sidebar? We hear you. At [Hexmos](https://hexmos.com/), we're constantly striving to improve the user experience.

Recently, we took a critical look at our sidebar design and identified many areas for improvement.

This blog post will delve into the journey of redesigning our sidebar navigation, taking inspiration from industry leaders.

## Our Existing Sidebar Design

### High Contrast and Visual Distraction

Our initial sidebar design boasted a bold black-and-white theme.

While visually striking, it created a high visual contrast that drew unnecessary attention away from the content users came for.

This distracted from the overall user experience.

### Solving issues in the initial design

We recognized the need for improvement with our initial sidebar design.

Prioritized user focus on the content by implementing a lighter theme for the sidebar and navigation bar.

<div style="text-align: center;">
  <img src="https://journal-wa6509js.s3.ap-south-1.amazonaws.com/d52dc6e5c155176af994d8535405941d676fe7d06798df0b572a3535af63a8b9.png" alt="image 373" width="400"/>
</div>

This shift in color scheme achieved two key goals:

**Reduced Visual Clutter:** The lighter theme created a more balanced visual experience. The sidebar no longer competed with the main content area for user attention.

**Content Takes Center Stage:** By adopting a lighter theme, the content on the page became the focal point. Users could now easily find the information they sought without being distracted by the sidebar.

However, the User experience was not good due to multiple issues.

### Inefficient Multi-level Navigation

While the lighter theme addressed the initial contrast issue, further exploration revealed a new challenge.

Our multi-level navigation structure requires users to click through three levels to reach certain sections.

This inefficiency became apparent as users expressed frustration with the navigation flow. Imagine trying to find a specific setting buried within three layers of menus!

**A solution was needed.**

A three-click journey wasn't ideal. We brainstormed solutions to improve the navigation flow and user experience.

Our goal was to create a system that was both intuitive and efficient, allowing users to find what they needed quickly and effortlessly.

Before going into the solution let's understand the product we are building.

### Hexmos Feedback

We are a small team, building a product called [Hexmos Feedback](https://hexmos.com/feedback).
Feedback Consistently Motivate Your Team with Less Effort.

More than 60% of employees yearn for regular, meaningful feedback, but often feel undervalued.

Hexmos Feedback helps your people provide frequent feedback to one another effortlessly
so that your team always remains highly motivated.
Feedback keeps teams motivated and engaged through recognition and continuous feedback.

We have attendance management as a part of Hexmos Feedback. We go beyond simple attendance. We help you look at "participation".

Explore Feedback: https://hexmos.com/feedback
Our book: https://turnoverbook.com/

## Case Studies

To find inspiration for a more intuitive navigation system, we turned to industry leaders known for their user-friendly interfaces. Here's what we learned:

### [Notion](https://www.notion.so/)

Notion offered a clean, single-level sidebar.
It has some issues which cannot be used in our use case.

#### Absence of multi-level navigation

While this worked for their specific content structure, it wouldn't accommodate our complex, multi-level navigation needs.

#### Single-Level Navigation Wasn't Enough

Having all the elements in the sidebar will clutter the sidebar, making it difficult for users to find what they're looking for.

Continue Reading [Article](https://journal.hexmos.com/is-your-sidebar-hurting-your-ux-our-redesign-journey-to-effortless-navigation/#google-play-consolehttpsplaygooglecomconsole)