Creation of component : breadcrumb

Client :

Veepee

Category :

Design System

Start Date :

2024

The
Context

As part of enhancing Veepee’s design system, we identified the need for a strategic addition: a “breadcrumb” component. This navigation element was crucial for complex journeys, enabling users to understand their context while ensuring consistency across the platform.

The
Challenge 💪🏼

Design a modular, intuitive, and visually appealing breadcrumb component that:

Simplifies hierarchical navigation in complex journeys.
Seamlessly integrates with the existing design system back & front.
Performs efficiently, even on deeply nested pages.
Adapts to diverse devices.

My
Role 🧢

As a Product Designer, I was responsible for:

Conducting user and team research to identify needs.
Defining use cases and functional specifications.
Prototyping and iterating
Collaborating with the designers to make sure it fits perfectly
Documenting the component for seamless reuse within the design system.

Research 🔎

In order to create a single component that could meet the expectations of the different teams and designers, I first of all took stock of what already existed in terms of both front and back office design (for internal back offices). This was followed by a discussion with the various designers in order to align the new behavior to be adopted.

The solution?

The breadcrumb component was designed to be:

Clear and Readable: Hierarchies are distinct, with an adaptable format for various layouts.
Interactive: Breadcrumb elements are clickable, allowing easy backtracking.
Customizable: Includes themes and variants (compact, extended) tailored to specific product needs.
Responsive: A mobile-friendly version with dropdown menus for longer paths.

Benchmark 👀

Time to bench and gather inspiration !

Mockups

After creating wireframe to make sure the new flow and blocks are well build. It's time to create the component.

Documentation 📘

A comprehensive documentation was created to ensure seamless adoption of the breadcrumb component across all product teams. It includes:

Anatomy: A visual breakdown of the component with a clear description of each element (icons, separators, links, etc.).
Layout: Placement and spacing rules to ensure harmonious integration in various contexts (desktop, mobile, responsive).
Do & Don’t: Best practices for usage and common mistakes to avoid for consistent user experience.
Accessibility: Guidelines to ensure the component is usable by all, including color contrast requirements, keyboard focus, and ARIA attributes.

ME CONTACTER