Help centre Redesign

Hostelworld

Duration

July 2024 (5 months)

Tools

Figma

Zendesk

Contribution

Project management

Sitemap

Wireframes

Theme setup

My Role

Project Manager

UI Designer

Competitor audit

Prototype

Project plan

Overview

The Hostelworld Help Centre serves as resource and support for travellers. This project redesigned the Help Centre to align with the updated brand look, creating a seamless user experience. A key focus was adding an intuitive “Contact Us” page to make support easier to find, improving navigation, consistency, and user satisfaction.

Challenges

Project scope

1.

Theme with limited editing options

2.

Low coding skills

3.

Problem

The original Help Centre page wasn’t effectively reflecting Hostelworld’s brand. Several key issues were identified: an outdated visual design, a lack of content hierarchy, unstructured and static information, hard to find support, and a poor overall user experience.

Solution

  • Update articles

  • Restructure page categories

  • Visual align the page design with the brand

  • Improve the mobile experience

  • Create a “Contact Us” page

  • Introduce translation to over 15 languages

Competitor audit

Hostelworld’s direct competitor’s customer support page were analyzed to identify trends in the market.

Specific elements such as page layout , content hierarchy, imaginary, the use of icons, tone of voice and colour were taken in consideration.

Style guide

Colours

Primary colour

Secondary colours

#121417

#2767E7

#FFFFFF

#7F32CD

Typography

#F6A90E

#F25621

#00E0CE

#CC0074

Neutral colours

Business Analyses

Homepage

  • The homepage was previously redesigned to highlight the social side of travel, focusing on helping users connect and share their experiences.

  • The redesign introduced a new visual identity, including a vibrant colour palette and updated brand elements.

  • The brand adopted a fun, informal tone of voice to better engage its audience and reflect a more community-driven tone.

Identified issues in the existing Help Centre

  • The hero buttons were outdated and didn’t match current priorities.

  • The hero section background image lacked relevance and emotional impact.

  • Orange elements closely resembled red tones, conveying error or warning states.

  • Content hierarchy and layout were unclear, making navigation difficult.

  • Overall, the design didn’t follow modern UX best practices, leading to a less intuitive experience.

Wireframes

  • Created low- and high-fidelity wireframes after reviewing the redesigned homepage and Help Centre.

  • Worked with customer service to define key sections and categories.

  • Designed a new “Contact Us” page based on project needs and competitor research.

  • Aligned designs with the updated brand, improving clarity and accessibility.

Prototypes

  • The Help Centre was structured around main support categories that align with both business goals and customer needs.

  • FAQs were placed at the top of the page to give users quick access to the most common queries.

  • A “Contact Us” page was designed and seamlessly integrated into the Help Centre, offering three contact options: support form, live chat, and WhatsApp

  • All design elements were selected in accordance with the Hostelworld design system.

  • The background image was replaced with a custom gradient suitable for all screen sizes to add uniqueness and improve responsiveness.

  • The “Submit Request” page was set as “Contact Us” page, featuring three action buttons: Form Request, Live Chat, and WhatsApp.

  • The Form Request was designed to stay open and be completed on the same page, reducing unnecessary navigation.

Theme selection

  • The Help Centre was built on Zendesk, limiting full design flexibility.

  • To assist internal implementation by the customer service team, a customizable theme was required.

  • I recommended the “Flatrock” theme for its flexibility and ease of use.

  • The final design was adapted to the theme, balancing brand alignment with technical constraints.

Insights

  • Updated the colour of the four main buttons to light gray to improve accessibility and contrast.

  • Utilized the theme’s “Promoted Articles” feature to highlight recommended content curated by the customer service team.

  • Ensured the Help Centre was translated into 15+ languages, supporting Hostelworld’s global user base.

  • Implemented accordions to organize content into expandable sections, improving visual hierarchy and scannability.

Takeways

  • The redesigned Help Centre now clearly reflects Hostelworld’s brand identity, using consistent assets, colours, and style from the homepage to reduce user confusion.

  • Updated articles, translated into 15+ languages by the customer service team, expanded the reach to a more diverse global audience.

  • The new “Contact Us” page provides customers with direct access to the right support channels, reducing miscommunication and improving issue resolution times.