Honeycomb Design System

Developing, maintaining and promoting the Design system of Flixbus. The design system is intended to bring consistency and Brand aligned UI and UX across all user touchpoints of the Flix brand.

Role

User Research, UI Design

Team Composition

2 UX Designers, 1 Front-end Developer, 1 Agile Coach

+

Contributors

Client

Flixbus, Flixtech dev teams

Project Duration

7-8 Months

Design Tools

Figma, Zeplin, Adobe CS Suite, Userzoom test platform

Project Overview

Flix Mobility, the internal tech wing of Flixbus was facing challenges to bring consistency in visual and user experience among their internal and client-facing products. To create a single source of truth in these areas the Honeycomb design system was designed and developed. A small team was responsible to oversee the development and maintenance of the design system by utilizing the existing designers and developers in the other product teams in Flix Mobility.

The challenge of this design system team was three-fold:

1. Creating components to enrich the design system library and keeping up with the constantly changing standard of interface elements by releasing updated design system components

2. Encouraging the product teams through promotional activities to adopt and use the design systems in their products and also contribute to the library

3. Helping product teams to solve design problems with Design system library components and following recommended guidelines

Designing Components for Design system Library

Case: Time picker Component design

Approach

1. Understanding use contexts of time picker component within Flixbus mobile application, website, and Flixcar mobile application.

2. Benchmarking other transportation service providers like Blablabus, Omio, DB, Regio, Greyhound, Emirates airlines, etc

3. Benchmarking other design systems like google material, IBM Carbon, Apple HIG, Semantic UI, Shopify Polaris, etc.

4. Designing different approaches for time picking options like Dropdown, time dial, Tabs, Slider, and keyboard input.

5. Creating 12hr and 24hr varients of the approaches to test in different parts of the world

6. Remote testing the approaches with users from USA and Germany in the 16-65 y/o user demographic

7. Selecting best performing solution and design

8. Creating Usage and use case guidelines.

Promotion of the Design system

We have taken multiple different steps to promote the design system, increase adoption and encourage contribution:

1. Creating Design system user Personas

2. Publishing regular promotional materials & contribution credits

3. Giving visibility of the upcoming features with roadmaps

4. Conducting Design System onboarding sessions

5. Regular feedback and idea-sharing sessions

6. Facilitating on-site design Jams

7. Setting KPIs of Design system use, measuring, and publishing the numbers

Case: Design System User Persona Creation

Approach & Process

To understand the user need of the Design system users (aka Flixbus Tech product teams) we have decided to create personas. Our subsequent activities would be performed to address the need of these personas. To create the personas, we have followed:

1. Survey and Interviewing UX designers, Product Owners, Front-end and full-stack developers in the organization

2. Understanding perception about the design system from the survey.

3. Extracting needs, challenges, inspirations, goals from the interviews

4. Defined 3 High-level persona types based on mental model and behavior

5. Collected assumptive data based on firsthand experience of interacting with these persona types

6. Grouping similar attributes together through generalization and extremes and forming the ideal persona from those attributes.

7. Validated the assumptions and generalizations through 2nd phase of interviews.

8. Distilled and rephrased the information for easy relatability

9. Created infographics for instant understandability for each persona type.

Case: Design system Promotion posters & Onboarding sessions

To spark interest about the design system among the organization, we have decided to create catchy posters and also create contribution credit write-ups to encourage the contributing designers, POs, and developers to the design system.

We were also doing monthly Design system onboarding sessions for all new joiners in Flixtech.

Designing with Design System Library components & Guidelines

To encourage adoption and to demonstrate how to effectively use the design system to solve design challenges among different product teams, I have worked with the product teams to design interfaces following the guidelines and using the components in the design system library. After designing I also had sessions with the developers about how the components have been used in the interface and what things are needed to keep into consideration while developing.

KPIs & Success Matrix

We have set KPIs for the adoption and use of the design system among the products in Flixbus. Data for KPI measurement were gathered by communicating with the developers and Product Owners, searching in the codes, or putting usage data collection scripts.

KPIs were measured for:

• Number of new components requested in the quarter

• Number of new adoption of the design system in products

• Number of contributions per release

• Number of participants in sprint planning

• Amount of use of design system components in products

Organizational Impact

As the adoption of the design system increased, the internal and client-facing Flixbus products started to look brand-aligned more consistently. The Tech leadership was also considering making the design system mandatory to use in all product teams. Creating new brand themes for Flixbus’s new prominent acquisitions was more manageable and also without deviating from Flixbus’ core brand identity.

Latest

The design system can be found in the following link

https://styleguide.hive.flix.tech/

More Projects