Component Design
Project Goals
Our team's objectives was to create a design language and reusable components and patterns that would standardize and speed up design and development, integrate numerous research findings into the final product, and cut down on the amount of time we had to come up with new ideas. These were in line with the company goals.
Unify the product
Operational, Engagement, and Strategic Planning to establish a design for a cohesive product
Fast Benefits
Assist the product and engineering roadmaps in the short term by offering a standardized set of components and patterns together with instructions on when and how to use them.
Path to Success
Improve information architecture, wayfinding, and usability.
Ease, Clarity, Consistency.
Reduce product complexity and provide more clarity.
Process
PROSPECT
Executive Proposal, Requirement document and Finding Help
DISCOVERY
Research, Inspiration and Audit
DEFINE & DESIGN
Design Direction and Designing Components
ENGINEERING
HAND-OFF
Deliver the Specification document of the component and pattern to the development team.
DOCUMENTATION
Documenting the usage, design, accessibility guidelines and code
TESTING
Testing the component to match 1:1 with Design and Development stand point.
Discovery and Ideation
Problem?
Discovered significant challenge in maintaining consistency and efficiency across a range of diverse products and platforms. It has resulted in fragmented user experiences, hindering our ability to innovate and adapt to evolving market needs. Addressing this issue is critical to ensuring our organization remains competitive and capable of delivering cohesive and high-quality user experiences across all digital touch points.
Learning the basics of a design system
"Initially lost in a maze of design components, I relied on shared systems from industry giants like Shopify, Apple, and Google. However, they felt overwhelming. It was only through collaborative teamwork, guided by stakeholders and senior managers, that clarity emerged. With this structured approach, I transformed my design process, turning inspiration into actionable steps and advancing my craft beyond what I thought possible."
For Designers and Developers
Being a part of the Lydia Design System, the team collaborated with Engineers and Product designers to Structure the design system in a modular way, with components that can be easily combined and customized to create new interfaces. The team used tools and processes that facilitate communication, feedback, and iteration between both disciplines, such as design handoff platforms and version control systems.
Execution
Interactive Component Libraries
Our team designed and developed a library of reusable UI components that embodies the design principles and utilize the design tokens. Components include buttons, forms, navigation bars, cards, and more. Each component is designed with flexibility and customization in mind to accommodate various use cases.
Engineering hand-off
Our Design were shipped to the developers in a bundle that included:
-
Prepared design assets that included UI designs, component specifications, design files
-
Document Component Specifications that included dimensions, typography, colors, states (e.g., hover, active), interactions, and any other relevant properties..
-
Styling and Spacing properties in a desin file.
-
Supporting uses cases
Design system Documentation
Document design guidelines and usage instructions for each UI component, including visual specifications, accessibility considerations, and usage examples. This documentation serves as a reference for designers and developers and ensures consistency in design execution.
-
Usage guidelines that include Overview, Common uses, live demo, anatomy, best practices and content guidelines
-
Design guidelines that include UI Kit, Figma layout and Structure, properties, typography, sizing and placement.
-
Code guidelines includes the live demo, how the component is developed on an engineering level
-
Accessibility guidelines that include keyboard navigation, focus state and Aria Roles, Labels and States
This is just the beginning though. We will continue to add documentation to help internal and external designers and engineers better understand and implement the system.
Feedback and Insights
The design system is continuously being improved upon and is still under development. We are now offering designers and developers access to our design system as a service.
Has the product as a whole improved since the new parts were added? In order to improve upon our current version and use cases, we are continuously gathering input from designers and engineers.