UI Design System
Design for impact
A collective approach to creating consistency, scalability, and reusability through a shared design system.
My Role
Product Designer​​
​Timeline
2 months
Deliverables
Design System
Color Theme
Typography
Reusable Components
Form Design
Logo Design
Design Documentation
Keywords
Best Practice
Branding
After working on several projects for VHC, I've realized that there is an opportunity to build a UI design system for our projects to ensure the consistency of the digital interfaces in order to offer patients, volunteers and donors a simplified and uniform experience. So I proposed it and made it!
I also leverage the design system to guide and educate the team in design principles and design thinking to enhance their digital product solutions.
Design Challenge
How Might We provide clear guidelines and best practices for our teams, while delivering a thoughtful user experience?
User
Pain Points & Needs
User Pain Points
User Needs
Lists are text-heavy: Users are annoyed that they cannot scan information quickly and find it hard to digest important information in long copy.
​
Form isn't smart: Users find the kind of input the text field requires isn't obvious.
​
Actionable directions are frequently missed : Users find it challenging to discover text links and call-to-action buttons that randomly appear on pages.​
Users need clear and concise navigation on the website.
​
​​
Users need complete the task without having to guess.
​
Users need clear and consistent directions to take actions effectively.
​
Business
Pain Points & Needs
Business Pain Points
Business Needs
Website doesn't have consistent look and feel: Negative impression of the brand.
​​​​​​
Updates take too much effort: Any changes will cause re-formatting.
Business needs standardizing the functionality and look and feel through the website.
Business needs scale down and scale up the experience while still delivering access and control to the information and features.
Project Principles
Respect user needs
Minimize cognitive load and learning curve to bring more confidence in using the designs.
Avoid "UX debt"
​
The same component is reused everywhere, retaining its specified design.
Fixing
What's Broken
Audit the website to identify what's not working and what we could fix to make quick-win changes.​
Before
After
Various visual styles on one page:
logo, colors, font, buttons...
Migrate everything to a consistent style.
Little wins like this worth a lot and are so impactful.
The Atomic Design
With this bottom-up approach for building interfaces, we break down the pages and screens into their smallest pieces. ​
​
Beginning with style guiding the most basic and atomic functional elements:
​
-
Color Theme
-
Typography
​
and then build up to the following components to cover most of our use cases:
​
-
Accordion
-
Card
-
Field Input
-
Button
​
Bonus: Finalize logo designs for branding to align with the company's identity and resonates with its intended audience.
Style Guide
-
Color Theme
-
Typography
Component Library
As a user, I need clear and concise navigation on the website.​
-
Accordion
Behavior:
-
By default, accordions items are closed.
-
Allow multiple open items.
Layout:
The chevron icon signifies additional content and indicates an accordion item’s interaction.
Content:
An accordion header should give an idea of the content in the accordion panel. Keep headers brief.
Accessibility:​​
Accordion headers have a button role that makes them perceivable to assistive technologies.
​
-
Card
​Layout:
Card title aligns on the center of the card preview.
Behavior:
The card title function as a button.
Content:
The content should encourage people to take an action directly from the card and click through for more info.
.png)
As a user, I need to complete the task without having to guess.
-
Field Input
Behavior:
-
Validation states will change the visual presentation of the field, for example changing to a red border in the error state.
-
Required entries: all fields are required by disabling the Sign Up or Submit button until all fields are complete.
Layout:
By default, field labels left-aligned within the form component.
Content:
Use field label as placeholder text to give a short hint, or an example of formatting for the expected input value.
As a user, I need clear and consistent directions to take actions effectively.
-
Button
Behavior:
A standard button initiates a single action or event.
Layout:
Only use one primary button in a layout for the most important action. If there are more than two buttons with equal priority, all buttons should have neutral backgrounds. Always give the primary button action prominent placement.
Content:
Use active language that reflects the action that will happen next. Be brief, usually a single verb is best but include a noun if it increases clarity.
Branding
The first time I opened the "Logo" folder in our system,
I saw 20 files like this:
...
and 15 more.
Hmmm...Can you tell the differences?
I can, because the name of every single file is different!
​
Something needs to be done.
Working closely with stakeholders, including marketing teams and company leadership, I ensure the logo design aligns with branding goals.
​
-
Refining selected logo concepts, focusing on elements like typography, color, and iconography.
-
Ensuring the logo is versatile and scalable for various applications, such as print, digital, and merchandise.​​
-
Preparing final logo files in various formats (e.g., vector, raster) for different use cases.
-
Developing brand guidelines that detail proper logo usage, including spacing, color variations, and prohibited alterations.
Impact
-
Internally, everyone loves the Design System documents.
​
-
A valuable resource for guiding digital platforms and marketing materials. Educates teams on graphic knowledge, design components, and their application.
​
-
I also review branding and promotional materials to ensure consistency with design guidelines.
Takeaways
The single source of truth
​
Understanding and implementing this component-based UI design system allows us to achieve consistency, scalability, and improved usability across our interfaces and products throughout the organization. This approach enhances efficiency, freeing up time to tackle more challenging interaction design problems.