My Role
Product Design Intern — Redesign, Information Architecture, Documentation, Guidelines, Prototyping, Interaction Design
Timeline
January 2022 - Present
Overview
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.
Brief.
#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.
Process.
#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.
Design.
#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
Accordion
Account Connection
Action List
Avatar
Badge
Badge Group
Banner
Button
Button Group
Button Row
Card
Card Header
Checkbox
Choice List
Collection List
Combobox
Data Table
Date and Time Input
Date Picker
Description List
Divider
Dropdown
Drop Zone
Empty State
Error List
Filters
Footer Actions
Footer Help
Form Group
Gallery
Header Actions
Index Table
Layout
Link
Link Group
Menu
Modals
Notifications
Page
Page Header
Pagination
Password Input
Popover
Progress Bar
Radio Button
Range Slider
Resource List
Rich Text
Save Bar
Scrollbar
Section
Select
Selection List
Sidebar
Slide Over
Slide Up
Spinner
Stats
Switch
Tab
Table
Tag
Tag Group
Text
Text Area
Text Input
Thumbnail
Toast
Tooltip
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]
Handoff.
#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]
Iteration.
#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]
Takeaway.
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.
Highlights
#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.
