ButterMove Design System
ButterMove Design System
ButterMove Design System
Solved inconsistent visual language by conducting a clear design guideline for B2B and B2C products.
Solved inconsistent visual language by conducting a clear design guideline for B2B and B2C products.
ButterMove Design System
Solved inconsistent visual language by conducting a clear design guideline for B2B and B2C products.
Background
Background
Background
Without a clear style guide, it's hard to promote quality and consistent interfaces across products.
Without a clear style guide, it's hard to promote quality and consistent interfaces across products.
My contribution
My contribution
My contribution
I took the initiative to develop a design system to solve inconsistent visual language for all products and provided clear design guidance to the design team and other product contributors.
I took the initiative to develop a design system to solve inconsistent visual language for all products and provided clear design guidance to the design team and other product contributors.
Team
Team
Team
Product Designer (Me)
Chief Product Officer (My Manager)
Project Manager
Product Designer (Me)
Chief Product Officer (My Manager)
Project Manager
Timeline
Timeline
Timeline
5 days (Feb 2022)
5 days (Feb 2022)
Effect #1
Effect #1
When more people are involved, it is more challenging to maintain the design style.
When more people are involved, it is more challenging to maintain the design style.
When more people are involved, it is more challenging to maintain the design style.
I took the initiative to develop a design system to solve inconsistent visual language for all products and provided clear design guidance to the design team and other product contributors.
I took the initiative to develop a design system to solve inconsistent visual language for all products and provided clear design guidance to the design team and other product contributors.
Effect #2
Effect #2
When more people are involved, it is more challenging to maintain the design style.
When more people are involved, it is more challenging to maintain the design style.
When more people are involved, it is more challenging to maintain the design style.
The more products we conducted, the more issues of usability and aesthetics emerged. There’s no doubt that we must conduct a set of standards to manage design at scale and create a shared visual language with a design system.
The more products we conducted, the more issues of usability and aesthetics emerged. There’s no doubt that we must conduct a set of standards to manage design at scale and create a shared visual language with a design system.
I got approved by stakeholders to do research and authoritative design systems in the industry.
I got approved by stakeholders to do research and authoritative design systems in the industry.
I got approved by stakeholders to do research and authoritative design systems in the industry.
I was requested to develop a design system on the condition that stakeholders approved the design proposal. Another critical thing is to help them understand that no comprehensive guide affects the aesthetics and functionality of the product and team productivity. With this in mind, I searched related articles on Nielsen Norman Group, an authoritative American computer user interface and user experience consulting firm, and top companies' design system examples.
I was requested to develop a design system on the condition that stakeholders approved the design proposal. Another critical thing is to help them understand that no comprehensive guide affects the aesthetics and functionality of the product and team productivity. With this in mind, I searched related articles on Nielsen Norman Group, an authoritative American computer user interface and user experience consulting firm, and top companies' design system examples.
Here are the key findings after research:
Here are the key findings after research:
Here are the key findings after research:
• Design systems can replicate designs quickly by utilizing premade UI components and elements.
• It can focus more on larger, complex problems than tweaking visual appearance.
• It creates a unified language across products, channels, and cross-functional teams.
• It can provide reference for designers, developers, and other project contributors.
• Design systems can replicate designs quickly by utilizing premade UI components and elements.
• It can focus more on larger, complex problems than tweaking visual appearance.
• It creates a unified language across products, channels, and cross-functional teams.
• It can provide reference for designers, developers, and other project contributors.
Here are the authoritative design systems:
Here are the authoritative design systems:
Here are the authoritative design systems:
Google Material Design
Google Material Design
IOS design guideline
IOS design guideline
Shopify design guideline
Shopify design guideline
Stakeholders, the design team, and I determined low cost, less effort, and less customized approaches to the design system.
Stakeholders, the design team, and I determined low cost, less effort, and less customized approaches to the design system.
Stakeholders, the design team, and I determined low cost, less effort, and less customized approaches to the design system.
Project Goal
Project Goal
Developed a design system to improve visual consistency across products and provide a clear set of design standards and accessible UI components for all levels of designers and other product contributors.
Developed a design system to improve visual consistency across products and provide a clear set of design standards and accessible UI components for all levels of designers and other product contributors.
Developed a design system to improve visual consistency across products and provide a clear set of design standards and accessible UI components for all levels of designers and other product contributors.
Challenge #1
Challenge #1
Using pure black and pure white on all products, in-app advertisements, and presentation decks can cause eye strain.
Using pure black and pure white on all products, in-app advertisements, and presentation decks can cause eye strain.
Using pure black and pure white on all products, in-app advertisements, and presentation decks can cause eye strain.
*Pure White = Color Code #FFFFFF. Pure Black = Color Code #000000.
*Pure White = Color Code #FFFFFF. Pure Black = Color Code #000000.
Nevertheless, the design team didn’t consider the balance of contrast between text and background color to promote user accessibility and readability. Moreover, the design team overused the ButterMove logo’s colors for all products, in-app advertisements, and presentation decks.
Nevertheless, the design team didn’t consider the balance of contrast between text and background color to promote user accessibility and readability. Moreover, the design team overused the ButterMove logo’s colors for all products, in-app advertisements, and presentation decks.
Solution #1
Solution #1
Designed a color scheme that provided a comfortable reading experience for users.
Designed a color scheme that provided a comfortable reading experience for users.
Designed a color scheme that provided a comfortable reading experience for users.
It’s necessary to design a color scheme that provides a comfortable reading experience for users. A survey from the American Optometric Association (AOA), a leading professional organization for optometry doctors , found that 58 percent of adults in the U.S. have experienced eye strain from working on computers. Therefore, stakeholders and the design team strongly agree to conduct a design system.
It’s necessary to design a color scheme that provides a comfortable reading experience for users. A survey from the American Optometric Association (AOA), a leading professional organization for optometry doctors , found that 58 percent of adults in the U.S. have experienced eye strain from working on computers. Therefore, stakeholders and the design team strongly agree to conduct a design system.
Design System Highlights
Design System Highlights
Reflection
Reflection
The stakeholders and design team were impressed that I took the initiative to enhance product quality and team productivity with a clear design system.
The stakeholders and design team were impressed that I took the initiative to enhance product quality and team productivity with a clear design system.
The stakeholders and design team were impressed that I took the initiative to enhance product quality and team productivity with a clear design system.
*Pure White = Color Code #FFFFFF. Pure Black = Color Code #000000.
*Pure White = Color Code #FFFFFF. Pure Black = Color Code #000000.
Nevertheless, the design team didn’t consider the balance of contrast between text and background color to promote user accessibility and readability. Moreover, the design team overused the ButterMove logo’s colors for all products, in-app advertisements, and presentation decks.
Nevertheless, the design team didn’t consider the balance of contrast between text and background color to promote user accessibility and readability. Moreover, the design team overused the ButterMove logo’s colors for all products, in-app advertisements, and presentation decks.
I learned I shouldn’t hesitate to express my opinions.
I learned I shouldn’t hesitate to express my opinions.
I learned I shouldn’t hesitate to express my opinions.
I was hesitant to tell my manager and stakeholders that it would be better to create consistent visual language to improve the quality of products. However, I learned to speak up my opinion while respecting and empathizing with others.
I was hesitant to tell my manager and stakeholders that it would be better to create consistent visual language to improve the quality of products. However, I learned to speak up my opinion while respecting and empathizing with others.