The Media Component System is a flexible design system that allows designers to be creative and developers to understand the design.
🎯Target users: Designers and Developers
OVERVIEW
Problem
Product & Tech Team needs an effective design system to improve the workflow. Because the Media Component System is not meeting the needs of designers and developers, and it is not flexible enough to grow over time.
OVERVIEW
Solution
•
Use Figma's Component Library to create an efficient design experience.
•
Customize annotations to help designers and developers communicate effectively.
•
Implement Atomic Design method to make the system easier to manage and update. Additionally, it encourages collaboration within the team.
OVERVIEW
Project Scope
My Role
•
Project owner
•
Main contributor
My Team
•
2 Designers
•
1 Developer
Duration & Deliverable
~2
Months
9+
Components & Annotations
90+
Components Variants
2
Prototypes
Tools
Figma
Browser Inspect Too
Abstract
Monday
PROCESS
Insights
Design systems can have a positive impact on the lives of designers and developers by improving their workflow and productivity. This, in turn, can lead to better user experiences.
User Story
“As a designer, I want to create a component from scratch for a wireframe design project, So that I can ensure that the component meets the specific needs of the project.”
Pain Points
•
Time consuming
•
Inconsistent design
•
Not flexible when there’s a change
“As a developer, I want to click on the individual component on the wireframe to understand the design, So that I can implement the component correctly.”
Pain Points
•
Risk of misinterpretation
•
Information overload
Why Is Design System Important?
•
Increased consistency to make the product more user-friendly and easier to navigate.
•
Increased flexibility that can be customized to meet the specific needs of a product and ensure it is adaptable to change.
•
Reduced development time by providing developers with a set of pre-built components that they can reuse.
•
Improved collaboration by providing a common vocabulary ensure everyone is on the same page.
PROCESS
Design
Media Component
To be flexible but still maintain control, I allowed designers to swap components in the property panel. Built-in properties such as spacing helped to prevent inconsistencies.
Component Library
I organized the components by their properties and use cases, making it easier for designers to find the desired component.
The components were built, structured, and organized using the Atomic Design method. This method is flexible and scalable, making it a good choice for design systems that need to grow and evolve over time.
Collaboration
Using Atomic Designallowed me to collaborate with other designers who were working on different parts of the design system, such as typography and buttons.
Component Annotation
Breaking down the design into smaller components makes it easier for developers to understand and work with.
Responsiveness
By making components responsive, I was able to ensure that all users could access the content and features of the product.
Reference
Analyzing the current product's HTML and CSS with the Browser Inspect Tool helped me to categorize and name the components in the design system. It also allowed me to gain a deeper understanding of how the product is built and how the different components interact with each other.
Brand Identity
Used the appropriate colors, fonts, and imagery, as well as ensuring that the overall design was consistent with our brand guidelines.
PROCESS
Testing
I conducted a usability test on the Media Component System to assess its overall effectiveness.
What Worked
✅
The design system was functional and can be used to create high-quality wireframe with consistency.
✅
The components were flexible and can be updated if needed.
What Did Not Work
❌
The annotation used technical terms that developers may not be familiar with.
❌
The component was causing excessive scrolling and physical interaction on mobile devices.
Testing Plan
Objective:
How usable was the design system for designers and developers?
Methods:
Using the new Media Component system in a page design project. The developers will implement it in our product. I observed and documented the process to understand the usability of the system.
PROCESS
Iteration
I adapted the component annotation to use common terminology so that developers could understand it.
To improve the mobile experience, I decreased the component sizing on the continuous scroll page with plenty of content. This reduced the amount of scrolling required to find desired content.
AFTERMATH
Impact
A more effective way to build future project.
The new Media Component System saved designers time and effort by providing them with a consistent set of components to use.
Designer’s feedback: While working on a page design project, I needed the XYZ component. Instead of creating it from scratch, I was able to find it in the Figma component library.
The new Media Component System also improved communication between designers and developers by standardizing technical terms used during the hand-off stage.
Developer’s feedback: Component annotations were really helpful when implementing a page. They allowed me to quickly and easily understand the purpose and behavior of each component, without having to check each one individually.
AFTERMATH
Lesson
Perfect Design System does not exist.
I found myself falling into the hole of making the system perfect. It's an ever evolving organism. A "perfect" design system is not adaptable to changes.
AFTERMATH
Future Opportunities
Use Headless Design System bridge design and engineering.
Using design tokens could keep the design consistent and simplify the development process. Design token is similar to the class concept in CSS. Figma Token plugin even has an auto-annotation feature.
View Full Document >
