HungerStation, design system + app design

Design System

My role

  • Auditing existing component library

  • Defining our DS maturity level

  • Planning and prioritising phases of delivery

  • Building Figma components

  • Writing documentation

  • Creating a process and leading ceremonies

  • Facilitating workshops

  • Developing design principles

  • Governance and tracking

  • Creating design critique template

  • Organising team socials / events

Team
5 Product Designers
1 Visual Designer
1 Interaction Designer
1 Dedicated Engineer

Timeline
Aug 2023 - present

Quick insights

40+ components
3 libraries
6 trackers
3 weekly alignment sessions
52% adoption [Mar 24]

the problem

With a growing app and expanding design team, there was an increasing need for a functioning Design System.

Design

  • Lack of guidelines and documentation (component usage, tone of voice, ux writing, terminology etc.)

  • Lack of accessibility consideration and guidelines

  • No design principles

  • Components not built using up to date Figma features

  • Inconsistent and fragmented experiences across brand and product

  • No release plan for what is currently existing

  • Not all components being used in designs have been built

  • Doesn’t cover all platforms and touch points (only consumer app)

  • Few components for native Android

  • Few designs for Arabic

  • No governance guidelines or roadmap for adding new features/components

Adoption

  • There are still some legacy components in Figma and code (<12% adoption)

  • Devs are using a combination of Flutter and Native Android/iOS

  • Flutter is in a trial phase (when will we review?)

  • No dedicated engineers to work on Design System

goals + objectives

  • A single source of truth, accessible by all stakeholders for consumer app, rider app, vendor app, brand and marketing

  • Using up to date Figma features to optimise the build of components

  • Consistent, accessible, user-centric

  • Clear direction and plan of where we we are going and how we are getting there

  • Considering iOS, Android, Flutter and web (responsive)

  • Considering English and Arabic

  • Clear specs, documentation and usage guidelines for all components and variants for designers and developers

  • Clear governance process and guidelines

  • Consistent naming conventions

  • Increased collaboration across teams (Brand/Marketing/Product)

the process

audit + review

Considering we had an work in progress Figma library as the foundation of our Design System, the first thing I needed to establish was where we were currently.

Through speaking to existing designers and engineers, doing an audit of what existed, and using Sparkbox Design System Maturity Model, I was able to establish that we sat somewhere between stage 1: building version 1 and stage 2: growing and adoption. Meaning we were very much still in the early stages and with the brand about to undergo a facelift and a dedicated team now in place, this was the perfect time to embark on this journey.

process + prioritisation

the process

design principles

In the early stages, I facilitated a workshop to develop effective guiding principles for our team and design system. It included:

  • Reviewing principles from well established companies such as Airbnb, Adobe, Saleforce and more

  • Brainstorming ideas for what would make great design at out company using some of our company values as a guide

  • Grouping ideas into themes then writing statements considering the implications for our designs and our users

After the workshop I summarised the statements and themes to create our principles.

the process

governance + tracking

In order to future proof the Design System, it was important to come up with processes and guidelines, these included:

  • A process and document for requesting updates or new components [image below]

  • Trackers for testing and updating components, adoption of the design system

  • Weekly check-ins for prioritisation of requests, reviewing and alignment of Design System Libraries and reviewing Documentation

  • A bi-weekly sync with the wider Design Team to give updates and answer questions

  • Component testing

  • Requests

  • Adoption

milestones

Q4 - 2023 | App adoption

We ensured a 52% adoption across the app

We exceeded our initial end of year target of 50% set by mid-year

We doubled our adoption rate since Q2 (23%)

Q2 - 2024 | Design System

100% of components rebranded and rebuilt using current Figma features

61% of components tested and updated

5% of components documented

impact

Coming soon

learnings

Coming soon

Next

Redesigning HPay