Building Caliper

Building Caliper

Popup's Design System

Popup's Design System

My Role

Product Design Intern — Redesign, Information Architecture, Documentation, Guidelines, Prototyping, Interaction Design


January 2022 - Present


In 2022, I had the fantastic opportunity to be a Popup Product Designer. Building the design system was the project I worked on for the entirety of my term as a product design intern. The system defined clear guidelines on the design language to keep all the designs consistent among all the built products and will be made in the future.

This was an exciting project because no design system had previously been established in the company. I got to work closely with many stakeholders and under the guidance of the Lead Product Designer.

I was one of the two designers responsible for building, defining, documenting, and iterating on the design system.


#1 Challenges

As a designer, many problems existed before building a design system. The important ones were that scalability was complex since there was no centralized repository of reusable components, patterns, and guidelines. The product lacked visual and functional consistency across all platforms and channels. Lack of reusable components and guidelines led to significantly hampering the speed of development.

Since there was no standardized design system, collaboration among designers, developers, and other stakeholders became challenging. Without clear guidelines and standards, ensuring accessibility compliance became challenging.

#2 Goals

This project aimed to deliver a scalable, consistent design system that followed brand identity and accessibility guidelines. This design system should serve as a common design language inside the design team, among product and development teams.


#1 Design Housekeeping

Dependencies: Assess, map, and address all component dependencies by detaching or fixing problematic ones, and updating outdated dependencies to ensure system integrity and functionality.

Styles: Define and update styles for grids, effects, typography, and colors, ensuring consistency across the design system.

Structure: Identify, refactor, and complete missing elements within components by ensuring proper structure (incorporating .base component) and naming conventions for frames.

Documentation: Consolidate and standardize existing documentation while generating comprehensive documentation for each component. Compile specific use cases demonstrating the application of every component, complete with descriptions and links. Ensure standardization of component characteristics such as border radius, padding, stroke width, and placement. Identify naming inconsistencies, establish a new naming convention, and implement it uniformly across components.

#2 Keeping Components Updated

Components: Create process for requesting new components.

Version Control: Establish a central repository with a clear versioning scheme and structured branching strategy for managing changes, developments, and versions of the Design System.


#1 Typography

Descriptions of fonts, sizes, weights, line heights, and styles used for headings, body text, and other typographic elements. Additionally, it may cover guidelines for appropriate usage and combinations.

[Defined Text Styles]

#2 Colors

Detailed information about the color palette used in the system, including primary, secondary, accent colors, and their respective hex codes, and usage guidelines (e.g., background, translucent, gradient).

[Defined Color Styles]

#3 Surface

Description of styles for drop shadows, hover effects.

[Defined Shadows and Hover states]

#4 Spacing

Specifications for margins, padding, grid systems, and layout guidelines to maintain consistency and alignment across various elements and components.

[Defined Spacing Tokens]

#5 Icons

Mapped out all the icons currently being used across the platform and set up an icon request form if and when an icon that is not included is required. The icons are categorized based on the type of icon they are.

[Icons Sourced from FontAwesome]

#6 Components

  1. Accordion

  2. Account Connection

  3. Action List

  4. Avatar

  5. Badge

  6. Badge Group

  7. Banner

  8. Button

  9. Button Group

  10. Button Row

  11. Card

  12. Card Header

  13. Checkbox

  14. Choice List

  1. Collection List

  2. Combobox

  3. Data Table

  4. Date and Time Input

  5. Date Picker

  6. Description List

  7. Divider

  8. Dropdown

  9. Drop Zone

  10. Empty State

  11. Error List

  12. Filters

  13. Footer Actions

  14. Footer Help

  1. Form Group

  2. Gallery

  3. Header Actions

  4. Index Table

  5. Layout

  6. Link

  7. Link Group

  8. Menu

  9. Modals

  10. Notifications

  11. Page

  12. Page Header

  13. Pagination

  14. Password Input

  1. Popover

  2. Progress Bar

  3. Radio Button

  4. Range Slider

  5. Resource List

  6. Rich Text

  7. Save Bar

  8. Scrollbar

  9. Section

  10. Select

  11. Selection List

  12. Sidebar

  13. Slide Over

  14. Slide Up

  1. Spinner

  2. Stats

  3. Switch

  4. Tab

  5. Table

  6. Tag

  7. Tag Group

  8. Text

  9. Text Area

  10. Text Input

  11. Thumbnail

  12. Toast

  13. Tooltip

  14. Topbar

After completing the process of charting or delineating, we compiled a roster of 70 components. While I won't display the all the components due to its length, I'll highlight a noteworthy component.

Slot System: Each row in a section is swappable with every other component built. The majority of user interface elements within the platform are situated on cards. To ensure a structured approach in crafting Presets (Organisms) for various screens, a systematic method was adopted. This approach was implemented in components requiring repetitive constructions such as cards, modals, slideovers, popovers, lists, tables, and pages.

[Slot System in Sections]

[Cards built using sections that are using the slot system]

[Example Page Preset]

[Final Design Screens]


#1 Documentation

Kindly be aware that the documentation process commenced prior to the introduction of Figma's developer-friendly feature called "Dev Mode." Consequently, we had to document spacing within the component structure, outlining the properties of each component and also every possible variant of the component. This practice has now been replaced by the "Playground" feature. Here is an example of the documentation section included with every component.

[Documentation of the Button component]

[Documentation of the spacing in the component]

[Documentation of the properties of the component]

[Variant Grid of the component]

#2 Component Report

The design system was prepared for other designers to construct user flows and for engineers to proceed, but it was far from being finished. There were possibilities of errors, and as the project progressed, the team expanded. This situation highlighted areas where components could be enhanced and emphasized the need for improved documentation to assist both designers and engineers. So there were forms set up for them to request changes and documentation.

#3 Versioning System

A change log was maintained for the engineers to keep up with, after all the requested changes were made the change log is updated at the end of every sprint. This process later on became part of the documentation.

[Documentation of the Button component]


#1 Documenting in Notion

All the documentation tasks were shifted to Notion for handling, now overseen by Eduardo Roisman. This involved documenting guidelines, usage rules for each created component, and maintaining records of updates made to these components.

[Documentation in Notion]

#2 Memory Management

Following the publication of Caliper for designer use, we encountered memory issues in the userflow files. This made updating files difficult, as it either took a substantial amount of time or resulted in design distortions. The problem stemmed from unnecessary layers within components and their nesting structure. While some components were updated to address this issue, a comprehensive overhaul of Caliper was necessary to resolve the problem entirely.

[Documentation of the layer count in Notion]

#3 Tokenization

Following Figma's introduction of variables in early 2023, a significant update was planned for the entire design system to be tokenized. This was also organized in Notion, designed to allow contributions from anyone to this update.

[Documentation of future updates to Caliper]


This project marked my initial professional endeavor, presenting a valuable opportunity where I engaged in every facet of design, including defining styles, structuring components, and documentation.


#1 Collaboration

Working with Uendel was a fantastic experience for my first time collaborating, and I gained a wealth of knowledge from him. Our efficient teamwork enabled us to deliver the project on time.

#2 Systematic Approach

An organized and structured method to create and manage components, guidelines, and principles, ensuring consistency and efficiency.

Lessons Learned

#1 Evolving Design

A design system that keeps growing is like a flexible toolbox. It keeps changing and adjusting to fit new needs, just like adding new tools when building something. Even after the project is done, it keeps getting better and updated to stay useful.

#2 Ask More Questions

Being mindful of company resources was important to avoid overloading our deliveries. Communicating and understanding our product and engineering teams was really helpful.

What I could have done better

#1 Involving Engineers

Despite adhering to the process, I believed that involving engineers much earlier in the project, particularly during the phase of building components, would have been beneficial.

#2 Optimize Components

The memory loss problem posed a significant issue, and it was not initially apparent when the project commenced. We should have explored methods to optimize all the constructed components.

I'm looking forward to hearing from you.

Feel free to reach out if you want to collaborate with me, or simply have a chat.

Created by Uttkarsh © 2023-24

Bengaluru, India

I'm looking forward to hearing from you.

Feel free to reach out if you want to collaborate with me, or simply have a chat.

Created by Uttkarsh © 2023-24

Bengaluru, India