02. 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.

Timeline

5 weeks

Platform

Desktop & Mobile

Collaboration

Design | Content | Growth

Context

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.

Why Redesign?

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

Goal

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.

Approach

The Problem

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.

Problem Statement

So we can frame the problem statement as

“How might we create a system of components that are fixed across all use cases”

Initial Constraints

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.

The Solution

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

Problem Analysis

PAIN POINTS

NEEDS

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

Breadcrumbs

Coupon Banner

Read More Banner

Tabs

List

Descriptors

Hyperlinks

FAQ's

CTA

The Process

UNDERSTAND

What are our requirements?

AUDIT

Auditing components which are not working or breaking in the blog system

DISCUSS

Discussing ideas and exploring them with design team

IDEATE

Designing components and creating subsquent guidelines of use

Understand

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.

INSIGHTS

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

Audit

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.

Design Principles

We laid down some design principles based on which we structured the entire design

DESIGN SYSTEM GUIDELINES

UNIFORMITY

FUNCTIONALITY

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

Ideate

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

The Framework

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.

Closing Notes

Tabs

Breadcrumbs

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.

My Takeaway

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.

ReRight