Company
SOCA
Role
Product Designer
Timeline
Summer - Winter 2022
Contribution
Design System
(Establish / Maintain)
Soca is a social media platform for career-related topics like job referrals, interview questions, salary comparisons, etc. The design had been passed through multiple hands for the past year without clear design guidelines and holistic management. The UI inconsistency started to build up.
To slow down the “entropy increase” of the design and to nurture best practices for future phases, Soca planned to re-establish the work process with the development of a design system, roll it out onto the mobile web first, and eventually cover the rest interface.
The SOCA app interfaces before design system implementation
I treat the design system as an internal product that eventually serves the best experience for the external product and the design process. Identical to any product design project, It’s essential to set the right goals upfront:
Internally
Faster production / Better work efficiency
More fluid communication and collaboration
Externally
A more consistent and cohesive experience
More guided decision-making leveraging best practices
Even though not formally documented, there is a particular brand identity that Soca has already established and passed to users through its logo, color, fonts, and style. These are essential inputs for the foundation of the design system, as it aims to inherit the visual tone to ensure emotional bonding with old users.
SOCA Brand Identity
Since many decisions the design system makes will be systematically reused, they should represent best practices. As the designer, I have to delve into some domains and refer to other mature design systems, to summarize the guidelines and sort out learnings to eventually form the best practices proposition for SOCA.
There are considerable existing online resources for the design system I have referenced:
Material UI
Material UI offers a comprehensive suite of UI tools that comply with the industrial standard and have ready-to-use codes.
UI Kits
Untitled UI / UI Prep / …
There are numerous good-quality UI kits on the market, each providing distinctive thinking in structuring and organizing the design system.
Open-sourced Design system
Spotify Backstage/ Ant Design / …
It’s interesting to see how those design systems were tweaked differently to cater to specific design scenarios and successfully support business product
I refer to and tweak on top of the Atomic Design by Brad Frost when building a hierarchical structure for the SOCA Design system.
It’s always important to allow exploration flexibility, but at the same time keep easy systematic adjustments available at different levels. This general principle dictates detailed decisions like what should be global vs. local, what properties/variants should be assigned to each component, how should the design system expand to cover other products in future phases, etc.
As an example, through rounds of visual testing, the padding of the icon side of the button is set to 4px smaller than the text side, to accommodate for the white spaces around the icon.
All spacing for components and typography is done in increments of 4 pixels.
Components are sized carefully to match each other and the line height of body text. This makes it easy to create harmonious arrangements within the UI.
As an example, these 3 modals are instances of the same basic component. By nesting other components as "atoms"(in this case, input / dropdown), one component could be manipulated to fit into different use cases. This has tremendously improved the flexibility of design system while keeping its simplicity.
Figma
A design system is used to support the collaboration of the whole design team. Every little change might trigger unexpected issues in other designers’ works and cause confusion. Therefore, be cautious to directly iterate on the design system, even though it might be the most efficient way to adjust the design in many cases.
That said, following a strict procedure when publishing and maintaining the design system is essential. Here is a checklist that I pay attention to:
Follow the naming convention of material UI for all the UI components to minimize communication efforts between designers and facilitate future implementation processes.
Provide clear documentation of each component and showcase identical use cases, and encourage the design team to record every moment they need to detach a component.
Collect new needs or errors from the design team and do regular updates, or merge different branch files. Since updating the system might overwrite existing designs, it should be reviewed by all contributors before the publish.
Produce a change log for every publication to maintain high accessibility of work history.
Chromatic
The design system does not only serve designers. It could also be developed into an in-house library which will help boost the efficiency of development and the level of control in the long run.
Here are some best practices to consider when collaborating with engineers:
Provide explicit versioning control for design system files handed over to engineers for development.
Branch the design system file after delivery and merge the file with an edit log before the next delivery.
Utilize deployment platforms like Chromatic to keep track of changes and ensure development quality.
