Part of Delivery Hero, HungerStation is a leading food and grocery delivery app in the Kingdom of Saudi Arabia.
Leading the design for Fintech and Post-order, I have delivered:
wallet redesign
live order in-app and iOS widget
north start order tracking experience including rider tipping, rider rating and rider PIN
Previously working on Subscriptions and Loyalty, I delivered:
the launch of HRewards (loyalty)
gamification for Ramadan 2024
improving the experience of purchasing and managing subscriptions
educating users on HPlus (subscriptions)
applying vouchers and partnership offers to HPlus subscriptions
As a key contributor of the Design Ops team, my responsibilities include:
Building, testing and optimising libraries in Figma
Writing guidelines and documentation
Populating ZeroHeight
Design governance
Maintaining design quality and consistency
Fostering collaboration
Improving team culture through organising events and socials
Overview
When I joined HungerStation, I was asked to be part of the newly formed Design Ops team to deliver the Design System. The team started with Product Designers x2, a Visual Designer and a Motion Designer (Aug 23) and how now grown to Product Designers x4, a Visual Designer and a Motion Designer (Mar 24)
A foundation of a Design System existed and through speaking to the right people, 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.
Where we were
Design
Lack of guidelines and documentation (component usage, tone of voice, ux writing, terminology etc.) [P1]
Lack of accessibility consideration and guidelines [P2]
No design principles [P1]
Components not built using up to date Figma features [P3]
Inconsistent and fragmented experiences across brand and product [P2]
No release plan for what is currently existing [P1]
Not all components being used in designs have been built [P1]
Doesn’t cover all platforms and touch points (only consumer app)
Few components for native Android [P3]
Few designs for Arabic [P2]
No governance guidelines or roadmap for adding new features/components [P1]
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
Where we want to be
Design
A single file and 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 (how often do we audit DS?)
Consistent naming conventions
Collaboration between teams (Brand/Marketing)
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.
I then created a 3 phase comms plan on how we could educate the company on our new design principles:
Phase 1
On our ZeroHeight Design System
Presentation/workshop introducing principles
Phase 2
Design principles swag: Stickers and mugs with design principles printed to distribute to teams for a tangible memorable connection.
User personas: Create engaging user personas that embody the essence of each design principle. Use these personas in team discussions, presentations, or even as characters in internal communications.
Animated video: Short video animation explaining each principle, how we came up with it and why it’s important
Phase 3
Animated video: Video showcasing the evolution and impact of design principles on projects
Design team internal/external website
Design System Process
Phase 1
All styles finalised + existing iOS and Android components in one Figma file
Overview + resources + foundation added to ZeroHeight
Icons updated/rebranded in Figma
Phase 2
Rebuilding all components using up to date Figma features, adding missing components and applying new branding
Phase 3
Test and finalise all Figma components with extended design team
Write and add guidelines for foundations and components to ZeroHeight
