01.
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 the Headout’s platform to purchase tickets and is a major product that helps generate revenue.
Timeline
5 weeks
Platform
Desktop & Mobile
Collaboration
Design | Content | Growth
IMPAct4Nutrition
What
Creating a visual identity for India's first-ever nutrition-focused public-private partnership platform, IMPAct4Nutrition. A platform to engage the private sector in building a social movement to support the Government of India's National Nutrition Mission, it was launched in March of 2019.
My Role
I created a visual identity that would be used across various mediums and would represent the shared visions and goals of multiple stakeholders including Sight and Life, UNICEF, Tata Trusts, Royal DSM, Confederation of Indian Industry, and CSR BOX.
Creating Standard Components for ThomaCook Travel's Blog Design System
Thomascook travel'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 the Thomascook travel's platform to purchase tickets and is a major product that helps generate revenue.
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 Thomascook travel'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 ThomCook's cohesive design style and in turn its identity
Goals
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 Thomascook travel's design guidelines
Analyzing The Problem
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 Thomascook travel'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
Hyperlinks
Descriptors
List
Tabs
Read More Banner
FAQ's
Coupon Banner
Breadcrumbs
CTA
Related Read Banner
The Process
UNDERSTAND
What are our requirements?
DISCUSS
Discussing ideas and exploring them with design team
ITERATE
Designing components and creating subsquent guidelines of use
AUDIT
Auditing components which are not working or breaking in the blog system
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 ThomasCook’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 Thomascook travel'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.
.png)
Breadcrumbs
Tabs
Closing Notes
The blog design system is is built and moved to a different codebase for seameless execution. The redesign allowed 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 contributes to a lesser workload while working with the blog and in turn making it an easier experience for our users.
My Takeaway
Working with Thomascook travel'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 Thomascook travel's main platform.
This project helped me understand how design systems work as it was done alongside Thomascook travel'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.