Building Vox's foundation,
one block at a time with TBH
INTERFACE
Vox
TEAM
Priyanka, Sagar, Sanjana
TOOLS
Figma, ZeroHeight
TIMELINE
January 2024 - May 2024
Overview
The goal is to create a design system that reflects Vox's brand values and identity across its different products to provide its users with a consistent and cohesive experience.
What is Vox?
Vox.com is a mass media company aimed at providing access to accurate information that empowers its users. With a target audience of individuals below the age of 35 years, Vox's mission is to help everyone understand our complicated world, so that we can all help shape it.
Unraveling chaos and complexity
It all started with the task of conducting a UI audit on an interface to catalog every distinct element used throughout the interface and to look for patterns and inconsistencies in how these elements are used.
Why did we need to deconstruct the existing block structure?
(according to Brad Frost
and we agree!)
To lay the groundwork for a sound design system
Ensure all interface components are accounted for
Promote consistency
ATOMS
MOLECULES
ORGANISMS
TEMPLATES
PAGES
And here's how we organized the different blocks.
We took screenshots of the elements using Brad Frost's Atomic Design concept and categorized them as navigation, color, typography, buttons, icons, field inputs, images, audio and video, interactive elements, and blocks.
*sneak peek into our UI inventory along with comments to mark all the elements that needed a fix
Based on the UI audit, we noticed some things worked well on the website...
-
The brand value of boldness is reflected throughout in terms of the content that’s posted
-
Pages were clearly defined along with sections
However, the audit also uncovered various problems with the interface.
These problems can broadly be classified as:
1. Incosistencies
2. Varying hierarchy
3. Accessibility issues
They seem like small problems so why do we need to fix them?
Inconsistencies disrupt the flow of user interaction, leading to confusion and increased cognitive load.
Users struggle to navigate interfaces, affecting task completion rates and overall satisfaction.
Poor user experience from inconsistencies can affect brand reputation and discourage repeat usage.
Turning chaos into coherence
In order to create a system for the Vox ecosystem, it is essential to lay down some design principles for our design system that help keep the team rooted in Vox's core values and ensure everyone is working towards the same goal.
BOLD
Every element in our design should serve a purpose, eliminating distractions to allow users to have an uninterrupted experience.
PURPOSEFUL
Design decisions should be focused on user needs and keep the interface simple allowing users to complete tasks with ease.
INCLUSIVE
The design should reflect and celebrate the diversity of our audience and welcome audiences of all backgrounds.
Introducing...
TBH (To-Be-Honest)
The unofficial design system for Vox!
Why "TBH (To Be Honest)" you wonder?
As we were jotting down ideas during our documentation phase, we brainstormed names for our design system. Vox is all about being real, transparent, and inclusive. TBH reflects this commitment perfectly. It's not just about making things look good; it's about being straightforward and accessible.
ATOMS
Keeping simplicity at its core, we began by defining foundations - the building blocks of our design system.
COLOR
Reflecting brand identity through color
TYPOGRAPHY
TBH has only 3 font styles and a maximum of 8 font sizes while still allowing some flexibility with additional font styles.
ICONS
CORNER RADIUS
Three size variations for flexibility of use across different devices
GRID
Accounting for desktop, tablet and mobile device dimensions
SPACING
Starts with multiples of 2, followed by multiples of 4 and finally multiples of 8
MOLECULES
Moving forward, we created components - the studs of the design system that connect different pages of the website.
+
BUTTONS
Three basic buttons with six variations gave us a combination of 135 buttons, demonstrating the power of Figma components!
=
Similarly, we created components for input fields, accordions, selectors, tabs, switches, icon buttons, and many more.
ORGANISMS
As a next step, we built mini structures using a combination of different atoms and molecules.
IMAGE CAROUSEL
ARTICLE CARD I
TEMPLATES
Lastly, we assembled components using auto-layout to create variations of flexible reusable design patterns.
TOP STORIES TEMPLATE
ACCESSIBILITY
Following through our principles, we accounted for accessibility every step of the way.
COLOR CONTRAST FOR ACCESSIBILITY
Once we had all the blocks ready, we published our UI kit on the Figma Community for public access.
USER TESTING
After having created the basic building blocks, it was important to test whether these blocks were usable. We tested our UI kit on our classmates by tasking them to access the UI kit through Figma Community and recreate any page of their choice on Vox.
Was the design system effective in communicating the brand identity and accessible to use?
Yes and No.
Test participants thought the brand values and principles were reflected through the design system. However, they faced difficulty in locating required components from the assets panel due to the difference in naming of elements. There were also few missing variants of elements and alignment was off in certain components.
We analyzed these findings and addressed each problem before publishing final edits of the design system.
A look at our classmate exploring the UI kit while redesigning an article page.
Crafting the user manual
We had the blocks and structures in place but how would one understand how to use it?
To make things easier, we developed a comprehensive set of guidelines outlining dos and don'ts, offering users both flexibility and guidance in their decision-making process.
For the purpose of documentation, we used Zeroheight - a one-stop solution for all design system resources.
Basic building blocks of the design system with usage
What is TBH?
Quick start for TBH
TBH DESIGN SYSTEM DOCUMENTATION - LANDING PAGE
An example of how elements are explained with different variations, usage and accessibility guidelines
TBH DESIGN SYSTEM DOCUMENTATION - TYPOGRAPHY PAGE
A way for everyone to make suggestions and meet the team!
TBH DESIGN SYSTEM DOCUMENTATION - CONTRIBUTIONS PAGE
Advocating our vision for TBH
What makes TBH unique? Why should you use it?
Our team put together a presentation showcasing TBH to pretend stakeholders. The presentation covered the following topics:
1. Introduction to design systems
2. Some myths about design systems
3. What is happening without a design system
4. Impact on users and designers
5. TBH's design principles, foundations and components
6. Benefits of using TBH
7. Demonstration of TBH
Pitching TBH to pretend stakeholders - our classmates and the professor
Reflecting through the project
Meet the team behind TBH - Priyanka, Sanjana (me) and Sagar!
01
Establishing principles is crucial because when faced with design dilemmas, having clear guidelines proved invaluable in aiding decision-making.
02
The power of Figma components and auto layout features that helped us create components with ease and flexibility. We understood how knowledge of these features improves the efficiency of designs significantly.
03
Highlighting the necessity of establishing guidelines for our components became evident during testing. Without a user guide, participants relied on assumptions while redesigning a page on the Vox website, resulting in a redesign that deviated from the original Vox website's appearance.
04
Creating a design system involves a lot of collaboration, and I learned firsthand how a team can work together effectively and efficiently by leveraging our strengths and communicating clearly when making decisions.