- AIR LIQUIDE CASE STUDY -
Breadcrumb Navigation Concept
OBJECTIVE
​
Implement mobile-breadcrumb navigation that enhances user experience by providing a clear path to track and navigate Air Liquide's website hierarchy, The breadcrumbs will reflect the site structure and offer users intuitive navigation across the "Stakeholder" section.
PROBLEM STATEMENT
How can we make it easier for users to keep track of where they are on our website?
The Scope
The purpose of this project was to aid users in keeping track on where they were in their searching process, via breadcrumb navigation.
KEY FEATURES
- Top-page Breadcrumb Navigation
- NAV Bar Breadcrumb Navigation
PROJECT DURATION
8-9 weeks
The Roles
UX Designer
UI Designer
UX Researcher
Information Architect
Interaction Designer
Prototyping Specialist
Usability Tester
The Tools
Figma
Google Forms
Canva
Zoom
THERE'S ALWAYS ROOM FOR IMPROVEMENT...
SITE ANALYSIS
Despite the impressive features on Air Liquide’s website, such as investment simulators and real-time stock performance, a few issues couldn’t be ignored. These included inconsistencies in statements and the placement of certain call-to-action buttons. However, the most notable concern was the absence of breadcrumb navigation on the mobile site - a key point of discussion in this case study.
FEATURE MATRIX
Focusing on the “Investments” portion of Air Liquide’s website, an analysis was done against other investment platforms - such as Vanguard, J.P. Morgan and T. Rowe Price.
A Proto-Persona was created based on assumed characteristics, thoughts and frustrations of a typical user.
TASK FLOW
A task flow was created showcasing the projected process of the site’s breadcrumb navigation.
EARLY DEVELOPMENT
Throughout the design phase, there are many different versions of the product at hand - the following are creations made during the earlier portions of the development phase.
"Crazy 8" Sketches
During a Design Sprint, Crazy 8 sketches were created, illustrating possible breadcrumbing layouts within a given article and Nav-Drawer.
Low-Fidelity Wireframes
Simple Low-fidelity screens were created, depicting the ideal breadcrumbing layout within a given article and Nav-Drawer.
“...even if the previous words were highlighted, that’d be a bit easier. I didn’t know they were tappable.”
Solution: Also underline previous tabs, indicating that they are tappable and interactive.
User Testing
Moderated Testing via "Zoom"
Testing was carried out with 3 potential users to gain feedback on the current state of design. These users ranged from 40-65 and were recruited via social media.
“The navigation up top is nice, but I wish there was something on each page tying the breadcrumb navigation to information on the page - maybe as a form of confirmation”
Solution: Include a Header for each page, tying in the navigation to the information.
“I like the breadcrumb navigation because if you mess up, you don’t have to start all the way over to get to a particular screen and things are easier to find.”
Comment: Although there was no constructive criticism given by this user, their comment showcases the importance of having breadcrumb navigation for all devices. With most users accessing the web via their phone, it is especially important to have that option for mobile devices.
Mid-Fidelity Wireframes
In-depth Mid-fidelity screens were created, depicting the ideal breadcrumbing layout within a given article and Nav-Drawer.
High-Fidelity Prototype
High-fidelity screens were created, depicting the final breadcrumbing layout within a given article and Nav-Drawer.
Whats Next?
OPPORTUNITIES
DETAILS
Open-Card Sorting
Conduct an open card-sorting analysis to see what terminology users come up with for different Main-Topics, Sub-Topics, etc. within the navigation tab.
-
Users seemed to be confused with the phrase “Discover our stories” as they were looking for investor testimonials