Iterating on a Design Component

Solving key problems to enhance clarity and readability

The subtitle “Navigation Bar” appears in caps above the title “Iteration Walkthrough” against a purple background.

Component Details

A bottom tab bar with 4 options: photos, memories, shared, and albums. Albums — the Active State — is highlighted in blue.
A bottom tab bar in Apple’s Human Interface Guidelines
A bottom navigation bar with 4 options and a purple background. The music tab is highlighted to signify the Active State.
A bottom navigation bar in Google’s Material Design Guidelines

Current State

A tab bar with 3 options: goals, my impact, and lifestyle. The icons are bright purple set against a dark indigo background.
Current tab bar

Iteration Process

Two screens side-by-side depicting where to place UI elements and guides/rulers for several iPhone devices.
Guides/rulers for the iPhone X/XS/11 Pro
An iPhone screen highlighting the 8pt grid system in red.
8pt grid system for an iPhone
3 tabs — 125px each — in red, blue, and yellow respectively.
Bounding boxes for tabs
The Google News mobile app on iOS with the “Headlines” tab highlighted in blue as the Active State.
Source: Mobbin.design
The Airbnb mobile app on iOS with the “Saved” tab highlighted in pink as the Active State.
Source: Mobbin.design

Keyline shapes are the foundation of the grid. By using these core shapes as guidelines, you can maintain consistent visual proportions across system icons.

3 tabs (goals, my impact, lifestyle) in red, blue, and yellow respectively.
Tab bounding boxes with icons and labels horizontally centered
The new tab bar design with an indigo background and the goals tab highlighted in periwinkle as the Active State.
The new tab bar design
An arrow pointing to the use of a baseline grid to align text.
Baseline grid
The layers panel in Figma showing the tab bar component grouped and named successfully.
Layers panel in Figma

Results

A before and after comparison of the tab bar component in question throughout this article.
Tab bar — before vs. after
The new tab bar design with an indigo background and the goals tab highlighted in periwinkle as the Active State.
Redesigned tab bar
Another tab bar design, this time with an indigo background and the goals tab highlighted in volt green as the Active State.
New tab bar with green as the Active State

--

--

Product designer at Gusto — celinefucci.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store