view project
☞
COMING SOON
Industry
Fintech, Marketplace
Duration
3 months
Role
Design System, Documentation, Project Management
Team
1 Product Designer, 1 UX Developer
At LEX, we understood the importance of a design system for promoting consistency and efficiency. Although we had built a significant number of components by the time we launched our MVP, we encountered challenges in maintaining them while introducing new ones as our brand and product evolved. Moreover, we noticed inconsistencies between the visual design of our website and product and aimed to create a more cohesive experience. As a result, we took the opportunity to establish a comprehensive design system that followed a systematic approach and thorough documentation. This decision significantly improved our design-to-development workflow and efficiency.
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.
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.
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.
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.
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.
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.
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
Read more LEX case studies:
↳ LEX Product 2/3 - Core Product
Want to see all projects?
Check the ↳project index .