Creating Standard Components for Headout’s Blog Design System
Headout’s blog is an all inclusive source for information and inspiration for everything travel. From day trips to guides to theatre and more, the blog is packed with stories and pieces about various destinations around the world.The blog helps direct users to Headout’s main platform to purchase tickets and contributes to significant revenue generation.
Desktop & Mobile
Design | Content | Growth
While working on the design for the blog's landing and attraction pages, we observed discrepancies in the blog design style as it did not follow any particular design guidelines and had no standard components of its own. The blog had more than one color and font style that prevented it from being a unique cohesive experience.
Meanwhile, discussions about Headout’s main design system were happening simultaneously, therefore giving us context into possible solutions for the blog's design system.
The blog component redesign was driven by several factors :
• We observed repeated components that did not follow any guidelines and were causing problems with the
UX of the blog
• Different component styles were being used for a single-use case causing discrepancies
• There was a need for a design system of components, colors, and fonts
• To align the blog’s design with Headout’s cohesive design style and in turn its identity
The main goal here for us was to create standard components and guidelines for the blog (do’s and dont’s) that could be easily used by all teams working with the blog thereby having a design system with a fixed set of components, colors, and fonts across all use cases.
This would also help improve user engagement with a more cohesive design style across the blog.
The problem was clear. There were many components on the blog in various colors and font styles depending on the city it was categorised under. This needed a redesign to create a uniform system of components that would apply across the blog in its entirety.
So we can frame the problem statement as
“How might we create a system of components that are fixed across all use cases”
Exploring and auditing the numerous variants of components present on the blog that needed to be redesigned.
The blog system was relatively large with several components out of which only a handful had to be picked for the first version.
To get started, I went on the blog and took note of all the various components that were present and their different use cases on the blog. Once I had a clear idea of the main components, colours and fonts that were currently in use, I went forward with picking certain use cases and redesigning each one keeping in mine Headout’s design guidelines
Each city under the blog had a different color theme
A fixed colour palette across the blog following Headout’s design guidelines
Visual communication elements didn’t follow a single design style
One fixed design style for each use case
Different font styles and sizes across pages
Fixed font styles according to Headout’s typesetting
Component Breakdown & Guidelines
We then chose a set of components that most commonly appeared on the blog and were essential to user engagement. The components that were breaking in the system were also picked up to ensure scalability on mobile
Related Read Banner
Read More Banner
What are our requirements?
Auditing components which are not working or breaking in the blog system
Discussing ideas and exploring them with design team
Designing components and creating subsquent guidelines of use
Before getting started on picking and creating components, we analyzed what the main requirements were when it came to creating a design system for the blog.
Discussions with other teams about the blog design offered us insight and we came to a conclusion of what components need to be created first.
Each city under the blog had a different colour theme being used for its components
Visual communication elements like banners and coupons didn’t follow a single design style
Different font styles and sizes were observed across pages
We audited the components and then shortlisted a bunch for the first version of the design system that appeared most commonly on the blog and were essential to user engagement.
We laid down some design principles based on which we structured the entire design
DESIGN SYSTEM GUIDELINES
The components should adhere to Headout’s design system guidelines.
The colors fonts and sizes of these components should be uniform to be used across all pages and categories on the blog
The components should serve their original function with recall value after the redesign
There were very few iterations done as Headout's main design system was being developed alongside so we had a clear idea about the blog's design system.
Further Constraints Identified
One component with multiple use cases eg. hyperlinks
Some components worked on desktop while being unscalable for mobile
After designing the components, we worked on the design framework to define each component and their behaviour while being used as part of a product.
Shown below are a few examples of how we set the framework to explain the construction, states and variants of each component as well as ensure its scalability for mobile.
The blog design system is still in the process of being built and moved to a different codebase for seameless execution. The redesign will allow users to navigate and engage with the blog better while also increasing user engagement on the business side.
From a business perspective, a design system will contribute to a lesser work load while working with the blog and in turn making it an easier expereience for our users.
Working with Headout's blog was initially overwhelming due to the sheer amount of information on it but it is an excellent source of travel information and contributes to a huge chunk of sales on Headout's main platform.
This project helped me understand how design systems work as it was done alongside Headout's main design system redesign. It also made me understand the importance of creating a more cohesive experience for users by implementing a fixed design style.