Building a design system for WYNE from scratch to create a shared design language and visual consistency among teams & screens.

Overview

Digital products are becoming more and more complex, which has inevitably led to Design Systems, a common practice in today’s leading companies. A design system is all about scaling and communication. A well-crafted design system establishes a common shared language among team members, and this language allows the team to collaborate more effectively. Many of them are adopting different variations of the concept in order to maintain design integrity and scalability across their ever-evolving products and platforms which are quickly becoming a cornerstone of an organization’s digital product strategy.

I started implementing the same strategy at WYNE by building a design system that can achieve user satisfaction, and consistency throughout the product and also make it easy for the team to design the product more efficiently without any hitches.

Responsibilities

As a UX/UI designer and a cross-functional team member at WYNE motivated the team about having our own design system.

Duties: UX/UI Design, Documentation, Accessibility design

Tools: Paper, Pen, Figma, Adobe Illustrator

Problem

Initially, WYNE application had no design system in place and mostly we relied on meetings, team syncs, and group decisions in order to maintain a cohesive UI and consistent UX patterns. Later I discovered the need for it to resolve some of the hitches that were affecting the product sustainability :

• Collaboration & communication

• Inconsistent styles

• Conflicting guidelines and direction

• Repetitive work

Process

To better understand the different problems in our product, we conducted interviews with people from different departments (Front end developers, Product Managers, stakeholders, CEO,…). Since we planned to release our WYNE app on both platforms (iOS & Android), I strongly believed that the key to our design system’s success was the unification of UX/UI across both platforms, allowing for a system that could be easily maintained on the design side as well as on the development side. After this initial research, I discovered that there is a need to identify all the design issues that were hindering our user acquisition.

Some of the key findings that I was able to discover in our product design are :

Redundancy & Inefficient: Not having a library of components for us means we’ll have to do repetitive design work to create our product screens. This also applies to the implementation, since developers would have to spend more time and effort to create new components which would also mean it’s not cost-effective.

Inconsistency & Rigidness: Our product doesn’t have consistency with respect to colors, typography, user flow, and other design elements like different component states which can have detrimental effects on the brand and overall experience as well.

Research

I began by mapping out all of our components, from simplest to most complex, and decided on optimal guidelines for design and implementation. Based on our needs, I prioritized some principles as the pillars of our design system.

• Finding the right balance between consistency and flexibility by providing the same experience across all platforms for our product.

• Having a consistent structure that has a library of illustrations that are user-friendly to strengthen the brand’s feel within the product and help convey complex ideas in a simple way. Apple has practically approached this with their Human interface guidelines which aligned with our visualization of providing a seamless experience for our users.

• Well-documented design guidelines and components would make it easy for the team members to communicate the product design in a more efficient way

• With the accessibility design, I need to accommodate everyone to create inclusive experiences as our product will be used by different types of potential users

I started analyzing the documentation of the guidelines and the components of popular design systems like Google, Apple, Airbnb, and Atlassian which have complex and well-documented design systems that served me as both inspiration and guide. Also, one of the best resources I found was the book Atomic Design, by Brad Frost which details the creation and maintenance of robust design systems.

Some of the design systems that I took as references

Based on our research, I started planning the structure of our design system. Since we planned to keep our design system pretty simple and intuitive inspired by the Human Interface Guidelines (Apple), I put together guides on the purpose of the product to ensure our team really understands what I am creating, so we can make more meaningful design decisions.

Brand Language & Identity: Documenting the essential elements of a style guide which include colors, fonts, icons, shapes, animation, and Illustrations, the use of the company logo is very important to establish rules and guidelines so that our team uses the right combination of elements. Creating a consistent visual design whether it’s a desktop version, or a mobile app will lead to a better customer experience.

Components: Components are the interface and UI elements – for example, call-to-action buttons, form fields, and checkboxes – that make up the heart of the design system. They minimize the effort required to build a product. By reusing as many parts as possible, you can speed up the workflow, save time and avoid duplication, as interface elements don’t need to be recreated from scratch.

Patterns: Design patterns, meanwhile, are the building instructions or recommendations that we need to use the components effectively across all our products. Standardized patterns also create familiarity, which means things will be quicker and easier for users. It helps them understand our services and establishes trust.

Define

From all the research gathered and building the structural guidelines of our app, I started following an approach that allows us to express the different states and interactions in a consistent way across the different platforms of our product. we can systematically generate a consistent color palette for all our use cases.

Colors & Typography: Our branding needed a fresh and revitalized look with new colors and font that can add value to our vision as well

Buttons & Components: Buttons we used in our app were mostly inherited from one parent button. I documented different button states using components. Since we went with a very minimalistic approach of having fewer elements, I didn’t annotate the buttons with standard design language, Instead, I used use case names.

Organizing and Categorizing all the components into separate sheets for example Layouts (wine cards, Home page, profile page…), Overlays (Sign in/ Sign up pop-ups), Images, and icons….. makes it easy for the designers to refer to when wanted as well as for the developers too.

Features

Accessibility: Any design system is only useful if it's accessible. While that perspective is typically user-focused, we felt it was two-fold. I wanted to make sure that we brought all of the internal teams along the journey by providing a clear rationale, and documentation on the UX team's efforts in creating an accessible system.

Working with our content writers and brand teams, we developed strategies for parsing all images and videos so that we can begin to provide alternative text, captions, and audio descriptions.

Intuitive: Creating an intuitive experience for the users was the foremost thing that I wanted to achieve from this design system since our app will be released in both iOS and Android versions.

Aesthetic: Stepping up our UI game is a must according to Jakob’s law, since the websites and applications our users use frequently have a modern visual look. i,e. clean and minimal design, rounded corners, vibrant colors, smooth shadows…I implemented the same approach inspired by Apple’s design system.

Impact

Working on our design system has been very challenging, but it has brought about many positive benefits for the company on different levels.

Development: This design system made the developer’s work pretty easy and time-saving. Communication with the design team went smoothly by speaking one language when discussing implementations.

Design: Having a ready-to-use library of components made creating high-fidelity interfaces a straightforward task by bringing designing interfaces from days to a couple of hours.

Experimentation: The design system allowed us to quickly build prototypes, test more ideas than before, quickly evaluate our hypotheses, and even create more variations to A/B testing of our app. It served as a cost-effective implementation.

User: Users liked the modern look of our app and also the simplicity of it as they navigated through the app. They liked the consistency of the flow which turned out to be more time effective as the users can relate to each and every page they arrive at.

Reflections

It had been a major learning ground for me as I was building the design system. I am not an expert in building design systems as most of the principles and techniques mentioned in this case study were learned on the go. However, I experienced many challenges that allowed me to improve my soft and hard skills. Here are a few of the challenges:

• Limitation of time and resources as we are a start-up and trying for our second phase of funding.

• Getting everybody on the same page and working together as a unit. Coordinating between designers, developers, and other stakeholders.

Future work

We will continue to maintain and upgrade our design system by adding new elements and components as our application will be continuously evolving in the future with new features.

Our main priority is to define accessibility requirements and include other accessible components in our application to assist users globally.