Background

‍

Pandora is a unit of Delivery Hero which consists of 6 brands namely Foodpanda APAC, Foodpanda EU, Foodora, Mjam, Yemeksepeti and Damejidlo ( Foodora + Foodpanda = Pandora). Bento is the Design system that supports Pandora. Discovering and using the assets from a design system of this magnitude has been difficult for users. This project was about increasing asset discoverability.

‍

This project increased discoverability of the assets by 10% and decreased the time taken to find the assets by 50%

‍

My Role & Duration

‍

As a designer, I wanted to solve this problem by making minimal or no changes to the current libraries. I also needed to make sure that the solution could be easily accessible by all the teams across continents.

Duration of the project : 4 weeks

‍

Problem Discovery

‍

I analyzed 6 diverse Pandora designers using the Bento system, including newcomers and those with 1-2 years' experience. Through close observation and engagement, I aimed to reveal Bento asset search challenges, leveraging varied experience for unique usability insights.

‍

‍

Findings

• Discoverability and Navigation - Difficulty finding assets due to complex hierarchy.
• Inconsistent Naming - Confusion caused by varied component names.

‍

‍

‍

‍

‍

‍

‍

Problem Statement

How may I enhance the discoverability and navigation of components and assets within the design system to address the challenges faced by designers?

‍

Brainstorming

‍

• Enhanced Search - Implement a robust cross-brand search with tags, filters, and smart suggestions for efficient asset discovery.
• Smooth Onboarding - Provide onboarding for new designers, reducing the learning curve by introducing Design System layout, search, and navigation.
• Guided Information - Include tooltips and contextual help for informed design decisions.
• Organized UI Kit - Develop user-friendly UI Kit/Sticker sheets for categorized, labeled asset display, aiding in streamlined discoverability and design decisions.

After presenting these solutions to stakeholders, the 4th was chosen. The initial 3 were already applied, enhancing usability. Additionally, Bento needed an overview of its design assets.

‍

Benchmarking

‍

In my research, I mainly looked into three reliable sources to understand the current standards: Google's Material Design, Uber's Base Design System, and Decathlon's Vitamin.

‍

‍

‍

Findings

Material Design by Google:

• UI Kit with clear component frames, covering light and dark modes.
• Neatly organized and accessible component variants.
• ‍

‍Vitamin Design System by Decathlon:

• Categories for components, each in separate sheets.
• Inclusion of all variables and states.

‍

‍Base Design System by Uber:

• Assets categorized into Foundations, Core components, Forms, overlay, selectors, and navigation.
• Component categorization by shape and size (e.g., Button small, divided into circle, rectangle, pill, square), with selected, hover, and active variables.

‍

Prototype

‍

Designing

After looking at competitors and gathering input from stakeholders, I've determined the following criteria for my designs.

• Categorize components for better organization and usability.
• Incorporate variables from all brands for effective cross-brand visualization.
• Prioritize most-used component variants for a clean file.
• Utilize Auto-layout for future sheet maintenance.

‍

User Testing

‍

In the design evaluation phase, I tested with three users to assess design efficiency. They were asked to locate specific assets. The main goal was to gauge how well the design helped users find and access targeted assets in the interface.

‍

Findings

• Assets in component sheets were easily scannable.
• Clear labels with accessible Figma library links and design guidelines.
• Component sheets were categorized alphabetically, but users needed frequent zooming due to scattered placement.

‍

‍

‍

‍

Iterations

‍

In this iteration, I focused on improving findability and scannability. I categorized components by functionality instead of alphabetical arrangement.

‍

‍

‍

‍

‍

‍

‍

‍

‍Open card sorting exercise

To understand designer perceptions and component usage, I conducted an open card sorting exercise using Optimal Workshop within the Bento team. They categorized components based on intentions. The results were intriguing, revealing interesting and overlapping insights.

‍Hybrid card sorting exercise

To gauge user understanding of Bento designers' component intentions, I chose a Hybrid card sorting exercise. This aimed to align user perceptions with designer intentions.

Users' component perception and usage differed by 20-30%. Results guided component categorization to ensure a tailored user experience.

‍

Iteration

In this iteration phase, I focused on a clear visual hierarchy, segregating and facilitating asset accessibility. I categorized components by function, aligning with user perceptions. This improved user experience and streamlined interface navigation.
‍

‍

User Testing

In the evaluation phase, I conducted user testing with six individuals, with the primary goal of enabling users to navigate effortlessly to the desired component based on its functionality.

‍

Results

‍

Users adeptly navigated components by function and efficiently searched for fitting designs. This led to more informed design choices, reducing component search time by 50% and increasing discoverability by 10%. Clear differentiation between local and core components was comprehended, aided by the file serving as a reliable source of truth.

‍