Problem statement : Addressing design inconsistency

Duplication of Effort

Designers were repeatedly creating similar design elements, wasting time and resources.

Inconsistent UI Patterns and Styles

The lack of a central design repository led to a patchwork of UI patterns and styles, creating confusion for users and undermining brand recognition.

Inefficient Design Process

Designers were spending too much time on repetitive tasks, diverting their focus from user experience and product solutions.

These challenges highlighted the need for a unified design system to streamline the design process, ensure consistency, and deliver a seamless user experience across Livspace's products and platforms.

Goals : Establishing a Unified Design Language

We embarked on the creation of two design systems to tackle the challenges of design inconsistency and streamline the design process. The goals for the design systems were as follows:

Establish a single source of truth for design elements

Create a centralized repository for all design assets, ensuring consistency across products and platforms, prevent duplication of effort, and make it easier for designers and developers to find the information they need.

Streamline the design process

Develop reusable components and establish clear guidelines for using them. This will reduce design time, improve efficiency, and make it easier for new designers to get up to speed.

Enhance collaboration between design and development teams

Create a common language and set of guidelines for design and development. This will facilitate communication, prevent misunderstandings, and make it easier for teams to work together seamlessly.

Improve user experience

Ensure a consistent and intuitive user experience across all Livspace products and platforms. This will make it easier for users to find what they need, complete tasks, and overall have a positive experience with Livspace.

Empower designers to focus on innovation

Free designers from repetitive tasks by providing them with a library of reusable components and guidelines. This will allow them to focus on creating innovative and user-centric solutions.

Reduce onboarding time for new designers and developers

Provide comprehensive documentation, enabling new team members to quickly grasp the design language and guidelines, minimizing onboarding time and enhancing their productivity.

By implementing two design systems, Livspace aimed to transform its design process and deliver an exceptional user experience across its products and platforms.

Design pattern analysis

• Conducted a comprehensive analysis of existing design patterns and components across various Livspace products to identify patterns and opportunities for consolidation.
  
• Collaborated with designers across teams to gather insights into the usage and effectiveness of existing design elements.
  
• Identified opportunities to streamline and standardize design elements, reducing duplication and ensuring consistency across products.
  

Exploration of existing design systems

• Conducted a thorough study of existing established design systems, including Google Material Design, IBM Carbon Design System, Shopify Polaris, Uber Base Design System, Airbnb DS, and Atlassian DS.
  
• Analyzed the strengths, weaknesses, and unique features of each design system to identify best practices and potential inspiration for Livspace's design systems.
  
• Evaluated the applicability of existing design patterns and components from these design systems to Livspace's specific needs and context.
  

Key Learnings

• Accessibility : Prioritize accessibility by adhering to WCAG (Web Content Accessibility Guidelines) standards and incorporating features like high contrast colors, clear typography, and keyboard navigation.
• Scalability : Embrace a modular design approach with reusable components and a scalable foundation to accommodate growth and evolution. Utilize responsive design principles and platform-agnostic components to ensure consistent user experiences across diverse platforms.
  
• Modularity and Flexibility : Design with flexibility in mind, empowering designers to customize and tailor components to specific needs. A comprehensive set of modular building blocks allows for assembling and configuring unique designs, fostering innovation and problem-solving without reinventing the wheel.
  
• Cross-platform compatibility: Ensure consistent user experiences across diverse platforms, leveraging responsive design principles and platform-agnostic components. This adaptability ensures seamless integration across web, mobile, and native applications, reducing the need for separate design solutions.
• Continuous Improvement : Establish a dedicated team committed to maintaining, updating, and iterating on the design systems to ensure they remain relevant, effective, and aligned with evolving needs. Gather user feedback and usage data to inform continuous improvement cycles and prioritize features that provide the most significant impact.
• Additional considerations : Consider branding, documentation, and governance as essential aspects, ensuring alignment with the company's identity, facilitating adoption and collaboration, and maintaining consistency and informed decision-making.

User research

• Utilised user research insights to understand user needs and pain points related to design inconsistency. This involved going through the surveys, interviews, and usability testing done earlier to gather insights into user experiences across various Livspace products and platforms.
  
• Analyzed user feedback to identify areas of friction and inconsistency, prioritizing the most common and impactful issues to address through the design systems.
  

Stakeholder alignment

• Conducted stakeholder workshops and presentations to gain buy-in and ensure alignment from key stakeholders across the organization, including design, development, and product management teams.
  
• Developed a communication plan to keep stakeholders informed about the progress and impact of the design systems throughout the project lifecycle.
  

Scope and goal definition

• Clearly defined the scope of the design systems, outlining the specific products and platforms they would encompass.
  
• Established clear and measurable goals for the design systems, aligning with Livspace's overall design strategy and business objectives.
  
• Translated the identified user needs and design opportunities into specific design system requirements, ensuring a user-centric approach.
  

Working document on design system strategy

Design system roadmap

• Created a comprehensive roadmap for the design systems, outlining the key phases of development, deliverables, and timelines.
  
• Prioritized the development of components based on their frequency of use and impact on user experience.
  
• Established a process for continuous improvement and iteration of the design systems based on user feedback and evolving product requirements.
  

Initial roadmap for design systems

Nest and Hive: Two design systems for diverse needs

We recognized the need for two distinct design systems to address the varying requirements of our internal and customer-facing products.

Nest

Our customer-facing design system, prioritizes simplicity and ease of use. It caters to a broad audience of users interacting with Livspace products and services. The design language is clean and modern, aligning with Livspace's brand identity. Components within Nest are designed to be intuitive and require minimal user effort.

Hive

Our internal design system, caters to Livspace's internal teams like interior designers, sales, operations, and fulfillment. It focuses on supporting complex workflows, facilitating daily usage, and aligning with the enterprise brand identity. Components within Hive are designed to be robust and efficient, with a focus on functionality and data visualization.

Shared Foundation with Specific Adaptations:
‍Both Nest and Hive share a core set of naming conventions for tokens and components, ensuring consistency and facilitating collaboration between designers and developers. However, the function and UI of some components may differ based on the specific needs of each system. For example, a button component in Nest has a simpler design and fewer variants compared to its counterpart in Hive, which needs to accommodate additional functions and data states.

Style guide

• Detailed style guides were created to define the design language for the two systems.
  
• These guides covered topics such as typography, colors, spacing, layout, and branding elements.
  
• The style guides served as a single source of truth for design decisions and ensured consistent implementation across products.
  

Component library

• A comprehensive library of reusable components was developed, encompassing UI elements like buttons, forms, icons, and navigation bars.
  
• A centralized component library was created to ensure accessibility and facilitate easy access for designers and developers.
  

Color contrast ratios

Color contrast is important for users to distinguish various text and non-text elements. We strive to meet the recommended contrast ratios shown below.

Touch target sizes

The recommended target size for touchscreen elements is 7-10mm. For most platforms, we considered making touch targets at least 48 x 48dp which results in a comfortable physical size of about 9mm, regardless of screen size.

Design Tokens and Themes

• Design tokens were defined for various aspects of the design language, such as colors, fonts, spacing, and shadows.
  
• These tokens acted as single source of truth for design values, ensuring consistency across all components and user interfaces.
  
• Using design tokens facilitated centralized management and updates, allowing changes to be implemented across the entire design system with minimal effort.
  

Application of design tokens

• The design systems incorporated a theme system, allowing for customization of the overall look and feel based on specific contexts, accomodating dark mode or user preferences.
  
• Themes were defined by creating variations of design token values, providing different visual styles without compromising consistency.
  
• The theme system enabled Livspace to create targeted user experiences for different audiences or products, while maintaining a cohesive brand identity.
  

Designing for RTL : Global adaptibility

Recognizing the diverse needs of our users worldwide, we prioritized Right-to-Left (RTL) support from the very beginning. This proved particularly impactful when we expanded our operations to Saudi market, allowing us to seamlessly adapt our design system and create a consistent, engaging experience for users accustomed to RTL layouts.

Font choice with global vision

‍We selected Noto Sans typeface, not just for its elegant design, but for its extensive support for regional scripts, including Arabic. This choice ensured clear and beautiful text rendering across a multitude of languages and writing systems.

Separate style libraries

To cater to RTL layouts without compromising our core design language, we established separate theme and style libraries. This allowed us to switch font families while maintaining design token consistency, preserving brand identity and visual harmony across different reading directions.

Dedicated RTL component library

Streamlining development for RTL contexts, we built a dedicated component library. This library featured components specifically designed and configured for right-to-left layouts, from buttons and navigation menus to form fields and text blocks.

View KSA website

Brand harmony, Creative flourish and compelling Communication

We recognized that building and maintaining a truly successful design system required collaborative efforts beyond just the design and development teams. We actively partnered with brand, creative, and marketing teams to ensure our design systems met not only technical requirements but also aligned with our brand identity and communication goals.

Co-creating Brand assets :
We partnered with the brand team to develop brand assets like logos for various internal products. This ensured cohesive visual identity and brand recognition across all platforms.

Building a Brand Style Guide :
Collaboration led to the creation of a comprehensive brand style guide that defined logo usage, color palettes, typography, and other visual elements. This guide served as a single source of truth for all teams working on branded assets.

Brand logos for Livspace product suite

Engaging Illustrations :
Partnering with the creative team, we developed custom illustrations for landing pages, empty states, and emailers within the design systems. These illustrations added a touch of personality and enhanced user experience across various touchpoints.

UX Copywriting :
We worked with the marketing team to develop consistent UX copy and ensure the design system elements were seamlessly integrated into marketing campaigns and promotional materials that aligned with the brand tone and voice. This ensured smooth communication of messages and a coherent user experience across all interactions.

Creative assets for various needs

Development

Component-Level Roadmap:
A clear roadmap was created to visualize the development status of each component, indicating its readiness across different platforms. This roadmap was prioritized based on project needs and facilitated efficient resource allocation.

Component wise status for each library

Continuous Feedback Loop :
Regular workshops and feedback sessions ensured the design systems met the needs of developers. Developers actively participated in testing and providing feedback on components and style guides, leading to technically feasible and user-friendly design systems.

Common language - Design Tokens :
Implementing design tokens maintained a common language between designers and developers. By ensuring consistency in variables and design values, design tokens reduced errors, streamlined communication, and enhanced maintainability.

Example of building a button component using common token language  

Documentation : The knowledge hub

We prioritized comprehensive, accessible documentation as the single source of truth for our design systems. We achieved this with the help of Zeroheight and Storybook. This included:

• Organize components and style guides : Explaining purpose, usage guidelines, behavior, accessibility considerations, and code examples for different platforms.
  
• Accessibility resources : Dedicated tools and best practices for achieving WCAG compliance.
  
• Versioning and Changelog : Tracking updates, deprecations, and changes.
  
• Live code updates : Changes made to the code in Storybook automatically reflected in the Zeroheight documentation, ensuring consistency and up-to-date information.
  

Adoption : Bringing systems to life

Widespread adoption was crucial for maximizing the benefit of our design systems. We fostered this through:

• Internal advocacy : Educating teams on the system's value and showcasing success stories.
  
• Training sessions : Equipping designers and developers with hands-on experience through workshops and tutorials.
  
• Feedback channels : Encouraging user feedback and suggestions for continuous improvement.
  
• Dedicated communication channels : We maintained a slack channel and Google group as a communication hub for system updates, announcements, tips, and discussions, increasing awareness and engagement with the design systems.
  

Contribution : Open doors for growth

We encouraged active contribution to the design systems through a defined contribution model. This model encouraged active participation and streamlined how users could enhance the systems:

• Tiered contribution system : Based on complexity and impact, contributions were categorized into different tiers, with clear guidelines for each. This ensured efficient review and integration of feedback and suggestions.
  
• Open-source components : We identified specific components as open-source, inviting other developers and designers to contribute their expertise and creativity.
  
• Recognition and appreciation : We actively recognized and celebrated valuable contributions, showcasing them in internal platforms and channels, building a sense of community and motivating further participation.
  

Tentative contribution process