Redesign

Hostelworld's Help Centre

5 months
Help Centre redesign interface
Tools
FigmaZendesk
Contribution
Project management | Competitor audit
Sitemap | Theme setup
Wireframes | Prototype
My Role
Project Manager | UI Designer
Help Centre redesign interface
Visit Website
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
  1. Project scope
  2. Theme with limited editing options
  3. Low coding skills
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.
Airbnb logo Booking.com logo Expedia logo
Style guide
Colours
Primary colour
#F25621
Neutral colours
#121417
#FFFFFF
Secondary colours
#F6A90E
#00E0CE
#CC0074
#2767E7
#7F32CD
Typography
Typography example
Title style 1 Title style 2 Bold text style
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.
Meet feature Hello feature Download feature
Identified issues in the existing Help Centre
  • Followed Hostelworld's Design System to select UI assets and design style.
  • 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 challenging.
  • Overall, the design didn't follow modern UX best practices, leading to a less intuitive experience.
Old Help Centre desktop design Old Help Centre mobile design Old Help Centre mobile design alternate view
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.
Wireframe 1 Wireframe 2 Wireframe 3 Wireframe 4 Wireframe 5 Wireframe 6
Wireframe 7 Wireframe 8 Wireframe 9 Wireframe 10 Wireframe 11 Wireframe 12
Wireframe 13
Wireframe 14
Wireframe 15
Wireframe 16
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.
  • 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.
Flatrock theme preview
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.
Takeaways
  • 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.