I created a user experience design system because I wanted to gain a deeper understanding of guidelines in order to keep consistent brand identities. In the design system, I included colors, typography, button variations, iconography, search designs, and carousel designs.

UX Design System

Role

Designer

Duration

2 Weeks

Tools

Figma

What will the design system be used for? This system was created to be used for a prototype design of the workout app wireframes shown below. The design promotes activity, the coloring represents motivation, discipline, and power, and the font is versatile and fun.

Purpose

My inspiration stemmed from the Google Material Design system, Apple Human Interface Guidelines, and Adobe Spectrums guidelines. I focused on the Google Material Design system as a reference. By analyzing these design systems, I created my own version tailored to the app design wireframes.

Research

Process

The table of contents for this project was designed in Figma and provides links to each section of the design system. It discusses the purpose of the project and the prototype that will be designed by using this system.

The table of contents for this project was designed in Figma and provides links to each section of the design system. It discusses the purpose of the project and the prototype that will be designed by using this system.

These are the buttons of this design system. The buttons include primary, secondary, pressed, segmented, and smaller icon button designs. Each design can be used for a different purpose on the final prototype.

These are the buttons of this design system. The buttons include primary, secondary, pressed, segmented, and smaller icon button designs. Each design can be used for a different purpose on the final prototype.

Here are the carousel designs, showing what the beginning of a carousel would look like in the design and what would happen when the user scrolls.

Here are the carousel designs, showing what the beginning of a carousel would look like in the design and what would happen when the user scrolls.

The various colors of the prototype are shown here. The primary, secondary, and tertiary colors are vibrant and effective for a workout application.

The various colors of the prototype are shown here. The primary, secondary, and tertiary colors are vibrant and effective for a workout application.

There are various icons that will be used across the design, with different variations.

There are various icons that will be used across the design, with different variations.

The search bar is for users to quickly find information. There are different design variations, including a normal, activated, searching, and button design.

The search bar is for users to quickly find information. There are different design variations, including a normal, activated, searching, and button design.

The typography of the design displays the various types that could include. This encompasses display, headline, title, body, and can include more variations.

The typography of the design displays the various types that could include. This encompasses display, headline, title, body, and can include more variations.

Creating this project allowed me to gain knowledge about the UX Design industry, gave me a sense of direction, accelerated my design process when designing my future prototype, and allowed me to get insight into the format that developers and designers use for design systems.

Reflection

Previous

Game Design