top of page

Keeping it Fab: How Design Consistency Makes Hospitality Shine

FABLAB

COMPANY

FABHOTELS

PROJECT

DESIGN SYSTEM

ROLE

UX DESIGNER

5 MONTHS

TIMELINE

OVERVIEW

I worked with FabHotels to create their Design Language System (DLS) as part of my dissertation research project at NIFT, Delhi. The project addresses the design team's challenges of creating unique components for each iteration, leading to inefficiency, inconsistency, and usability problems.

The research involved studying existing DLS models, hospitality design trends, and FabHotels' specific design needs. Through literature reviews, competitor analysis, user research (heuristic evaluation, interviews, persona mapping, etc.), and usability testing, the study identified the need for a DLS to streamline design, improve collaboration, and enhance user experience. The research proposes a DLS implementation with a component library, style guide, collaboration tools, and ongoing usability testing.

This resulted in a tailored DLS for the FabHotels app, demonstrably improving design efficiency by
75% through usability testing. This project offers valuable insights for organizations building design systems and contributes to the field of design and user experience.

Definition of DLSpng

PROBLEMS IDENTIFIED

DESIGN SILOS & INEFFICIENCY

FabHotels' current design process is inefficient. Designers build screens and features independently, leading to inconsistencies in the user interface (UI) and longer development time.

UI INCONSISTENCY

FabHotels' app suffers from inconsistent UI elements and interactions. This creates a confusing and frustrating experience for users, hindering navigation and overall usability.

RESEARCH
QUESTIONS

01

What are the key design principles and guidelines that should be considered when creating a DLS for a hotel booking mobile application like FabHotels?

02

​How can user research and feedback be incorporated into the development of a DLS to ensure a seamless user experience?

03

What are the challenges and opportunities that come with implementing a DLS, and how can these be addressed?

04

How can a DLS for the FabHotels mobile app be designed and developed in a way that promotes consistency and scalability across different devices and platforms?

METHODOLOGY

Literature Review

To understand design patterns their relevance and guidelines on how to build an accessible system that works for all.

Comparative analysis

Comparison of well- established design system (Atlassian, Google, Apple, IBM etc) to understand the how design systems behave and perform.

Benchmarking

With TravelPlus which helped me understand parallalely how a DLS effects the same team in different ways.

Market Study

To see how consumer patterns have led us to design trends like sustainability, minimalism, multi-functional design etc.

Composition of DLS

Based on Competitor analysis & Benchmarking, deciding what will be the components of the DLS

In-depth interviews

To comprehend user needs, preferences, pain points, goals, frustrations etc.

Analysis

Analysis of the interviews through persona mapping & empathy mapping.

Usability Testing

To get a quantitative gist of how the DLS has improved the efficiency.

OBJECTIVES

01

To study the current design trends in the hospitality industry and their impact on mobile application design.

02

To identify the key components of a Design Language System (DLS) and their importance in creating a cohesive and consistent user experience.

03

To analyze the user behavior and preferences while interacting with FabHotels' design process in order to identify areas for improvement.

04

To develop a comprehensive Design Language System (DLS) for FabHotels' mobile application.

INSIGHTS FROM LITERATURE REVIEW

2_edited.png
4_edited.png

MARKET STUDY

To understand what’s popular in the hospitality industry and their impact on mobile application design, several design trends were studied. These are some trends which may be relevant to keep in mind while designing the design system:
 

  • Green and earthy color schemes that evoke a sense of nature and sustainability.

  • Use of eco-friendly icons and visuals to convey sustainable practices.

  • Integration of energy-saving features and options to promote responsible consumption.

  • Inclusion of personalized sustainability recommendations and tips for guests.

  • Clean and uncluttered layouts with ample white space to enhance visual focus.

  • Streamlined navigation and intuitive user flows for easy exploration and booking processes.

  • Use of minimalist typography, focusing on legibility and readability.

  • High-quality imagery that highlights key features and amenities while maintaining simplicity.

  • Reduction of unnecessary elements and visual distractions to enhance usability

COMPETITIVE ANALYSIS & BENCHMARKING

Atlassian Design System

Human Interface Guidelines

Material Design

Carbon Design System

COMPOSITION OF A DLS

FOUNDATION

Color palette, Typography, Logo, Iconography, Illustrations, Spacing, Elevation

COMPONENTS

Navigation, Buttons, Comment, Input, Inline, Lozenge, Menu, Onboarding, Page, Pop-up, Tags, Text area, Progress Indicator, Spinner,

PATTERNS

Recurring design solutions that address common design problems, such as onboarding, search,feedback, First impressions, Forms, Messages

CONTENT

Inclusive language, Grammar and spelling, Vocabulary, Voice & tone principles, Writing guidelines and styles

IN-DEPTH INTERVIEWS

TOOL

30 minutes In-depth Interviews of 15 employees from FabHotels HQ (5 people from each cohort) selected via purposive sampling

OBJECTIVE

Understanding user roles, journey, pain points, gain points, relevance of DLS in their process, impact and importance of Design System in their work life.

SAMPLE DESIGN

All the users are employees of FabHotels who work on two main products- FabHotels and TravelPlus.

COHORTS

Design team (Cohort 1), Development team (Cohort 2), Management (Cohort 3)

ANALYSIS

Based on the interviews, for each cohort, a persona was mapped to understand in-depth what the user needs and how can I help with the DLS. With that, empathy mapping was also incorporated. Here, I'm explaining one persona in detail, to see the rest, please refer to the research document.

JUNIOR JUHI

Age: 23 Years old
Profession: Junior UX Designer
Education: Master of Design
Location:
Delhi NCR, India

SENSES

SEE

Staring at the blank canvas of the design tool, feeling overwhelmed by the scope of the project.

HEAR

Listening to the feedback from stakeholders & users, trying to understand their needs and requirements.

THINK/FEEL

Feeling the need for structure & guidance, craving a set of established design principles to follow.

BEHAVIOURS

ASKING QUESTIONS

Seeking clarifications on requirements and feedbacks

ITERATING

Going through multiple rounds of design revisions to meet all requirements

COLLABORATING

Working closely with stakeholders, developers, & other designers to create successful products

RESEARCHING

Conducting user research & market research to inform design decisions

DOCUMENTING

Keeping detailed notes and design files to track progress and make revisions

FEELINGS

Happy

When coming up with an innovative design solution that meets all requirements

Anxious

When the deadline is approaching & the design is not done yet.

Frustrated

When the design is not meeting user's need and requirements.

Stressed

When working on multiple projects with competing  deadlines.

Confident

Receiving positive feedback from stakeholders and users.

GOALS

CREATING A SUCCESSFUL DESIGN

Wants to create something that is effective, efficient and meets all requirements

BUILDING A DESIGN SYSTEM

Hopes to create a set of design principles and template that can be used across multiple projects

IMPROVING USER EXPERIENCE

Wants to create experiences that are easy & fun

MEETING DEADLINES

Hopes to finish work on time & within budget

RECEIVING POSITIVE FEEDBACK

Hopes to receive recognition for successful design work

PAIN POINTS

Lack of guidance

High pressure

Time constraints

Unclear feedback

Design fatigue

Creative block

OTHER PERSONAS

The other two personas based on two cohorts are available in the document in detail.

Developer Dev

Age: 27 Years old
Profession: SDE II
Education: B. Tech (Computer Science)
Location:
Delhi NCR, India

Manager Mohit

Age: 38 Years old
Profession: Chief Technology Officer (CTO)
Education: M. Tech (Computer Science)
Location:
Delhi NCR, India

Age: 23 Years old
Profession: Junior UX Designer
Education: Master of Design
Location:
Delhi NCR, India

USABILITY TEST

Task: The participants were instructed to recreate a search page based on specific requirements provided. They were encouraged to use their team's design processes and resources to complete the task.
 

Result: All participants were able to complete the task successfully, indicating that the DLS facilitated effective design implementation. The average time taken to complete the task was 42 minutes, ranging from 35 to 50 minutes. Without the DLS, it takes 3 hours (180 minutes) to complete this task. This indicates that the DLS helped streamline the design process and enhance efficiency.

 

RESULT

Based on the usability test, it was proven that the design system helped the team by increasing the efficiency by 75%. Apart from that, the documentation has helped a lot of people building their own design system. Due to NDA and privacy restrictions, visuals of final design system can't be displayed here but you are encouraged to explore the full documentation to see each component in detail.

​

 

FOR YOU

Enabling content discovery through AI- Driven content curation

bottom of page