Modernizing bottom navigation for an enhanced consumer-like experience.
Improving navigation clarity and accessibility through visual design.
Project Summary
I joined the bottom navigation project to leverage my visual design and UI expertise and meet a tight deadline.
My contributions included refining the layout and exploring animation transitions, all to deliver a seamless and delightful consumer-like experience.
Impact
Optimized navigation for clarity and discoverability
Elevated UX with purposeful, accessible animation
Co-presented design rationale, gaining approval
"Durojaiye's early concept work on menu tab interactions, particularly the transition between selected and unselected states, laid the groundwork for a clean, intuitive, and delightful design. I genuinely enjoyed our collaboration and consider it a hallmark experience."
Kyle Hegge
Lead Product Designer
Identifying areas for improvement.
The original design primarily used iconography, which could be confusing, especially given Workday's global reach. While active tabs had a subtle visual difference, the distinction from inactive states could be more pronounced.
Additionally, the existing transition involved a simple slide from one icon to another, which offered an opportunity for more engaging visual feedback.
1
Low contrast selection states
2
Unclear navigation points
3
Light animation interaction
Experimenting with concepts.
Following inspiration research, I developed a few concepts and presented them to the mobile team. From there, we engaged in a collaborative discussion to determine which design to develop further. Here are a few of those explorations:
Shaping the bump.
With a design direction chosen, focus shifted to granular refinement. I developed multiple variations exploring oval and circular forms to perfect the 'bump' shape. After two rounds of feedback and dot-voting, the most visually appealing iteration was selected.
Finalizing for handoff.
Upon securing leadership buy-in, I put the final touches on visual design, creating a new bottom navigation that elevated and brought a consumer feel to a SaaS experience.
Improvements:
Higher contrast selection states
Clearer navigation points
Enhanced animation interaction
The design and animation specs were then handed off to the design lead, who created the JSON animation file that was given to Development.
Shortly after handoff, the new and improved bottom navigation was shipped, modernizing and enhancing the overall experience.