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

Purpose

Best Practice

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

Questioning and Identifying Areas of Improvement

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.
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.
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.
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.
The Airbnb mobile app on iOS with the “Saved” tab highlighted in pink as the Active State.
Source: Mobbin.design
3 tabs (goals, my impact, lifestyle) in red, blue, and yellow respectively.
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 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.
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.
The layers panel in Figma showing the tab bar component grouped and named successfully.
Layers panel in Figma

Results

Before and After

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.
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

A detail-oriented product designer focusing on design systems, interactions, and research — celinefucci.com