Deliveroo x Framer: One Month In

An honest look at how our design team is incorporating Framer into our workflow.

Jonny Burch

March 2, 2017

In the last four years, Deliveroo has grown from its first delivery to a food delivery service spanning 12 countries, 130+ cities with 20,000+ restaurants and 30,000+ riders delivering restaurant quality food to a lot of hungry people every week.

On the Deliveroo design team we’re constantly looking for ways to improve how we work. As the team and the surface area of our product has grown, our design team has had to grow too. We’re now nearly 20 people, including 5 user researchers. As we grow, we need to become more efficient and be able to deliver better experiences, not just more of them.

Our consumer apps

Tooling Up

We’ve always explored new tools early. From insight gathering with NomNom, to version control using first git and now Abstract, we’re constantly looking for ways to make ourselves better, smarter, more efficient, more data driven. So it was inevitable that we would look to Framer — which we believe to be the most powerful and versatile prototyping tool on the market — to describe and explore how our interactions and interfaces work.

Our team is made up of designers with mixed backgrounds. Some know Framer and have coding ability. Others are comfortable with Javascript, but have never used Framer before. A fair number have played with Framer before but never ‘in production’, while the rest are starting from scratch.

Our workshop with the Framer UX engineers.

Making Framer an intrinsic part of our workflow

We’re now into our first month with Framer Enterprise. We kicked off with a fantastic workshop with two of the Framer UX engineers, who flew over from Amsterdam to take us through some basic interactions as a team. Now we’re all working it out, line by line.

How is this translating into real product work? Honestly, slowly. People have their tools of choice already, so making a conscious decision to open Framer over something familiar is hard, especially when you’re under time pressure. But we’re seeing things happening already.

We’ve already used Framer prototypes for some simple projects, and our CTO recently asked for a Framer prototype to help understand one of our particularly tricky product problems. That’s buy-in!

Rebuilding a version of our restaurant list with live data entirely in Framer.

The Future

Soon we’ll get to the exciting stuff. Hooking up data so we can test prototypes based on where people actually live. Connecting a database so we can react to what people do and throw in curveballs and edge-cases. Re-using elements and curves and sharing code so projects get started more quickly. Version control and code review, so everyone learns at the same time.

That’s how you move fast when you’re 30, 60, 90 designers and researchers. As that’s looking a real possibility for us at some point, we need to lay the groundwork now. We believe Framer is a huge part of that.

To learn more about how Framer can improve your product team’s workflow, check out all the features included in our integrated design, prototyping and collaboration tool. Or talk to us to find out more about the additional features included in our Team plans.

Like this article? Spread the word.

Want more design articles?

Join our newsletter and get resources, curated content, and design inspiration delivered straight to your inbox.

5 Ways Facebook Scales Their Design System

Read more ›

Design Systems in Framer X

Read more ›

Creating Code Components

Read more ›

Try Framer X.

The world’s most advanced tool for interactive design has arrived. Get started with Framer X today.

Try it for free › Learn about teams ›

Start your free 14‑day trial.

Enter your email and we‘ll send you a download link for later.

We recently introduced Frames and Shapes, so some information in these videos may be outdated. To learn more visit our Help Center.