Veriscouts is a San Francisco based startup that allows peer-to-peer reviews for people in the arts and entertainment industries.
As part of my Internship at Veriscouts, Me and Jelani took upon creating a Design System for the platform.
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.
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.
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.
Some core principles we kept in mind during this process –
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, 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 informaton 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 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.
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.
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.