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

Designing a framework that effectively facilitates design execution

✦ A component library that was no longer effective

As we began incorporating new features and flows into our core product, we encountered several issues in our workflows:

Frequently, I found myself answering repetitive questions regarding component behaviors, spacing, and colors. Additionally, I spent a lot of time conducting design QA sessions. These redundant tasks diverted attention from higher-priority matters.

The absence of clear guidelines for each component and its variants led to inaccurate use of components and resulted in an inconsistent product experience.

Due to the lack of a well-structured knowledge sharing system, the component library remained primarily accessible to designers. Our engineers and product managers struggled to utilize this toolkit effectively, resulting in time-consuming over-communication efforts.

✦ What does it take to build a design system?

After carefully reflecting on the issues, we identified several opportunities to elevate our component library into a comprehensive design system that brings greater value to both the organization and the product.

→ Define existing components clearly.
→ Establish a framework for current component use and introduction to new components.
→ Create documentation for best practices.
→ Implement a shared vocabulary for cross-team collaboration.

✦ 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-dense, ensuring legibility is crucial. Hence, we revisited our font choices, simplified our font hierarchy, optimized 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 form the foundation of user interaction and play a crucial role in delivering a smooth and consistent user experience. To create a seamless user journey, we categorized the base components into five core behaviors that align with a typical user's experience.

We put considerable effort into designing these components, ensuring their alignment with design atoms, and creating comprehensive variants that cover all potential scenarios and behaviors.

In Figma, we transformed these components into interactive elements, allowing them to serve as the bedrock of our high-fidelity prototypes. This approach ensures a solid and reliable foundation for our design process.

Step ❸ Composite Components: Components designed for the business needs

We've crafted specialized composite components that cater to our unique business needs and specific requirements. These components are assembled using our base components, resulting in a uniform and cohesive appearance, along with a well-defined information hierarchy.

Each composite component is assigned with business-related properties, enabling it to accurately reflect various component behaviors across different business scenarios. Whether it's user sign-in, investor suitability, IPO status, account status, or any other situation, these components adapt seamlessly to the specific context, ensuring a consistent and user-friendly experience.

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

Turning design system into a cross-team toolkit

Having established a new framework and revamped our components, it is vital to convert this into a shared resource and unified vocabulary accessible to all team members. To achieve this, we dedicated considerable effort to Storybook and documentation. Our design rules and methods are presented in a clear and easy-to-understand manner, facilitating seamless understanding and execution for all team members.

✦ Figma to Storybook: Bringing Figma components to life with code

We believe that true familiarity of the components can only be achieved by interacting with them and seeing the code. Therefore, we worked closely with our development team and implemented a workflow around ↳Storybook . With Storybook, all our components were translated from interactive components in Figma into production-ready React components.

A critical aspect of this process is ensuring that the properties and variants of the components closely match between Figma and Storybook. By adopting a unified naming convention, controls, and property types, we empower our designers and engineers to view the components in perfect alignment. This commitment to consistency and efficiency enhances our design and development workflow significantly.

✦ Documentation: Empowering reusability for everyone

In our pursuit of creating a design system that truly facilitates collaboration, we recognized the importance of comprehensive documentation. To achieve this goal, we adopted a dual-level documentation approach.

→ Component-level documentation: This defines the purpose of each component, how it differentiates from other similar components, and assists in making informed choices when selecting among similar options.
→ Variant-specific documentation: This provides insights into the ideal use cases for each variant within a particular component.

Taking the Select component as an example. The component-level documentation clarifies how it stands apart from other user input components, while the variant-level documentation illustrates the significance of maintaining a neutral approach in certain scenarios and offering default options in others.

In addition to the dual-level documentation, we carefully organized and named our components for easy navigation and search. We also minimized potential friction in these process by converting some non-configurable components into local components.

→ Outcome

Boost in consistency, efficiency and morale

Highlights of the outcome

→ Created a design system with 40+ components as interactive components in Figma and developed them as React components in Storybook.

→ Acquired 15,000+ users and $2,500,000+ customer deposits within 3 months after the public launch. Received positive reviews from App Store.

→ 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

Personal Website 2021

2021

Indie

Website

Personal Website 2021

2021

Indie

Website

Flutter Clock UI

2019

Indie

Creative Design

Flutter Clock UI

2019

Indie

Creative Design

This is Still Me

2018

Indie

Creative Design

This is Still Me

2018

Indie

Creative Design

LEX Growth Product

2022

Full-time

Product

LEX Growth Product

2022

Full-time

Product

LEX Waitlist

2020

Full-time

Product

LEX Waitlist

2020

Full-time

Product

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