Shark Clean Design System
: building a design system from scratch and rearrange the structure to connect global teams on a basis of a shared design language.
Role
UX/UI designer and project owner, partnered with 2 other UX/UI designers
Scope
1 month, May 2022 - Jun 2022
Process
UX/UI design, Design System Management, Accessibility Design
Tools
Figma, Figjam
Deriving Design System from Design Requirements
Shark didn't have a structured design system up until 2022. Their app and web platforms have always been managing by individual teams, and each developed their own source of standards for UI elements as distinct identities in both internal and external agencies. While each platform keeps evolving, the division starts to go further separate ways.
As an external agency, our team was contracted to execute two main tasks — improve app functions and organize the inherited mess during the transition from Sketch to Figma. However, a third need appeared during the process of performing those two tasks. To effectively sort out old/current screens with future implementations, we require a shared guideline to ensure consistency across all design elements.
Several challenges were presented during the process:
Inconsistent context across various agency transitions
Shark have been through a stage when they changed three external agencies throughout the year of 2021 to take care of their design property. One of the biggest changes was from their previous agency, who was responsible for the migration from Sketch to Figma. There was no design system built, and the general compatibility issue was found in design files.
Disruptions of design libraries
Each design file has their own local components without connecting to each other on Figma. In order to make the design system make sense for the platform, we tried to retrieve all the app flows to understand how elements and components can be reused.
Evolvement of products not being able to catch up
While working on the design system, the task of improving app functions is happening in parallel, which means the app evolves without having a steady foundation. This can undermine the overall cohesiveness.
Define Step-by-Step Approach
Prior to working on the design system directly, I studied about existing Design Systems, and I planned out four main steps we had to follow to achieve this goal. Of course, building a design system is never a linear working flow, there will be more refining process after having the base.
1. Design Audit
For the new flows, there was an existing repository that contained all the components, but those components were directly created from the new screens out of urgency. As mentioned earlier, one of our tasks was to go through all the old flows that have been evolving since agencies-ago. Once we had the old flows cleared out, we could then move forward to crossed-check and list the patterns between the old and new flows.
On the left we listed all the components we could find in the old screen flows, then on the right we grouped them together with the “new” components to clarify their belonging categories. Taken the methodology of Atomic Design for reference, the grouping process was handled from atoms (and some molecules) to organisms, from bottom to top. This helped us reached to the final three blocks of sections and consider the scalability of the use.
2. Define Taxonomy
We went through some design systems for reference to pick out the taxonomy that suits our components. We also broke down all the components we could find in the previous exercise into smaller, reusable components to better identify redundant and missing elements.
We gave definitions to each big categories (Core, Elements, Components and Templates) to help ourselves organise clearer and faster. The Atomic Design works best in this sense because we have many components that are often used as a whole when designing but actually contain tiny elements.
3. Build the Structure
After figuring out all the categories, we started to create files and pages according to the planning.
Files:
Core for tokens-oriented atoms
Components for Molecules and Organisms
Pages inside Files:
Each atom, molecules, or organism has one page.
Frames inside Pages:
Keep relevant elements in different frames if necessary.
The images below shows a small part of the result we explored and worked on for the design system, which helped the team speed up the efficiency and increase productivity.
4. Fine-tuning and Next Steps
This was the fruit of one-month work, but there are still some things that we have to refine other than relocating all the elements. One of the biggest concept we tried to educate the team was the tokens. We’d like to build an ecosystem that can be not only benefit the design team, but the development and product team as well.
We were also planning to improve the nomenclature, apply auto-layout and slots, as much as other details to build a more accessible design system with complete documentation along with the collaboration of other teams.
Eventually, the evolution of a design system doesn’t only fall on the shoulders of the design team, as the result doesn’t only benefit their direct users. A systematic approach like design system can improve communication and reduce errors and inconsistencies in creating the whole product.
What I’ve Learned
Always opt for plug-ins
One of the biggest learnings I receive was to search for solutions through plug-ins. They could come as the most handy tools depending on your needs, and once learned, they could benefit you ever since.
Design systems are evergreen
A common design language should be recognizable and consistent for everyone interacting with it. Therefore, its growth and maintenance is a responsibility to all the active users, either direct or indirect. Communicating on the planning, mistakes, takeaways and learnings are what we can contribute as a role inside the whole team.
Where to Improve
Swapping libraries isn’t as easy as I expected
There was one mistake I took was to duplicate and remove the old library without thoroughly examining the next steps. It cost us time to go into every single design file to check on the linked components and manually swap libraries for them. Next time I’d know how to prioritise tasks before making any move.
Don’t be afraid to start from zero
During the process, we found some components belonged to missing libraries from the previous agencies that we had no access to. We eventually realised it took less time to review these old components and re-create them on our own if necessary than waiting for other people’s response.