Introduction
Tread Design System
This was a two-part class project that simulated an interaction between myself, a Visual Designer, and a client that requested a brand identity as well as a component library for an educational video platform. The client was an online and mobile-app based educational service with a focus on adventure and outdoors content. The deliverable for this project was a design style guide for the brand identity of the client, as well as a design system guide that included a component library.
Key Project Data
Role: UI/Visual Designer
Tools: Figma, Google Slides
Ideation
Discovery
The first step of my process in designing the brand identity for the client was to discover as much as I could about the client themself, the goals of their company, as well as their audience. I began by asking a series of questions about the company, their desired audience, and any existing brand elements.
Design Concepts + Presentation
Once I had a better idea about the company and its goals, I began crafting different potential brand concepts for the client. The first concept I created was based on tire treads, encouraging the audience to “tread” lightly and leave a positive mark on the world they interact with. The second concept was centered around photography and “capturing” the moment of adventure. I presented these two ideas to the client and allowed them to make a decision on which direction to go with. The client was particularly drawn to the first concept, so we moved forward with the idea of treads.
Design Process
Mockups
I now had a design concept to move forward with, but I was challenged with how to move forward designing a coherent set of rules for a future designer to follow to craft this brand identity. My next step in creating this brand identity was to create a series of mockups of various theoretical pages of the website and app to get a better sense of what the design concept would look like in action. I created a home page, a video player page, and an about us page. In creating these pages, a series of consistent rules started to formulate in my mind as to how I wanted the design concept to look in practice.
Rule Development
Now that I had a better idea of what I wanted my design concept to look like, I began crafting specific rules in a style guide for future designers to follow. I created rules about the color palette, typography, imagery, design tokens, icons, decoration, and writing tone of the brand. While designing this set of rules, I had to keep a few things in mind: ease of use for future designers and consistency in the visual design of the rules with the brand identity.
I ended up making my styleguide as an interactive prototype in Figma, so that it was easily accessible to future designers as well as easy to edit if any changes needed to be made.
Final Styleguide
Component Library
Components
Now that the design styleguide was created and the brand identity was established, the next step was to craft a specific design system with a library of components. I was tasked with designing components for three different sizes: desktop, tablet, and mobile with various interaction states. My approach to this task was through atomic design, starting with smaller components (like buttons) that would build off of each other to craft the larger components (such as cards).
I incorporated the design system into the original design styleguide Figma prototype, for ease of access and use.
Final Design System
Reflections + Takeaways
Challenges
It was very challenging to plan ahead for all the different use cases of the design. Another challenge was thinking up all of the different rules for how something should be used in the design. It felt like there were so many possibilities that it was a bit overwhelming. I could see a new designer taking my rules in many different directions, so I tried to be as specific as I could while still leaving some room for freedom because I wasn’t sure how every element should be used exactly. I wanted there to be room for interesting design, without leaving so much freedom that the design could go somewhere that I didn’t like.
Importance of Mockups
Creating mockups was a useful practice for creating a coherent look across the design system and helped in giving me specifics to work with, so if I ever have to design a system like this again I’ll definitely work with mockups. Without mockups, I would feel much more lost and unclear on what the design would actually look like in practice, plus I feel like it is a good element to have to present to the client to give them a better idea of what the design system will actually look like in practice.