Britannica Home Fashions, Inc.
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.
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.
Coherent design leads to improved user experience and less errors.
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.
Reviewing the existing product with all of its various front-end design elements to find inconsistencies.
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.
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.)
Breaking down the interface into smaller, reusable components.
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.
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.
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.