Summary

As a Product Design Intern at BigBasket, I had the chance to work on a range of exciting projects. My most meaningful and impactful project was the development of a Design System for the customer app from the ground-up. Within the organization, adoption of this system increased design and development collaboration and served as a strong foundation for building accessible and usable products.

Role

Product Design Intern

Contribution

Research, UI Auditing, Process Streamlining, Design Systems, Documentation, DesignOps

Team

3 Designer Interns (including me), 1 Design Mentor

Timeframe

Mar 2021 - Jun 2021

Problem Discovery

BigBasket has been a leading player in the rapidly growing startup industry, experiencing even faster growth during the past two years of the pandemic. However, as the company rapidly introduced new screens and features through numerous design iterations, it struggled to maintain consistency in the styles of elements. A lack of centralized implementation led to inconsistency in both the design files and the final product.

Design system was siloed in a designer-owned Figma file
Patterns and components weren't being reused on either the design or development side
No process to add or audit the design system existed
No unifying design philosophy or principles to guide the team.

No design system = disconnected user experience

Goal

It was evident that significant changes were needed to address the current challenges. The goal was to create a new design system that would streamline the UX process and improve efficiency, saving time and resources for the team.

Research

To better understand the different problems in our workflow, we spoke with front-end developers and designers to uncover their primary objectives and pain points. Through these conversations, we discovered that we need to:

Identify all the design inconsistencies in our app
Learn the common standard and principles of a successful design system

Visual Audit

We began by conducting an audit of our product across various platforms. We tracked all instances of specific tokens and components on different pages and flows, and established guidelines for design and implementation. This served as a reference for my work and helped me to fully understand the purpose, function, and role of each component within the app, including all relevant use cases. Through this process, I thoroughly examined the existing system and addressed the following key questions:

Component inventory - which components were being used in production, which were not?
Consistency of application - to what degree did components and styles in the product adhere to the system?
Gaps - what are the missing or incomplete components?

Comparative Analysis

I studied the organizational structure and documentation practices of well-established design systems of other companies. This research helped me to identify key concepts that we should incorporate in our system, design patterns, and organizational hierarchies that we could utilize to structure our work. I gained valuable insights and, inspired by Brad Frost, our team decided to adopt the atomic design approach to create our design system.

Definition

Naming the Design System

Just as in Brad Frost's atomic design, a watermelon can be broken down into smaller, distinct parts, such as its skin, flesh, and seeds, each serving a specific function and able to be used in different ways. Watermelon, being one of the highest selling items in BigBasket’s catalogue of SKU and also showing close resembles with its brand colours, inspired me to propose the name the design system as "Melon". I created a slide deck behind this philosophy which was well received by the entire design team before becoming official.

Building the Structure

My mentor had already created a spreadsheet for our team to use, on which we listed all the components used across our platforms in a table and organized them into an initial structure of foundations, components, and patterns. It was crucial to clearly define the distinctions between the different parts we would be designing and building in order to ensure the success of the system.

Foundations are the visual and structural elements of our design system. This includes guidance on colours, iconography, typography, and so on. They are used as blueprints that all components and patterns are created from.
Components are distinctive UI elements that are built to be used over and over throughout a product. They are most often actionable elements like buttons, input fields, or tool tips.
Patterns refer to recurring elements or practices throughout a product, such as empty states, bottom sheets, or widgets. They are versatile and often contain multiple components.

We started with atoms, the smallest units, that will be the foundation for our design system. I specifically focussed on typography, iconography, spacing.

Design

Creating Component Library

After establishising the visual language, creating new components suddenly became was simple because of the basic rules that we previously laid out. Every component that was added came with its own guidelines, specs and behavior based on any previous components it was made up from. Taking button as an example, we utilized our typography styles for the text, our color palette to determine the colors for every state, and spacing presets to ensure scalability to different sizes.

While most components were unified, we decided to keep the native properties to maintain the familiarity associated with each platform. An example of this is our custom top navigation that adheres to native guidelines for iOS and Android but utilizes Melon's typography and iconography.

Shared component library used for creating high fidelity designs

Writing Documentation

We recognized that effective documentation and governance of our design language would be crucial for the success and sustainability of the system. As a designer, this aspect of the process required a high degree of empathy. We created and regularly updated documentation resources within the Figma file, including design principles, quick start guides, and best practices for designing and testing components. The documentation for each component and pattern had slight variations, but overall it conveyed the information in a detailed yet succinct manner.

Template for documentation structure & guidelines

A clickable prototype of the documentation

Accomplishments

Within the organization, utilization of the system helped our design team save time and improve design-dev collaboration. It also served to improve efficiency in developing new tools, leading to a more cohesive, higher-quality user experience. Here are some major accomplishments:

Performed an audit of the components across the app to design and implement it in the library.
Designed and shipped the first version of the library of components and guidelines for the system.
The design system helped in improving the consistency and performance of the app.
Conducted education and testing sessions for the designers to use the design system.
Found my passion in storytelling, while crafting a presentation to discuss my journey at BigBasket and how it strengthened my values.

Takeaways

Creating and managing design system at scale - Learned about a creating a design system, its elements, creating customisable components, distributing the library, assist and train people in using the design system.
Document everything - It is so important to always leave information behind. While working on projects we would run into weird edge cases where we did not understand why it was built that way and no one on the team knew either. I learned that I had to leave detailed notes behind.
Getting buy-ins is tough - Learned the hard way how tough it can be to sell your ideas and defend them. Not only did this apply for interaction or design decisions, but also process decisions. Do we need to do research now? Can we make time for research or a brainstorming session? How can I convince my stakeholders that this would be a value add?

Mayank was a great addition to our design team at bb. His eagerness to learn and passion for visual design was evident in the quality of the work he produced. He built a design system with the help of team members by quickly adapting and understanding of our design standards and bringing fresh ideas to the table. I have no doubt that Mayank will continue to excel in his career and I highly recommend him for any design opportunities in the future.

Abhiteja Vulapu, Head of Design at BigBasket

Mayank is a very talented and dedicated designer who brings storytelling and visual communication to the fore. His ability to clearly articulate his thoughts and think rationally, made it a joy to work and have meaningful conversations with him. He is a quick learner and has an inquisitive mind that helped him learn and unlearn various concepts here at BigBasket - especially on the design system project. Wishing him the best!

Raghavan Vasudevan, Senior Product Designer at BigBasket

If you’re looking to work with me or want to grab some coffee, feel free to email me at kingermayank@gmail.com