Navigation Redesign
Helping visitors find crucial pages

Client
Shippo
Design Role
UX Design, UI Design
Timeline
April-May 2022
Deliverables
Figma Prototype
Problem
- The navigation took up 75% of screen real estate
- Information could be challenging to find, and submenus would accidentally get triggered, causing a poor user experience
- There were repeating list items, and content resources spread out
- Sales teams drift chat logs indicate users are not finding support documentation
Objective
The product section’s language can be confusing, so we tested different wording and worked that data to the new navigation.
We used “For Merchants” and “For Platforms” in our drop-down hyperlinks. The users were tasked to find our shipping page and our API page. The current phrases scored a 57% success rate compared to 85% when using “Shipping Software” and “API.”
Testing
Finding the For Platforms page:
- Direct Success: 51%
- Indirect Success: 28.6%
- Give Up / Bounce: 14.3%
Finding the Shipping API page:
- Direct Success: 85.2%
- Indirect Success: 14.8%
- Give Up / Bounce: 0%
Solution
We took away complexity and set forth a more straightforward, non-disruptive UI approach that builds on our last iteration. In addition, it takes less real estate and setup goals for each section of the nav.
Our updated navigation sitemap has one less list item. We excluded repeating topics like having our blog and shipping calculator to their corresponding sections and reorganized the Products and Resource sections.
- Products: Instead of using “For Merchants” and “For Platforms” as links, they are now being used to separate both product stories. In addition, our support documentation is more prominent in hopes of bringing down sales drift chat inquiries.
- Partners: We emphasize becoming a partner with messaging and its dedicated space in the dropdown.
- Resources: Our resources are organized into two groups, learn and optimize. The blog will still be on the upper left side under learning, keeping heat map data in mind how most users start reading from left to right. We also used website click data to prioritize how we place the rest of the items.
- Company: This section is HR-driven, and to support our hiring goals, we highlight our open roles right from the dropdown.
- Pricing: Our pricing page provides our prospecting users with the essential information to sign-up. We are pointing this out in writing to promote our pricing plans.
Impact
Visitors initiated fewer Drift chat sessions to find the pricing page and support documentation decreased after the new navigation was launched.
PAGE | DECREASE IN CHATS |
Create a Label | -52% |
Pricing | -40% |
Billing | -41% |
Getting Started | -15% |
USPS Rate Calculator | -94% |