CHEVRON MOBILE

The goal for this project was to translate the existing code, content, and structure of chevron.com to a mobile-optimized experience.

Existing Site Audit

Pages on the site were very long and text-heavy. One challenge of this project was coming up with a way for the content to be digestible on a small screen. The biggest challenge, however, was to create a navigation pattern that combined the main navigation, utility navigation, breadcrumbs, and in-section navigation all into one intuitive hamburger menu.

Navigation Pattern For Mobile Web

The navigation had to be intuitive for new users and accessible for people using the site heavily every day as part of their jobs. We did usability tests of seven different navigation variants before refining the version you see on the Chevron mobile site today. Watch the videos above to see how it works.

An additional aspect of this project was communicating to Chevron’s developers how to map content from their content management system into this new mobile-optimized design. We also helped them establish conventions for the creation of new pages on the site.