top of page

​Building the foundation of a scalable design system for Muse OS
 

Project Description: This design system provides a set of reusable components and guidelines for creating a consistent and user-friendly experience across all Muse Wearables products - hardware and software.

UI / UX Design

Services

Muse Wearables

Client

Market Launch

2022

01. Typography

 

My process for choosing the Muse OS font:
 

  • I created a brand identity for Muse, based on the values of growth, luxury, and success that they represent and resonated with.
     

  • I sifted through hundreds of fonts to find one that is versatile, legible, readable, neutral, and accessible. I considered the pros and cons of each font before choosing Nunito.
     

  • I experimented with Nunito on various screen types and sizes and also compared with other fonts to see how they would work for Muse OS.
     

  • I created a library of components and guidelines for the future use of Nunito consistently and effectively across all Muse products and services.

Where all of this started

Problem Statement
When I was on a project I realized that Muse brand identity lacked cohesion. Every project had a unique visual style, with inconsistencies even in the Muse logo across web and hardware products.


Why this Problem required me to detour and work on this urgently
We were gonna start hiring for UX Designers soon and we needed to have a consistent design system so we could streamline projects to ensure our product launched at the decided timeline. This inconsistency created a fragmented user experience and hindered brand recognition. Additionally, the absence of a design system led to repetitive design efforts, slowing down development and potentially introducing design errors.

What impact did I help create?

Streamlined Design Processes

The design system reduced design time by an estimated 30%, allowing designers to focus on creative innovation.

​

Reduced Errors by 40%

Standardized components and guidelines minimized design inconsistencies and errors.

​

Boosted Overall Efficiency

A unified design system fostered collaboration between design and development teams, leading to faster product iteration.

​

Cohesive Brand Identity

The consistent application of design elements across all products strengthened Muse's brand recognition and user experience.

The Deliverables

  • Brand Tone and Consistency
     Maintained consistency in Typography, Colours, and Iconography aligned with the brand tone.
     

  • Component Library
    Created a component library of reusable components.

  • Personalized Engagement
    Usage Guidelines: Developed guidelines on how to use and implement the design system.
     

  • Accessibility
    Ensured accessibility for all users.

Biggest Challenge in this was there was a time constraint and we had limited resources.

To tackle this I implemented a an approach with Hacks that would help us stay on track

Step 1 Defining the Brand Identity which was long due

The Challenge? As the new designer, I faced initial resistance when advocating for a design system.  

However, through collaboration with my manager, presented a compelling case, highlighting how a design system would establish a clear brand identity and ensure consistency across all products. This unified foundation would streamline development and elevate the user experience. Ultimately, the team embraced the concept, recognizing the long-term benefits.

Step 2 Understanding Diverse Indians - Our Users

​These insights were gleaned from prev, UXR and a combination of user interviews, online surveys, and competitor analysis conducted in Bangalore with tech-savvy adults.

💰Value Driven

This audience prioritizes products that offer clear benefits and improve their lives. Focus on efficiency, cost-effectiveness, and solving specific pain points.

🚀 Tech-Fluent
Growing up with technology, they're comfortable using new tools and platforms. Highlight innovative features and seamless user experiences.

​

🛺 Culturally Diverse

Bangalore boasts a diverse population. Consider design elements and messaging that resonate across various backgrounds.


📲 Mobile-First

Mobile is the primary device for this generation. Ensure your product offers a flawless mobile experience.

Font Size

  • The angle of incidence with the user eye should be at least 0.3 degrees.

  • Use device independent units (DIPs for Android and points for iOS) to compare the font size in inches and use the corresponding sizes for both iOS and Android.

Tracking

  • Adjust tracking based on font size, purpose, and device.

  • Use a trial and error method to identify the best tracking value for each font size and purpose.

Additional Considerations

  • Line length: On desktop, a single line should not contain more than 60 characters. On mobile, 4-6 words is ideal. For watches, that count is down to 2-4 words per line.

Font Guidelines

02. Colours

 

My process for choosing colours for Muse OS:
 

  • I did extensive research to learn about UI colour principles and how they relate to our brand identity.
     

  • I used online tools to ensure that the colours I chose were clear, flexible, familiar, accessible, responsive, and aesthetically pleasing.
     

  • I created a comprehensive color library, including palettes, core colors, and denotive colors for different states. I documented these guidelines in a systematic way to help future designers use them easily and maintain brand consistency.
     

  • I am proud of the colour library that I created for Muse OS. It is a valuable resource that will help us to create beautiful and user-friendly experiences for our customers.

A gist of the visual library created:

03. Icons

​

I created guidelines for how to create and use icons for Muse OS:
 

  • I defined principles for creating clear, readable, aligned, brief, consistent, and easy-to-use icons.
     

  • I sorted icons into app icons and system icons, and created basic guidelines for designing each type.
     

  • I studied iconography from Material Design, Apple, Adobe, and IBM to get inspiration for sizes, shapes, and styling.
     

  • I listed styling criteria, such as geometric shapes, stroke width, natural forms, angles, corners, joints, end caps, corner radius, and other elements. I also described how to create variants for different line weights.
     

  • I organized icons based on type, representation, anatomy, keyline shapes, and artboard.

Documentation for use of Iconography

The Design System I created is implemented across Muse Wearables Platforms including Web and Hardware Products

This Muse project exemplified the spirit of "lifelong learning" in UX design. 

Here are my key takeaways:

Always Learning, Always Growing
Hired as an Industrial Designer, I embraced the unexpected challenge of building Muse's first design system. This experience underscored the value of learning agility in a fast-paced startup environment. My willingness to acquire new UI/UX skills (typography, iconography, color theory) proved invaluable, and this newfound adaptability equips me to thrive in dynamic design landscapes.

Building for the Future
The design system wasn't just about aesthetics; it was about building a user-centered foundation. By meticulously crafting a comprehensive system encompassing various platforms, I ensured scalability and consistency across future products. This experience solidified my understanding of designing for user needs, not just immediate solutions.

Teamwork Makes the UX Dream Work
The project's success hinged on collaboration. My product manager's guidance and support were invaluable. This experience highlighted the importance of clear communication and teamwork in UX design. As I move forward, I'm confident that my ability to collaborate effectively will be a cornerstone of my UX design success.

Thank you for reading! :)

Say hello by email or connect with me on LinkedIn

We're bold, innovative, and never settle for the ordinary

The Solution? An inclusive approach to foster team-wide understanding of the design system's purpose as a foundational element for achieving brand consistency and user experience goals.

​

I implemented a two-pronged approach:

 

  • Conducted in-office interviews with 15 colleagues to understand their design needs and workflows.

  • Secured an expert interview with the CEO and founders to grasp their vision for Muse Wearables' design direction.



Here's what I built from this data:

Who are we?

  • We challenge tech norms with a colorful bang.

  • We are obsessed with beauty that fuels users artistic expression.


Our Mission

  • We want to empower everyone to break the mold and make their mark.

  • We make powerful technology approachable and inclusive for all.

Here's some pictures during my time at Muse
that embodies this spirit :)

bottom of page