nav mockup laptop.png

PADI Navigation

Navigation Architecture and Design

 
 

context

Going scuba diving is not as easy as it sounds. A certification is recommended in diving - you can’t rent gear in the United States without one. Going to PADI.com to start the process shouldn’t be difficult as well. Working with management, we prioritized the development work to start soon after our SSO was set up.

Business Goals

Our main goal was to increase findability within the website. Currently, our navigation is too high level for beginners to identify where to start their journey. We also wanted to increase traffic into travel and merchandise sites and increase awareness of diver conservation.

 
 
Screen Shot 2021-04-04 at 6.21.43 PM.png
 
Screen Shot 2021-04-04 at 6.59.49 PM.png

customer needs

Work started with a basic understanding - why did you come to PADI.com? I ran a survey on the website to identify who our visitors were and what information they were looking for. These results validated additional quantitative research. Google Analytics statistics and heatmaps of the website, including our FAQ pages and home page, told us that people were most interested in learning how to start diving and buy another course continue diving.

 
Screen Shot 2021-04-04 at 6.35.02 PM.png

Testing hypotheses

With a better understanding of our business and customer needs, I chose a list of words to represent main navigation items: Learn, Dive, Protect, Shop.

With each option, I had several synonyms available, but I was ready to user test my main options. As you can see in the results for Learn, my initial options were not the answer!

After several rounds of testing, I landed on a final set of terms that went through card sorting, sitemapping, additional user testing, and finally, we’re ready for design!

 
Screen Shot 2021-04-04 at 5.26.43 PM.png
Screen Shot 2021-04-04 at 6.28.57 PM.png
Screen Shot 2021-04-04 at 7.49.15 PM.png
 
 

Design

This project was unique to PADI because it spanned across all product experiences. To get insights and ideas from the teams, I facilitated an ideation workshop to kick off design. Together, we created dozens of ideas and prioritized. I took the ideas, project research, and best practices in navigation design to come up with some high fidelity mockups. Mockups went into stakeholder reviews and design critiques. Working with the UI designer and development lead, we turned mockups into final designs and components ready for development.

 
 
Screen Shot 2021-04-04 at 7.57.06 PM.png
Screen Shot 2021-04-04 at 8.38.55 PM.png
 
nav mock3.png

SEE IT LIVE!

Development expects to launch August 2021.

TOOLS

Figma, UserTesting.com, Google Analytics, Hotjar

TEAM

Jasmine Yau (Product Management), Arron Creechley (UI Component Library), Clint Avalos (Tech Lead)