DESCRIPTION
I was solely responsible for creating and delivering the final design system.
TIMELINE
Feb 2020
TEAM
Solo Designer
Introduction
Across The Globe is a social media platform to connect with like-minded people. Through the platform, you can publish articles, host events, and search for internships or jobs. It's a one-stop for everything.
Problem
As the design team was increasing, it was becoming difficult to manage design for different platforms and visual inconsistencies and UI fragmentation became noticeable - both in live product and in design files as well. So building a design system was a more efficient way to design.
Our Goal
The goal for the design system was threefold:
- Establish a better design to dev handoff by creating a "source of truth" that was not the hi-fi wireframes.
- Establish a more efficient design process for the team, so everyone can do more and have consistency throughout the platform.
- Roll out the design system to the rest of the organization, as the center for visual language and digital experiences for the company's products.
Where to start?
My first order of business was to collect all assets that might make my job easier, specifically Figma files. Aside from a font file, there were none. Each and every design project started from scratch; new files, new artboards, new shapes, new symbols. My process involved taking a screenshot of the page I was working on and then designing on top of it. This was time-consuming, tedious, unscalable, and shameful. The team was following the same process.
Research & Explore
How does one go about creating a Design System for a complex and growing application? I didn’t know the answer so I started this project with some heavy research. I read medium articles, studied the guidelines laid out by Google, Uber, Apple, Airbnb, and Atlassian, and searched for other designers who faced a similar challenge.
I also familiarised myself with the work of Brad Frost - the pioneer of Atomic Design, so I could get a deeper, theoretical understanding of how to approach design systems, and what digital products are really made of.
The Approach
Step 1: Audit
With Atomic Design fresh in my mind, I spent 1-2 days auditing everything from what was live in the products and took screenshots of all the designs.
Once I felt I had captured every button, icon, and design pattern I grouped them into categories. Viewing them side-by-side revealed exactly why we needed a system. There were dozens of buttons styles, incorrectly applied font weights, and single-use icons everywhere.
Step 2: Build the system
I then got to work, building the design system from scratch. I began defining the smallest level of atoms such as font sizes, text styles, and colors, before combining them into molecules and components, such as buttons, input fields, cards, etc.
When building out new components & patterns there were several things that were considered for each new addition to the library:
- Accessibility
- Scalability & flexibility
- Functional
- High visual quality
- Mobile responsive (to both web & Android)
I then worked iteratively, expanding on the documentation to include more detail, like button states, mobile responsive guidelines, interaction patterns, etc. until I was happy with the level of information.
Step 3: Documentation
The final challenge was to decide how best to present the documentation in a way that made sense. This file would be accessed by junior designers, developers, and other members as well. Thus, I determined which elements to use wherein every element's use case.
Step 4: The Launch
The design system was launched in Mar 2020 and currently stands as a visual design system for now (no-code integration). The system has matured a lot since its conception and has evolved into a hub for QA to refer to for visual tests.
After setting up the master file and templates to work from, Team was able to reduce time and could swap the entire design of a component with one click.
It's Just the Beginning
Results
Inventorying the UI elements was the most tedious and time-consuming phase next to the editing cycle. Some of the things I struggled with were:
- Organization
- Naming conventions
- Capturing states
- Tracking my progress
- Adhering to Atomic Design Principles
- Staying focused/motivated
However, the benefits of creating a design system have produced some great results such as:
- Save a lot of time
- Ensuring UI consistency
- Reducing complexity and ambiguity.
- Creating a foundation for further improvement.
Learning
This project taught me several things. It gave me the opportunity to study some of the best design systems currently in use, hone my sketch skills, and collaborate and learn from my development team. In the beginning, there was resistance to creating a design system. As a designer, it began to pay off for me immediately by allowing me to create mockups in a fraction of the time.
Over time we began to refine the entire application and eliminate some inconsistencies in the UI. It also laid the groundwork for a redesign/refresh of the app.
What I did not anticipate was that it would become a crutch that negatively affected my process. Instead of studying the requirements and defining the underlying problems I was tasked with solving, I would eagerly turn to high-fidelity versions earlier in my workflow. Initially, this would save me time. But that time savings was negated by revisions and the need to reconsider the solution. In short, it became tempting for me to try and solve UX problems with UI.
Overall, I learned the value of a design system by needing one, not having one, and creating one. The work of our small design team was not over. We had only started a conversation. The next stages called for close collaboration with our developers to standardize and implement code snippets for existing elements and layout guidelines for the creation of new patterns. And more research. There’s always more research.
I'm Available For Hire
Feel free to reach out to me at my mailbox