view project
COMING SOON
Series A
Raised $25M
UNICORN
Valued at $250B
Acquired
By Meituan at $2.7B
view project
COMING SOON
→ Building foundation

Designing a framework to facilitate a shared, evolving vocabulary

✦ A 5-step framework to standardize future design execution

From our existing component library, we learnt that without guidelines, it would become very difficult to ensure consistency when introducing new components. To standardize our design execution and ensure adherence to certain constraints and rules, we developed a 5-step framework. This framework enables us to effectively evolve our design system and transform design atoms into customer-facing views.

Step ❶ Design Atoms: Building blocks that makes everything possible

To align with the new brand identity, we revamped our color palette by incorporating the new brand colors. The shades of the primary brand blue are applied to fundamental elements like text, backgrounds, strokes, and cards. Meanwhile, the shades of the vibrant blue are reserved for actionable and decorative elements like buttons, icons, and illustrations.

Given that our platform is information-heavy, legibility is crucial. Hence, we revisited our font choices, optimizing their size, leading, and tracking for improved legibility. Additionally, we introduced a shadow and spacing system to reinforce the information hierarchy and ensure a clear and organized display of information.

Step ❷ Base Components: The cornerstone of usability

The base components are the backbone of user interaction and are essential for a seamless user experience. We dedicated significant effort to their design and ensured that each component covers all possible scenarios. The components were all made into interactive components in Figma and served as a solid foundation of our Hi-fi prototypes.

Step ❸ Composite Components: Components designed for the business needs

We have developed composite components that are tailored to our business needs and requirements. These components are composed with our base components and thus have a consistent look and feel, as well as a clear information hierarchy.

Step ❹ Layouts: An articulated guideline to compose components into views

One of the challenges we encountered was the inconsistent placement of banners and use of grid across views and breakpoints. We recognized that to build a real cross-platform product, it was necessary for us to articulate the layout grid we use. Therefore, we made the decision to refine and standardize our layout grid to ensure that it was implemented consistently throughout views and breakpoints.

→ Documentation

Boost efficiency by establishing best practices into React components

Traditionally, design system documentation consists of written documents combined with images of the components. However, at our company, we believe that true understanding and effective utilization of the components can only be achieved by interacting with them and examining their code. Therefore, we worked closely with our development team and implemented a workflow around ↳Storybook . In Storybook, all our components were translated from interactive components in Figma to production-ready, React components in Storybook. By making Storybook the centerpiece of our component development process, we ensure that the documentation always reflects the up-to-date state of the design system. This approach helps us maintain consistency and efficiency throughout our design and development workflow.

→ Outcome

Boost in efficiency and morale

Highlights of the outcome

✦ Created 30+ components as interactive components in Figma and developed them as React components in Storybook.

✦ With only 1 product designer and 2 software engineers at the time, our product team was able to launch new product features monthly.

✦ Positive feedback from the engineer team

Potential further improvements

✦ More intuitive naming conventions on design atoms

We initially used a numeric naming convention for our color palette. As our team grew, we realized that it could be confusing for some members to remember the specific use case of each color. To address this, we planned to switch to a naming convention based on the use cases of each color. Unfortunately, this change was not implemented before LEX ceased operations.

However, I was able to implement this use-case-based naming convention in a different design system that I worked on later. You can read more about it here:  ↳OpenAsk 

More about LEX Markets Case Studies

Read more LEX case studies:

 ↳ LEX Product 1/3 - Waitlist 

 ↳ LEX Product 2/3 - Core Product 

 ↳ LEX Product 3/3 - Growth Product (coming soon)

 ↳ LEX Website 

discover more
projects

client
year
type
service

Lark Suite

2019

Indie

Product

Lark Suite

2019

Indie

Product

LEX Brand Identity

2021

Full-time

Brand Identity

LEX Brand Identity

2021

Full-time

Brand Identity

88 Shanghai

2018

Collab

Brand Identity

88 Shanghai

2018

Collab

Brand Identity

Personal Website 2021

2021

Indie

Responsive Website

Personal Website 2021

2021

Indie

Responsive Website

OpenAsk - A Web3 Q&A Community

2023

Client

Product

OpenAsk - A Web3 Q&A Community

2023

Client

Product

This is Still Me

2018

Indie

Creative Design

This is Still Me

2018

Indie

Creative Design

Want to see all projects?
Check the  ↳project index .