DESIGN SYSTEM

Britannica Home Fashions, Inc.

Where

New York, NY

Role

UI Designer

Tools

Figma, Tailwind

Timeline

Oct - Dec 2022

hero

Meet the Client

Britannica Home Fashions, Inc., a leading force in the home textile industry for over 40 years, has a very robust internal system to manage their business worldwide (USA, China, India).

However, due to the lack of a design system, most of their software applications have a different look & feel. They operate differently. As a consequence, users can potentially create costly mistakes.

Developing a design system was essential for the company to have consistency across their systems and be able to scale further and grow.

client1 client2 client3

Product Audit

hero

I reviewed the existing product with all of its various front-end design elements.

Currently, in the absence of a design system, the company puts extra responsibility on the user to figure out how to navigate a product instead of presenting them with an intuitive and unified design.

I established clear principles on how I think about the product and created guidelines for bringing those principles to life.

A few problems...

• Inconsistent design: Every user interface feels & looks differently.

• Longer lead times: Due to the lack of re-usable components, developers took longer to build & deploy new systems.

• Costly user mistakes: Confusing interfaces and lack of structure can enable mistakes which are costly to the company.

Business needs and Goals

Streamline the design process

Ensure it takes less time to build new modules for the system.

Reusable UI components

Enable developers to refer to it whenever they need to build something new.

Consistent look and feel

Eliminate design inconsistencies so the whole system has one look & feel.

Scalable design system

Increase the speed and scalability of design when using a design system.

Improved UX

Coherent design leads to improved user experience and less errors.

examplehome

Product Research

User Research

Understanding the users' needs, goals, and pain points through interviews and usability testing.

Audit of Design Systems

Analyzing the most popular design systems and annotating their best practices and documentation guidelines.

Heuristic Evaluation

Reviewing the existing product with all of its various front-end design elements to find inconsistencies.

Brand Research

Identifying the values through the mission statement and brand's visual style to ensure consistency across all design decisions.

Synthesis and Validation

Combining the insights and findings from the previous steps to create a comprehensive design system.

Design System Inspirations

I analyzed the five most popular design systems and annotated their best practices and documentation guidelines.

To name a few, Material Design (Google) has one of the most complete design systems, highlighting essential areas of usability and accessibility.

Specifications and documentation of Semrush are based on React guidelines, which Britannica’s engineers use to build their new systems.

Design Principles

Since the company’s software was constantly evolving, my goal was to create design consistency that could adapt to future changes quickly and seamlessly.

As a result, I followed atomic design principles to create simple and reusable components to later create more complex elements (molecules, organisms, etc.)

Atomic Design

Breaking down the interface into smaller, reusable components.

Typography

I chose the geometric sans-serif font - Poppins in three weights, bold, semi-bold and regular, because it’s highly readable and excellent for web and mobile.

typography

Color Palette

Our color swatches were broken down to base, primary, secondary, shareable, error, warning and success color swatches spread across several tints. This proved to be flexible enough for use but also scalable if needed for future expandability.

Buttons

The button components inherited identified earlier typography styles, color schemes, spacing, corner radiuses, and shadows for different sizes and states, making sure they can scale based on the interface guidelines.

The button components were designed in three sizes small, medium, and large, with the medium being the default size to address the business needs.