1. Conflicting guidelines and direction.
2. Duplication of common components.
3. Inconsistencies across market websites and microsites.
4. Pressure for agile solutions without discovery and research.
5. Siloed teams working with disjointed communication.

We built Veriscouts design system from the ground up. It’s not just a design system for Veriscouts, but more than that it helps Veriscouts provide a new and enhanced experience for their users.  

This design system allows Veriscouts to create a consistent interface across many services, and simplify design team collaboration and maintenance of the platform.

A design system is a large set of reusable components combined with a set of rules, storing visual design information, like colours and spacing. It enables us to build consistent applications quickly.

Given the pace at which Verisocuts is growing, it becomes imperative to maintain good user experience. With every new feature released, the aim should be to be able to utilize as many existing components, so that we are not introducing any visual inconsistencies. Whether we are working with pixels, code, or words, it’s helpful to have design patterns in place — they not only save time, but also keep the UI consistent; thereby creating a better user experience.  
   
Instead of re-thinking the foundation of every new experience that we add on Veriscouts, the design system will now allow designers, developers, product managers, and as well as other stakeholders to focus on easily transforming ideas to live products.

Veriscouts products serve professionals in the arts and entertainment industries. We wanted to design and build our platform which is viable by as many people as possible, regardless of ability, age and geography.

We deliver delight and satisfaction through a clean and focused experience every time. By relying on existing, common design patterns that are intuitive in form, function and flow, we ensure a more user friendly interface for all.

We create familiarity and strengthen intuition by applying the same solution to problems across our platforms.

We followed the Atomic Design methodology by Brad Frost and mapped it in our design system spectrum.

Foundations are digital brand guidelines, which define typography, color palettes, icons, spacing, shadow, and information architecture of our design system. All foundations are atoms and are broken down into two levels.

Provide philosophical continuity but don’t provide any actual code, such as – how our text will truncate scrolling behavior, spacing, etc. so that designers will refer to it and respect it while creating new design patterns.

Cover guidelines for aspects such as typography styles, colors, icons, and imagery that help in formulating consistent components.

Vibrant colors and gradients follow the artistic spirit and are used to inform UI element states and media placeholders. The guide includes a wide typography scale to correctly structure information in the interface. Different elevation levels distinguish the working areas of the application

Components refer to distinctive user interface (UI) elements that are used over and over throughout the development of a product – normally actionable or sometimes just to convey meanings. However, components can either be Molecules or Organisms as there is a fine line of distinction between the two. A few examples include buttons, inputs, selects, toggles, lists, ratings, tags, etc.  

Each component is defined by titles, subtitles, images, action buttons and some optional text/elements.  

All these components are stored in a shared repository, which is a great way to build consistent UI and speed up the app’s development. Consistency in UI increases familiarity with the app for users, bringing down user confusion to a minimum when interacting with our product.

There are over 250 components with states of various complexity for controls, selectors, navigation, tables, to name a few.

After defining the basics, we collect all the base components, which are then used to build more complex, reusable, and scalable snippets called pattern or templates.

Patterns are used to show reusable combinations of components that address common user objectives with sequences and flows. These were developed in consideration of our global market rollout approach. While not every possible pattern was developed, this documentation served as the basis for our customers most common needs.

Documentation has its own page, where everything is stored and explained on the file documenting the style guide and all the components, making it easier for future designers to understand and use the guides and components created.

We’ve already been able to rely on this design system for some new upcoming features and will continue to do so. The design system provides Veriscouts with a shared understanding of the visual style and enables all of us to prototype and experiment with ideas in high fidelity faster and at a much lower cost.  
 
Lastly, the Veriscouts design system was built on the belief that we can never predict all future requirements, we can only prepare for it. It has so far been a fruitful experience with all the engineers and product managers understanding the value of our design system. We are looking forward to see where Veriscouts goes with this next.

Looking back at the successes and the losses, we learned some valuable lessons:

1. Design systems are evergreen.

They are living systems that require a dedicated team actively involed in their growth and maintenance. Facilitating adoption and cross-team buy-in, is a challenge worth undertaking that ensures we all are presenting a common design language, that is familiar and consistent for any person interacting with it.

2. Accessibility is MVP

Defining accessibility requirements and getting buy-in at all levels of the organization from the beginning, will directly impact those difficult features and enhancement conversations later down the line.