Deliveroo is a food delivery company with 4 product areas: Consumers, Riders, Restaurants, and Operations.
As the first Principal Designer, I was responsible for increasing the output speed and quality of the product design team (20+ designers) and prepare for growth.
During my tenure (2017 â 2019), I streamlined Deliveroo's products under 2 design systems, built UI kits for designers, built component libraries for engineers with Matt Vagni, re-integrated Branding in the product design process, and promoted a culture of craft, accountability and collaboration.
Challenges
Product Growth
In 2017, Deliveroo aimed to add product surfaces to counter competitors' offerings as quickly as possible. To name a few: subscriptions, promotions, restaurant pick-up, variable delivery fees, new search and filtering, in-house restaurant brands, rider earnings, rider onboarding, and more!
Improving Efficiency
Deliveroo was transitioning from labor-intensive operations to automated processes. This increased demand for internal tooling and architectural planning.
Breaking Down Design Silos
Each product organization had evolved independently and distanced themselves from Brand & Marketing. Product designers (20+ strong at the time) couldn't switch teams easily and wasted time re-inventing the wheel. The product quality gap between Deliveroo and its competitors was widening.
Building the Foundation
The first step was to conduct an inventory of all surfaces and to interview every designer and content strategist on the team. It was determined that:
-
Fundamentals (color, type, icons) had to be re-evaluated from the ground up, based on the latest branding updates
-
All external facing, touch-first products (Consumer, Rider, Restaurant) will follow the same conventions
-
All Tools (internal and external) will follow the same conventions
Color, Type & Illustrations
A close collaboration with Branding Design, the goal here was to ensure continuity from marketing campaigns to the product UI.
Typography, color palettes, illustration styles and icons were scrapped and re-designed with usability and product utility in mind. Requests for new content (illustrations, icons) were formalized so the team would never be blocked by missing assets.
Products
The Consumer, Rider, and Restaurant apps all shared interaction models and platforms (iOS/Android/Mobile web). In the new system, they all sat under the same umbrella, sharing design fundamentals and UI patterns.
đ Check out the Source Figma file
Mobile First
The majority of the user base and the the growth was on mobile, so we focused on that first. Desktop was to follow mobile components, with exceptions where mobile patterns broke (type size, forms, and modals).
Keeping Components to a Minimum
Platform specific (e.g. iOS, Android) patterns were avoided as much as possible. Adding or modifying components had to be strongly argued for to justify the effort.
Rows are a good example of why platform-specific components should be avoided. Things can get out of hand if each platform requires its own version.
Built-in Documentation
Users don't read. Neither do designers or engineers.
Fancy documentation websites require a lot of effort, are always out of date and are seldom consulted. We opted for in-context guidelines and examples in the UI kit itself.
Rows may seem innocuous, but they are the hardest component to design and document properly.
Quality of life details make a difference in aggregate. Here, image placeholders facilitate resizing to standard ratios.
Tools
Internal tools didn't have the luxury of generous UI engineer allocation and thorough maintenance. The Tools design system was built for resilience and modularity.
đ Check out the Source Figma File
Desktop & Functionality First
The assumption was that the heavy lifting in tools would be done on primarily desktop. In hindsight, this was a mistake. Read-only tools like dashboards would actually be consulted on mobile more than desktop, and ignoring responsiveness from day one was costly.
The trusty table, the foundation of the system
Card-based Layout
Building internal tools involved adding and removing functionality quickly. Using cards made it easier to do so without worrying about breaking layouts.
Designing with flexible cards and good placeholders can accelerate the process quite a bit
Strict Templates and Naming
With potentially hundreds of tools used by thousands of employees, design stability and wayfinding was imposed from the beginning:
-
The navigation was flexible, but mandatory for all tools (including settings and log-in)
-
Tools had to be named by what they do (e.g. Delivery Tracker), not given arbitrary code names or inside jokes (e.g. Overlord), and referenced in a directory for employees to find quickly.
The mandatory navigation and responsive behavior for all internal tools
(Almost) Instant Tool Creation
We made it effortless to create new tools with navigation, identity and responsive layout built-in, ready to deploy. Reducing the friction of good practices goes a long way.
Impact
Quick & Nimble Design Process
It took over 18 months to roll out design systems, standardize processes and incentivize higher UI quality output. Shared methodology, tooling and patterns made it easier to transfer skills between teams. On quarterly surveys, designers reported spending less time spent with UI minutiae, and engineers saw fewer variations in the specs they were handed.
Quality and Consistency Across Products and Platforms
From TV and Outdoor ad campaigns to the product, all touch points felt like they belonged to the same family of products. Because Deliveroo operates a commodified service (food delivery), effort was made to incorporate personality back in the UI through strong brand colors and type, purpose-made illustrations and animations, and product photography.
The consumer app was gradually overhauled to adopt the unified patterns and branding
The Rider app required some adjustments from the design system to accommodate high-visibility requirements
Using standard components, re-designing the restaurant tablet took weeks to complete instead of months
Tools that Scale
25+ internal tools were designed and built using the component library: dashboards, content management systems, maps, admin panels, management interfaces for Restaurants, customer support systems, etc.
<aside> âšď¸ I can't share actual screenshots of Deliveroo internal tools. These are representative templates.
Design Systems as a Service
Building designs systems is about fundamentally about people and change management. Putting processes in place to incentivize adoption and feedback loops was the biggest challenge for the team.
Demonstrating Value to Designers
My team's aim was to relieve product designers from core UI tasks so they could focus on product design. Framing the team as a service to designers, not a design police, was crucial to overcome the initial resistance.
Picking up tedious tasks first (building and maintaining UI kits, icon design, transitioning from Sketch to Figma) proved instantly valuable and built trust. Same-day turnaround on requests for documentation, component updates and feedback, for instance, eased designers into relinquishing control.
Adding Friction & Accountability
Accruing political capital allowed us to make sweeping changes to the design process and performance expectations. Once a baseline for design standards was established:
-
The team attended all product design crits to provide guidance and gather feedback
-
Product quality criteria were explicit, product reviews were conducted regularly
-
Proposals were required to add or change UI patterns
-
Compliance and participation to design standards was added to designers' performance reviews
In return, we were accountable for the design team's output and satisfaction. Quarterly surveys were sent out to designers, engineers and PMs evaluating design systems on satisfaction, speed of execution, and perceived product quality. This was tied to our performance rating.
Appendix
Here's a talk I gave with Matt Vagni about our process, for those interested.
<https://www.youtube.com/watch?v=6C0yvuWJc84&t=4s>