Led the rebranding for Equipboard, brand guidline, design system and design strategies.
March 2024
Timeline
March 2024
Timeline
March 2024
Timeline
March 2024
Timeline
Completed in 3 Weeks
Duration
Completed in 3 Weeks
Duration
Completed in 3 Weeks
Duration
Completed in 3 Weeks
Duration
Product Design
·
Design System
Deliverables
Product Design
·
Design System
Deliverables
Product Design
·
Design System
Deliverables
Product Design
·
Design System
Deliverables
Company
Company
Company
Company
As the lead product designer, I spearheaded the design team's efforts to overhaul Equipboard's design system and documentation. Through collaboration, we identified the core issues behind the brand's low perception and recognition across the website and social media channels. By leveraging user research and insights, I guided the team in conceptualizing and developing a professional, polished site with a cohesive design language.
My role
As the lead product designer, I spearheaded the design team's efforts to overhaul Equipboard's design system and documentation. Through collaboration, we identified the core issues behind the brand's low perception and recognition across the website and social media channels. By leveraging user research and insights, I guided the team in conceptualizing and developing a professional, polished site with a cohesive design language.
My role
As the lead product designer, I spearheaded the design team's efforts to overhaul Equipboard's design system and documentation. Through collaboration, we identified the core issues behind the brand's low perception and recognition across the website and social media channels. By leveraging user research and insights, I guided the team in conceptualizing and developing a professional, polished site with a cohesive design language.
My role
As the lead product designer, I spearheaded the design team's efforts to overhaul Equipboard's design system and documentation. Through collaboration, we identified the core issues behind the brand's low perception and recognition across the website and social media channels. By leveraging user research and insights, I guided the team in conceptualizing and developing a professional, polished site with a cohesive design language.
My role
[Left] OLD
[Left] OLD
[Left] OLD
drag
NEW [Right]
NEW [Right]
NEW [Right]
Overview
Equipboard simplify music gear discovery for musicians, professionals, and enthusiasts to unveils the tools and products used by their favorite artists.
The challenge was to revamp the brand’s identity and create a cohesive design system from scratch. This project aimed to enhance the user experience by establishing a clear, unified visual language and improving overall usability.
Overview
Equipboard simplify music gear discovery for musicians, professionals, and enthusiasts to unveils the tools and products used by their favorite artists.
The challenge was to revamp the brand’s identity and create a cohesive design system from scratch. This project aimed to enhance the user experience by establishing a clear, unified visual language and improving overall usability.
Overview
Equipboard simplify music gear discovery for musicians, professionals, and enthusiasts to unveils the tools and products used by their favorite artists.
The challenge was to revamp the brand’s identity and create a cohesive design system from scratch. This project aimed to enhance the user experience by establishing a clear, unified visual language and improving overall usability.
Overview
Equipboard simplify music gear discovery for musicians, professionals, and enthusiasts to unveils the tools and products used by their favorite artists.
The challenge was to revamp the brand’s identity and create a cohesive design system from scratch. This project aimed to enhance the user experience by establishing a clear, unified visual language and improving overall usability.
Objectives
This design system to resonate with its audience, all while carving a unique niche in a congested market sphere.
This design system to resonate with its audience, all while carving a unique niche in a congested market sphere.
This design system to resonate with its audience, all while carving a unique niche in a congested market sphere.
This design system to resonate with its audience, all while carving a unique niche in a congested market sphere.
Develop a cohesive brand narrative and visual language that is consistently reflected across all touchpoints.
Develop a cohesive brand narrative and visual language that is consistently reflected across all touchpoints.
Develop a cohesive brand narrative and visual language that is consistently reflected across all touchpoints.
Develop a cohesive brand narrative and visual language that is consistently reflected across all touchpoints.
The design asset and its components to be adaptable and accessible for future growth across the platform.
The design asset and its components to be adaptable and accessible for future growth across the platform.
The design asset and its components to be adaptable and accessible for future growth across the platform.
The design asset and its components to be adaptable and accessible for future growth across the platform.
Some of the constraints included working within a tight timeline and budget, which necessitated efficient resource management and prioritization of key elements. We also faced the challenge of integrating the new design system seamlessly into our existing platform without disrupting the current user experience. Additionally, the need to maintain accessibility and inclusivity standards required careful consideration during the design process.
Impact
60%
Built an extensive design system from scratch, increasing the development time.
60%
Built an extensive design system from scratch, increasing the development time.
60%
Built an extensive design system from scratch, increasing the development time.
60%
Built an extensive design system from scratch, increasing the development time.
30%
Increase the team collaboration and production speed during the handoff process.
30%
Increase the team collaboration and production speed during the handoff process.
30%
Increase the team collaboration and production speed during the handoff process.
30%
Increase the team collaboration and production speed during the handoff process.
3 weeks
Launched 117 dark/light colors, typography, sizing variables and button components with positive feedback.
3 weeks
Launched 117 dark/light colors, typography, sizing variables and button components with positive feedback.
3 weeks
Launched 117 dark/light colors, typography, sizing variables and button components with positive feedback.
3 weeks
Launched 117 dark/light colors, typography, sizing variables and button components with positive feedback.
Revamping the brand's identity
The brand guidelines were designed to be a practical tool for internal and external stakeholders, providing clear instructions on how to apply the brand elements in various contexts and adopt consistent design language. I created 32 pages of brand guideline presentation to ensured that the brand maintained a cohesive and recognizable identity across all communications and marketing materials.
During the brainstorming session, we decided to retain the orange color because it embodies the essence of the brand—energetic, creative, warm, youthful, optimistic, adventurous, and attention-grabbing. We also explored various brand attributes and ultimately defined Equipboard's brand identity as a blend of innovation, community, and passion for music. This new identity will be reflected in the visual and verbal elements of the brand, including the logo, typography, color palette, and overall design language.
Creating the Logo
Equipboard wanted a simple logomark that is both modern and timeless, reflecting the brand’s commitment to quality and innovation. The final logo design incorporated musical elements like the keyboard keys, play button, guitar pick and the letter E for Equipboard. The logomark was paired with a clean, contemporary typeface to create a memorable and versatile expression. The logo was designed to work well in both light and dark modes, ensuring versatility across different contexts. We also created various logo sizes and formats to accommodate different applications, from website headers to mobile app icons.
Revamping the brand's identity
The brand guidelines were designed to be a practical tool for internal and external stakeholders, providing clear instructions on how to apply the brand elements in various contexts and adopt consistent design language. I created 32 pages of brand guideline presentation to ensured that the brand maintained a cohesive and recognizable identity across all communications and marketing materials.
During the brainstorming session, we decided to retain the orange color because it embodies the essence of the brand—energetic, creative, warm, youthful, optimistic, adventurous, and attention-grabbing. We also explored various brand attributes and ultimately defined Equipboard's brand identity as a blend of innovation, community, and passion for music. This new identity will be reflected in the visual and verbal elements of the brand, including the logo, typography, color palette, and overall design language.
Creating the Logo
Equipboard wanted a simple logomark that is both modern and timeless, reflecting the brand’s commitment to quality and innovation. The final logo design incorporated musical elements like the keyboard keys, play button, guitar pick and the letter E for Equipboard. The logomark was paired with a clean, contemporary typeface to create a memorable and versatile expression. The logo was designed to work well in both light and dark modes, ensuring versatility across different contexts. We also created various logo sizes and formats to accommodate different applications, from website headers to mobile app icons.
Revamping the brand's identity
The brand guidelines were designed to be a practical tool for internal and external stakeholders, providing clear instructions on how to apply the brand elements in various contexts and adopt consistent design language. I created 32 pages of brand guideline presentation to ensured that the brand maintained a cohesive and recognizable identity across all communications and marketing materials.
During the brainstorming session, we decided to retain the orange color because it embodies the essence of the brand—energetic, creative, warm, youthful, optimistic, adventurous, and attention-grabbing. We also explored various brand attributes and ultimately defined Equipboard's brand identity as a blend of innovation, community, and passion for music. This new identity will be reflected in the visual and verbal elements of the brand, including the logo, typography, color palette, and overall design language.
Creating the Logo
Equipboard wanted a simple logomark that is both modern and timeless, reflecting the brand’s commitment to quality and innovation. The final logo design incorporated musical elements like the keyboard keys, play button, guitar pick and the letter E for Equipboard. The logomark was paired with a clean, contemporary typeface to create a memorable and versatile expression. The logo was designed to work well in both light and dark modes, ensuring versatility across different contexts. We also created various logo sizes and formats to accommodate different applications, from website headers to mobile app icons.
Revamping the brand's identity
The brand guidelines were designed to be a practical tool for internal and external stakeholders, providing clear instructions on how to apply the brand elements in various contexts and adopt consistent design language. I created 32 pages of brand guideline presentation to ensured that the brand maintained a cohesive and recognizable identity across all communications and marketing materials.
During the brainstorming session, we decided to retain the orange color because it embodies the essence of the brand—energetic, creative, warm, youthful, optimistic, adventurous, and attention-grabbing. We also explored various brand attributes and ultimately defined Equipboard's brand identity as a blend of innovation, community, and passion for music. This new identity will be reflected in the visual and verbal elements of the brand, including the logo, typography, color palette, and overall design language.
Creating the Logo
Equipboard wanted a simple logomark that is both modern and timeless, reflecting the brand’s commitment to quality and innovation. The final logo design incorporated musical elements like the keyboard keys, play button, guitar pick and the letter E for Equipboard. The logomark was paired with a clean, contemporary typeface to create a memorable and versatile expression. The logo was designed to work well in both light and dark modes, ensuring versatility across different contexts. We also created various logo sizes and formats to accommodate different applications, from website headers to mobile app icons.
Laying the foundations
Typography and icon language
The typography system is structured into scales, including display, heading, text, and label. Display and heading are used for larger text, such as titles, while text is intended for body content, and label is reserved for smaller tags. We chose Inter as the primary typeface due to its readability and accessibility, paired with a secondary typeface, Space Mono for tags and hyperlinks. Typography variables are linked to text styles, ensuring that changes can be easily implemented across multiple projects for mobile and desktop modes. Over 100 Icon components were are named and described by keywords for easy search.
Buttons and components
Developing buttons and components from scratch involved creating a consistent set of UI elements and responsiveness with auto layout, constraints, layouts & grids enabled. We designed buttons with clear visual cues for different states (e.g., default, hover, active, disabled) and ensured that they were easily distinguishable and accessible. Components such as forms, modals, and navigation elements were designed with a focus on usability and consistency, adhering to the established design principles and guidelines.
Accessibility for Growth
Dark and light modes
Designing for both dark and light modes was crucial for enhancing user experience and accessibility. I developed 177 color variables that included primary, secondary, and accent colors to be used in both modes. The dark mode was designed to reduce eye strain and improve readability in low-light environments, while the light mode focused on providing a clean and bright interface for daytime use. Color variables are assigned so they can be toggled between with a single click in Figma.
Optimized for customization
The design system is fully tokenized using Figma's Variables feature, enabling customizable and synchronized colors and numbers with the development team. Auto Layout ensures components adjust automatically for any device or screen size, and Properties and Variants make maintenance and customization straightforward.
Color Variables are divided into Primitive and Semantic collections, enhancing design flexibility and consistency. Number Variables standardize spacing, sizing, and corner radius, ensuring uniformity across designs.
Auto Layout and Auto Layout Wrap are applied to components, allowing seamless resizing and dynamic behavior in both vertical and horizontal directions, with Max & Min Sizing for precise control over component dimensions.
Grid & Layout styles are available for every breakpoint and resizing behavior, and Variants are used for components with multiple types, states, and sizes.
Exposed nested instances create easy customization of nested elements within complex components, and Properties make component customization quick and intuitive during design.
Interactive components enable instant prototyping interactions, making the design process advance faster.
Accessibility for Growth
Dark and light modes
Designing for both dark and light modes was crucial for enhancing user experience and accessibility. I developed 177 color variables that included primary, secondary, and accent colors to be used in both modes. The dark mode was designed to reduce eye strain and improve readability in low-light environments, while the light mode focused on providing a clean and bright interface for daytime use. Color variables are assigned so they can be toggled between with a single click in Figma.
Optimized for customization
The design system is fully tokenized using Figma's Variables feature, enabling customizable and synchronized colors and numbers with the development team. Auto Layout ensures components adjust automatically for any device or screen size, and Properties and Variants make maintenance and customization straightforward.
Color Variables are divided into Primitive and Semantic collections, enhancing design flexibility and consistency. Number Variables standardize spacing, sizing, and corner radius, ensuring uniformity across designs.
Auto Layout and Auto Layout Wrap are applied to components, allowing seamless resizing and dynamic behavior in both vertical and horizontal directions, with Max & Min Sizing for precise control over component dimensions.
Grid & Layout styles are available for every breakpoint and resizing behavior, and Variants are used for components with multiple types, states, and sizes.
Exposed nested instances create easy customization of nested elements within complex components, and Properties make component customization quick and intuitive during design.
Interactive components enable instant prototyping interactions, making the design process advance faster.
Accessibility for Growth
Dark and light modes
Designing for both dark and light modes was crucial for enhancing user experience and accessibility. I developed 177 color variables that included primary, secondary, and accent colors to be used in both modes. The dark mode was designed to reduce eye strain and improve readability in low-light environments, while the light mode focused on providing a clean and bright interface for daytime use. Color variables are assigned so they can be toggled between with a single click in Figma.
Optimized for customization
The design system is fully tokenized using Figma's Variables feature, enabling customizable and synchronized colors and numbers with the development team. Auto Layout ensures components adjust automatically for any device or screen size, and Properties and Variants make maintenance and customization straightforward.
Color Variables are divided into Primitive and Semantic collections, enhancing design flexibility and consistency. Number Variables standardize spacing, sizing, and corner radius, ensuring uniformity across designs.
Auto Layout and Auto Layout Wrap are applied to components, allowing seamless resizing and dynamic behavior in both vertical and horizontal directions, with Max & Min Sizing for precise control over component dimensions.
Grid & Layout styles are available for every breakpoint and resizing behavior, and Variants are used for components with multiple types, states, and sizes.
Exposed nested instances create easy customization of nested elements within complex components, and Properties make component customization quick and intuitive during design.
Interactive components enable instant prototyping interactions, making the design process advance faster.
Accessibility for Growth
Dark and light modes
Designing for both dark and light modes was crucial for enhancing user experience and accessibility. I developed 177 color variables that included primary, secondary, and accent colors to be used in both modes. The dark mode was designed to reduce eye strain and improve readability in low-light environments, while the light mode focused on providing a clean and bright interface for daytime use. Color variables are assigned so they can be toggled between with a single click in Figma.
Optimized for customization
The design system is fully tokenized using Figma's Variables feature, enabling customizable and synchronized colors and numbers with the development team. Auto Layout ensures components adjust automatically for any device or screen size, and Properties and Variants make maintenance and customization straightforward.
Color Variables are divided into Primitive and Semantic collections, enhancing design flexibility and consistency. Number Variables standardize spacing, sizing, and corner radius, ensuring uniformity across designs.
Auto Layout and Auto Layout Wrap are applied to components, allowing seamless resizing and dynamic behavior in both vertical and horizontal directions, with Max & Min Sizing for precise control over component dimensions.
Grid & Layout styles are available for every breakpoint and resizing behavior, and Variants are used for components with multiple types, states, and sizes.
Exposed nested instances create easy customization of nested elements within complex components, and Properties make component customization quick and intuitive during design.
Interactive components enable instant prototyping interactions, making the design process advance faster.
Learnings
Equipboard's brand refresh and the design system show significant milestone in the company’s journey, aligning the brand’s visual and experiential elements with its core values and market positioning. The new design system provided a cohesive and scalable framework that enhanced user experience, improved brand consistency, and supported future growth. The thoughtful integration of both dark and light UI modes, along with a responsive typography and icon system, ensured a seamless and accessible experience for users across various contexts. The impact of this project was evident in the positive feedback from users and stakeholders, increased brand recognition, and the successful positioning of Equipboard as a leading music gear discovery platform. Through this process, we demonstrated the power of a well-executed design system in transforming a brand and elevating its presence in a competitive landscape.
