Navigation Redesign

The mobile nav was too bulky, distracting from content—especially on shopping pages. The goal: make it smaller, more intuitive, and task-focused (like bill pay and shopping).

My role

Lead UX/UI Designer

Company

C Spire

Team

Business Owner Data Analyst Usability Tester Developer QA Tester

The Challenge

The mobile navigation was taking up too much space — especially on shopping pages — making it harder for users to focus on content and complete key actions. We needed to shrink the nav’s footprint while keeping it functional and familiar.

Key Goals:

- Reduce visual weight of the nav
- Prioritize actions like shopping and bill pay
- Improve clarity without sacrificing usability

Research Highlights

Before jumping into design, we set a clear research plan to understand what worked — and what didn’t.

- Reviewed performance data of the existing nav
- Ran a competitive audit
- Applied usability insights from Baymard

Key Insight: A simplified, space-conscious nav could work — if icon clarity and menu structure stayed strong.



Design

I created high-fidelity mockups in Figma with these goals in mind:

- Cleaner, more modern visual style
- Streamlined structure for faster access
- Clearly labeled icons and simplified content hierarchy

Interactive prototypes brought the design to life for testing and dev handoff.

Iteration

Using feedback, we refined:

- Menu content prioritization
- Icon labeling for clarity
- Ensured shopping and billing remained front and center

We also removed sticky navigation — a bold move. Though initially debated, post-launch data confirmed: no negative impact and more screen space for users.



Testing

We ran mobile usability tests on the updated navigation. Key tasks included:

- Finding a device to purchase
- Accessing billing options
- Navigating to the homepage

Findings:

- Users knew what belonged in the nav — and what didn’t
- Icons were easily understood
- Navigation success rate: 100% for both shopping and bill pay


Results

- Cleaner UI with reduced nav height
- Faster access to shopping pages
- Fewer support tickets related to navigation confusion

This project proved that thoughtful reduction can elevate user experience. We gave users more space to engage with content, while keeping key actions just a tap away.

Sometimes less really is more — when it’s backed by data and tested with real users.