Role

This is a project that I worked on for Sequence Builder, from August to November 2024. I I collaborated with the assigned Engineer and Project Manager and was overseen by the CTO and Head of Design.

Problem

The menu items in the sidebar navigation are creating visual clutter and decision fatigue and are starting to present scalability issues. Users are having issues with finding essential functionality such as how to upgrade their tier.

Solution

A better organized sidebar and main navigation that will streamline user flow within Sequence Builder as well as highlight upgrade options.

KPIs

Amongst others (ex. drop-off rates in key flows), the main metric we will look for will be a higher conversion rate for tier upgrades.

navigation
design

UX considerations

This section of the research board allowed me to extract any patterns that I can learn from and apply to my iterations.

Actionable insights for mvp

Together with the PM, Business Development and Head of Engineering I analysed the findings and aligned on the following MVP features.

simplified sidebar and main menu
using progressive disclosure by creating menu subgroups
highlight of our Upgrade feature
clear visual hierarchy

Competitive
analysis

I looked at Third Web, Magic Link, Alchemy and Crossmint to identify opportunities and learned behaviour related to navigation in web3.

Top nav bar

An Upgrade option was added to meet MVP requirements
Some tabs such as Explore were removed based on analytics from the Data team. This was don to simplify the structure of the navigation and be more user-centric.

sidebar

Sidebar items were grouped together under categories in order to reduce decision fatigue and visual clutter.
The names of the groups were chosen based on the main actions the user would perform on our platform: Setup, Implement, Onboard, Monetize and Monitor.
After internal feedback, Monitor was changed to Insights.

Proposed
navigation
structure

wireframes and prototype

Wireframes and a lo-fi prototype were put together to show initial concepts and ideas to collect feedback.

Notable changes

Project tab is moved in the sidebar to declutter the main nav and to follow patterns observed in competitors.
Sidebar items are grouped per functionality.
Upgrade tab is now in main navigation bar.

Lo-fi iterations

goals

Gathering feedback on navigation structure
Gathering feedback on organization and nomenclature

questions

Is there anything the you would change about the navigation structure?
Is there anything you would change about the item grouping and nomenclature?

insights

The insights provided by users pertained to:

sidebar tab category organization
nomenclature
adding tabs such a Support in the main nav

user testing

Management approved unmoderated testing with 5 targeted users on Usertesting.com

Final changes

The assets were further discussed with the PM, Head of Design, Engineering and BD.

Alignment

Since the changes required were minor, no workshops were needed and alignment could be reached directy in Figma.

mockups

I created high-fidelity mockups and prototypes based on the feedback received through testing and internal discussions.

overview

I usually sync with engineering before and after handoff to flesh out requirements and answer any questions about the design files. This is a good moment to ask whether developers need any extra assets or clarification.

Assets

The handoff file included components, mockups and prototypes, and relevant documentation.

handoff

Data collection

I met with the engineering and Data team to discuss event tracking implementation.
I met with the PM to discuss continuing to collect feedback on the navigation performance from our users.

meeting MVP

The final iteration met MVP by:

Offering a streamlined user flow through the Sequence Builder navigation
Creating better visual hierarchy and diminishing clutter
Seeing a 12% increase in visits to the Upgrade page and a 4.3% increase in tier upgrades

next steps and project success

Learnings

In this project, I gained a deeper understanding of how reducing cognitive load and creating a good information hierarchy can make quite a big impact on the overall user experience. Also making sure that the user can quickly access the information they are asking for can mean a huge difference in conversion and retention.