Request Resume
Thank you! You will receive an email shortly with my resume.
Oops! Something went wrong while requesting resume.

Veriscouts

Project Brief
Role
UI/UX Design Internship
Project Type
System Design
Team
+
Status
LIVE

Systemizing and developing a design system for Veriscouts.

As part of my Internship at Veriscouts, Me and Jelani took upon creating a Design System for the platform.

Hello There!

Say hello to Veriscouts all-new design system that we’ve built 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.

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

What is a Design System?

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

Why build a Design System?

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 as well as other stakeholders to focus on easily transforming ideas to live products.

How did we come up with a brand new system?

Design Principles

Some core principles we kept in mind during this process – 

Inclusivity

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.

Simplicity

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.

Consistency

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

Structure of Design System

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

Creating Foundations

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

Principles

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.

Basics

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

Veriscouts Basics (Low Level): Typography
Color & Typography

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 informaton in the interface. Different elevation levels distinguish the working areas of the application

Veriscouts Basics (Low Level): Color
Veriscouts Basics (Low Level): Gradients
Grids & Spacing
Veriscouts Basics (Low Level): Grid + Spacing
Icons
Veriscouts Basics (Low Level): Icons
Component Library

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 called library, 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.

Veriscouts Components (Low Level): Core Components
Component Library

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

Pattern & Templates

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.

Veriscouts Basics (High Level): Cards

Completed Documentation

Documentation

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.

Veriscouts Documentation

What next?

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.

Thank you for viewing.