Where’s that file? How we use Figma covers to communicate efficiently across teams at Deliveroo
Product teams: if you’ve ever asked: does anyone know where I can find X?, did X feature ship?, is X live in X market?, or something similar, then we’ve got a system for you…
The Deliveroo Experience team is made up of product designers, content designers, localisation specialists, design system engineers and design managers. The ~50 of us work on different teams across our 3-sided marketplace, which means that at any given time, there are likely more than 50 files being actively worked on across 25 different Figma teams.
With so many people working on various projects at once, it can be hard to keep track of what’s live in our products, what’s being experimented on and what’s still in discovery. Our team has always struggled with this. In fact, our Figma files used to be “absolutely all over the place. Context left the building when people did — and it was basically impossible to work out what any of us were actually iterating on top of” at any given time (Rob Hunt).
Towards the end of 2020, Rob spent a lot of time cleaning up the Delivery team files and creating a cover system for documenting work that aimed to make it easy for anyone to find what they’re looking for.
However, what worked for a small team like Delivery (~3–4 Experience team members), didn’t quite fit for larger teams like Consumer, where “projects can span anything from a few hours to a few quarters” (Grant McAllister). This made it difficult to get teams outside of Delivery to fully convert to our new system.
Since then, the team has grown and ways of working have shifted. Over the last couple of months, we’ve continued to iterate on our system, updating our Figma covers to try to strike more of a balance between the needs of our different teams while keeping with our original goal that anyone across the business should be able to drop into Figma and find what they are looking for with little effort.
After getting lots of great feedback from the team, we landed on our new-and-improved 9-cover filing system:
1. 🤔 Working
We use working file covers for any single project that one or more Experience team members are working on right now.
Guidelines:
- Every working file has an owner, as indicated by the Memoji(s) on the cover. Beyond that, there are no requirements for how its contents (or pages or artboards) should be organized.
- Working files are temporary, and should only stick around for as long as the project is in progress. After that, we suggest that the owner(s) divide their contents up between the other file types outlined below.
- Use plain-English sentence case for all Figma file names (e.g. Checkout -payment methods).
2. 🚧 Building / Experiment
These file covers are meant to convey the next phase of a project (after the “working” phase) moving from active design work to engineering work.
Guidelines:
- To avoid breaking links to design work that engineers rely on, simply change the original cover image when a project reaches this phase, rather than start a new file for designs being built or tested.
- When work reaches this phase, pages should be tidied up, with the most relevant designs for building at the top.
- Keep the same Figma file name from the “working file” phase, but add a 🚧 before and (building) OR (experiment) after:
3. ✅ Live
These files aim to match, as closely as possible, what’s actually live to our users for a distinct area of our product. We share the responsibility of keeping these files as complete, current and tidy as we reasonably can. When properly maintained, they save our team lots of time trying to figure out which features launched in which market(s). They’re also invaluable for our partner disciplines and for the wider business.
Guidelines:
- Within the file, use plain-English sentence case for each page name to explain the feature or journey it’s showing as succinctly as possible, (e.g. Acceptance screen). Feel free to add an emoji before the name to help visually differentiate pages in the list.
- Use Auto Layout, keep components up-to-date, and make things work in prototype mode where possible inside the file.
- Use plain-English sentence case, and name the file based on the app/website/product area that it belongs to, but with ✅ before and (live) after.
4. 🔮 Ideas
We use ideas files to store previous explorations or future visions if we think the work is realistically going to be helpful to our team again in the future. We have one of these files for each distinct area of our product.
Guidelines:
- Ideas files should be curated to be useful. The golden rule here is to avoid making these a dumping ground or archive for every single pixel we’ve ever created. (For people who like to keep things that may not be essential for the rest of our team — e.g. old design explorations for future use in personal case studies — we recommend moving those things to the Figma drafts folder.)
- Within the file, use plain-English sentence case for each page name (e.g. Scan receipt QR code to collect order)
- Use the same naming convention as above, but with 🔮 before and (ideas) after.
5. 🌍 Localised content
These files contain localised copies of designs for different markets, and are used and maintained exclusively by our Localisation team.
Note that these designs are simply snapshots in time, and are therefore not actively kept up-to-date.
Guidelines:
- Use the same naming convention as Working and Ideas, but with 🌍 before and (localisation) after.
6. 🗄 Archive
These files contain work that is no longer being explored or actively worked on, but provides historical context.
Guidelines:
- These files should not be used as dumping grounds for every single screen and pixel created during design exploration or iteration.
- Use this cover to document experiments that were rolled back due to poor conversion or provide other helpful learnings that may be useful to other team members in the future.
- Use plain-English sentence case for file names.
7. ✏️ Documentation
These files contain anything other than working designs, live flows or ideas where the owner used Figma to visually represent:
- Product roadmaps
- Product canvasses
- Insights, etc.
Guidelines:
- Once again, this file should not be used as a dumping ground for product chatter, but for documentation that is actively maintained.
- Use plain-English sentence case for file names.
8. General resources
These files contain anything that relates to a particular organization (e.g. Consumer), but not to any distinct part of its product (e.g. the checkout), but is useful to the team on an ongoing basis.
Given these files are largely unique, we leave it to the creator to design their own thumbnail artwork for each General resource file.
Things that may live in a General resource file:
- App Store or Play Store images
- Competitor screenshots
- Posters/badges/etc. designed for a product team
Guidelines:
- Design a unique cover that communicates what’s in the file.
- Again, use plain-English sentence case for file names.
9. 💭 Workshop
These files contain anything to do with workshops or sprints in FigJam (or otherwise).
Guidelines:
- Make sure to update the date on the cover.
- Use plain-English sentence case for file names.
Tip: To add a cover to your FigJam file, put your desired cover template into a frame, copy and paste it into your FigJam, then right-click to set it as the thumbnail:
So far, we’ve been fairly successful in getting the team to adopt the new covers! 😃
Key takeaways: In order for file covers to help people work efficiently across teams, they should:
- “Point people in the direction of whoever owns/is working on those designs.” (Tanya Hirst)
- Tell people what is NOT live in any of our products. This way, no one is confused by designs they stumble upon.
- Tell people what IS live in any of our products.
- Provide historical context where necessary.
If you’re thinking about implementing something similar where you work, remember that with any system, the simpler the rules are, the more likely people will be to follow them.
If you’re interested in learning more about the awesome work we do on the Deliveroo Experience team, feel free to reach out and/or check out 5 essential Figma plugins that power product design at Deliveroo.
