UX/UI Design Intern at Logos News, 2020
Design System from Scratch and in Figma
CEO – Oliver d'Abo-Hurwitz
PM – Alan Deng
Designers – Eric Siegel, Wen Chen, and Chien
Front-end Dev Team
As a team of a young startup, our focus is to ship the product features as fast as we can. However, the design outcomes from different design interns are various and have their unique style, which results in lower productivity for the dev team when they have to take care of each design detail.
How might we assist the teams to grow while designing and shipping a product that is young and fast-growing?
Our team of 3 design interns built a design system in collaboration with the CEO and PM. I was responsible for and devoted myself to:
→ Evangelizing the design system with the leadership, design and dev team
→ Creating the components and constructing the guideline, all in Figma
The system is well-received, provides consistent but feasible design components to use, ensures the efficiency, and enhances the communication between designers and developers. 🎉
Our goal is to bring consistency and evoke coherence in the teams. After discussions with the leadership, I wanted to see the following results to make sure the project succeeds.
Either in our shipped product or ongoing designs, I noticed that we had several common components across the designs, but each had its rounded corner, font size, or interaction pattern, etc.
We conducted a mix of qualitative and quantitative research to best understand the problem space and identify opportOn the other hand, because building a design system is a fresh, new task for the team, I took the initiative to research how other design systems like Atlassian and VMWare structure and name their components. I quickly learned that we cannot simply copy their successful stories.unities where we could create an impact.
Updated on 11/4/20:
With the Variants feature in Figma, the naming structure below will be explicitly the components themselves, followed by their properties. Not to mention it will make the design system more intuitive.
After I learned how I could approach our design system, I started building it from common components across design interns. With an initial version of components, I published my designs and asked colleagues to use it and give me feedback. By doing so, I had a chance to learn from their real practices and fine-tuned the design in two directions:
After having some discussions with the CEO, I noticed that there is a need of aligning my proposed components and current designs, so our developers can put less effort on rebuilding things.
After several rounds of iteration, I started finalizing the components, including the color, font scale, states, etc. It ended up becoming the foundation of our design works. My outcome focuses on:
Also, to make the design system more digestible, I created the documentation and broke it down into 4 parts:
In any discussion, I sought to increase team member's awareness of the design system, including my components as well as the grid system and style guide from other folks. Thus, I would refer to the system while we discuss the design details, giving a link to specific components as well as presenting visual aids.
On the other hand, since Figma is a new tool for our team and the whole company, I focused on a lower learning curve. For example, I divided the documentation into distinct parts and provided tutorials. By doing so people can get the necessary information with a little software or design system knowledge.
I'm happy to see the design systems contribute to our workflow, designers applying the system in their design, and developers referring to the system for components' specs and use cases.
He [Chien] also made major contributions to our brand guide, specifically building out a comprehensive set of UI guidelines for our software developers to reference when doing front-end development. These UI guidelines have become a staple and our developers have had nothing but positive feedback. — Oliver d'Abo-Hurwitz, CEO at Logos News
Designing for growth is important for me. Since the current system focused on the foundation between design and development, we wanted to expand the design system in the following ways to enhance the collaboration between designers, developers, marketers, or leadership.
Check the documentation of design system if you missed.