Design System
Final study project for the Design System course completed in 2021
A design system is a comprehensive collection of design elements, principles, and guidelines that are utilized to create consistent and efficient user experiences across multiple digital products. This system can include design components such as typography, color palettes, icons, buttons, forms, and more, as well as guidelines for their use. The aim of a UX design system is to streamline the design and development process, enhance the overall user experience, and promote consistency and coherence throughout an organization's digital products.
The objective of the course was to provide hands-on experience in constructing a design system as a group, for a company of the group's choosing. This involved establishing the objectives, OKRs, defining the responsibilities of each member, conducting stakeholder analysis, creating a roadmap, establishing design principles, and building the design elements and components with corresponding tokens. The ultimate goal of the course was to deliver a fully functional design system as the final project outcome.
.png)
Discovery
During the discovery stage, we selected the company for which we would build the design system. After conducting a briefv research and evaluating their products, we decided to focus on the C6 Bank App, a prominent Brazilian digital bank whose primary offering is a mobile app. Although the bank had a recognizable visual identity, there were some inconsistencies present, which presented us with a challenge to sharpen our skills in creating consistency. The subsequent step was to set clear objectives, which we accomplished by constructing an OKR (Objectives and Key Results) canvas that clearly defined the primary objectives and their associated key results.
After defining the objectives, a series of necessary canvases were created for a better understanding of the participants, responsibilities, stakeholders, and design principles. Below is the demonstration of the table of responsibilities for each team member and the design principle pyramid:
The table displays the responsibilities of each member of the Design Ops team in achieving the defined objectives, according to the categories: Responsible, Authority, Support, Consulted, and Informed
A design principles pyramid is a tool used to organize design principles into a hierarchical structure, with the most important principles at the top and the least important at the bottom.
Design
After the discovery phase, and understanding the objectives, responsibilities and stakeholders, it's time to access Figma and design the elements, create the components, and organize the files.
The Figma tabs were divided into the following categories:
-
Foundation: Logo, Grid, Color, Typography, Iconography, Spacings, Borders, and Elevations
-
Components: Buttons, Form fields, Accordion, Tables, Tabs, Tags, Ratings, and complex components such as Header, Categories, Cards, and Menus.
Feel free to check the complete project on Figma below. How we organized the elements, components and tokens.
