Modernizing marketing navigation
Redesigned BOK Financial's primary navigation from a left-hand drawer into a mega menu—replacing buried, multi-click paths with one-hover access to every product—to shorten the route to the bank's highest-revenue actions: CD applications, auto loan applications, and new checking accounts.
IMPACT
~65%
Fewer clicks to convert
Projected drop in clicks to reach account opening pages, from collapsing sequential page loads into a single hover-to-click path.
5
Tracking gaps flagged
Audited GA against a new measurement framework and caught missing hover/promo events and undefined RFI journeys before they could leave the launch unmeasured.
100%
Revenue journeys instrumented
Every identified top-converting journey mapped end-to-end so the redesign's revenue paths could be measured from day one.
PREVIOUS
- Content focus disrupted by sidebar
- Weak connection to top navigation
- Responsive design complications
UPDATED
- Separated navigation and content viewing reduces cognitive load
- Clear information hierarchy
- Cleaner aesthetics
Team
Anna Nuggehalli
Lead designer · This portfolioRachel Duncan
Product manager
Christy Ary
Product owner
Alyx Chapman
Supporting designer
Process
Discovery
Design iteration
Prototype
Usability testing
Final design + dev handoff
Discovery
Design iteration
Prototype
Usability testing
Final design + dev handoff
Research methods
Heuristic evaluation
Assessed against Nielsen and Shneiderman frameworks, with a WCAG compliance review.
Competitive analysis
Benchmarked navigation patterns across 4 banks and 3 e-commerce platforms.
Unmoderated usability testing
Validated the proposed navigation with real users in an unmoderated setting.
PREVIOUS
- Utility icons lost in static bar
- Limited screen utilization
- Multi-click filtering required
- Restrictive exploration patterns
UPDATED
- Dynamic top bar organization
- Full-screen menu with orientation support
- Context-aware secondary level access
- Expandable sections for discovery
Reflection
One file. Multiple roles.
The design file worked for line of business. Not as much for developers. Handoff buried the mockups they needed inside comments and annotations meant for other audiences, and the timeline slipped. Now developer handoff gets its own pages: only the necessary mockups, with technical documentation face-up.
Supporting with limited capacity
After handoff, I got pulled onto other teams while development kicked off. Developers and PMs had questions and I didn't have the capacity to answer them. That gap showed up down the line. For later projects, I built in touch points: kickoff and handoff meetings, with materials sent ahead and open reviews so each team could flag gaps or questions early.
