When we talk about the impact design brings, it's often measured in terms of business metrics like sales, impressions, etc. But any design project can bring impact like improvements in the design process, efficiency in workflow, and so on. I wanted to write about this design impact which one of my projects - Error Handling in Swiggy's Checkout - brought in.
It laid the foundation for setting up a file organisation system at Swiggy. During covid, a lot of things also changed about how we worked, collaborated remotely, and organized our files. The team grew more than twice and there were new business verticals like groceries, pickup-drop, etc.
Let's talk about that for a bit.
How it started
Sketch → Figma
Design projects usually involve a lot of iterations and multiple people working on it. Since Sketch didn’t have a collaborative workflow at that time, we used make copies of the original file to fiddle around. It was a nightmare how the files use to pan out 😞
Around March 2020, when the pandemic started and “work from home” was becoming the talk of the town, we made a company wide decision to switch to Figma. And we never looked back again.
We imported all our files from Sketch to Figma and neatly stacked up workspaces across each domain in the Swiggy ecosystem — consumer design, delivery design, supply (restaurant), merch design, etc.
Still a long way to go…
Our key role as designers is to understand problems and imagine solutions for those problems. Design tools are just a means to communicate those solutions to others stakeholders in the team.
Of course we had clearly defined our workspace and put up pretty thumbnails for each project. But that wasn’t enough!
It was our job to make it super easy for anyone who jumped into a file and understand what’s going on. Some problems we wanted to solve:
We didn’t want developers pinging all the time to know how a particular edge case will look like, or when to show that micro-interaction.
For new designers coming into the team or taking up the baton on a project, there was no way to pass the previous knowledge or context.
A better way for designers trying to understand how things work in other teams. For example, the cart page that started with food orders is carried onto other verticals like grocery, pick-up-drop, etc.
Inside a file
For solving some of these problems we needed to do something on the root level. Perhaps changing the way how the canvas looks. So, we divided the project files in Figma into separate pages — each serving a particular purpose.
📝 Project Overview
For anyone jumping into the file, the first page gives a basic summary and builds the context of the project.
We mention people involved from design and product teams, link relevant documents like PRDs or user data, write about business goals and user outcomes that we want to achieve by doing this project, etc.
🚀 Ready For handoff
This page contains the all final user journeys as high fidelity mockups. Instead of the entire file, I usually just share this page’s link to the developers. So that there’s no confusion on the final design and other explorations.
We try to include a couple more things that make things smoother:
Annotations help explain multiple use cases, interactions, error scenarios, and even design rationale. These are like small post it notes that define & describe the design in a given context.
Components and an atomic structure makes it easier for the developers to understand the hierarchy of UI elements.
✍️ Mind Maps / User Stories
This is an optional page where we show mind-maps, block-flow diagrams made during white-boarding, or research insights including quotes from real users. Anything relevant from the discovery and research phase of the project.
🔍 Playground
You must be wondering how can someone design so neatly right from the beginning. Organizing files for others is great, but we as designers need that messiness to get our creative juices flowing.
For that we keep a playground page to explore solutions, scribble, collect inspiration, do anything and everything.
📡 Prototypes
This page contains all the prototypes that we make in Figma. It’s handy to keep it at one place while presenting our design or getting feedback.
🗑️ Archive
Design is a continuous, iterative process which involves a lot of experiments and scraping our old work. This page contains all the previous iterations of the project for us to reference and reflect back on.
That’s all!
Implementing some of these practices has personally helped me save a lot of time in managing my work, collaborating smoothly with developers, product managers, other designers, etc.
