Challenge

Moving can often seem like a continuous stream of stressful events. From the repetitive process of reserving a truck to the challenges of modifying bookings, coordinating with moving assistants, and handling a large truck, do-it-yourself movers using U-Haul can find the moving experience both disjointed and frustrating.

Objective

This all-in-one virtual assistant redefines the entire moving journey. It offers responsive voice-guided features that optimize tasks, enhance coordination, and provide real-time alerts and guidance. It's particularly adept at intelligently addressing complex requests, which is a valuable asset for movers under pressure. By doing so, it significantly boosts the efficiency and overall enjoyment of the moving process while simultaneously alleviating driving concerns through hands-free, real-time support.


Travelwits

Redesigning the Interface to Enhance Usability and Discoverability for Multi-Module Trip Booking

TIMELINE

2024 Aug - Oct ( 7 weeks )

TEAM

Solo Designers in the team

TOOL

Figma, Figjam, Woopra, Google Analytics

MY ROLE

UI/UX Designer

SUMMARY

During my internship at Travelwits, I undertook the challenge of self-defining and exploring projects aimed at improving the usability and aesthetic appeal of the platform. Travelwits is a multi-module trip booking platform that connects travelers with comprehensive trip planning tools. The platform is designed to support travel agents in managing complex tasks such as creating customized travel packages, handling group bookings, managing special requests, and coordinating multiple travel components, including flights, hotels, car rentals, and tours. Additionally, Travelwits aims to facilitate detailed itinerary planning and provide comprehensive reports and analytics.

My primary objective was to enhance the user experience by addressing key issues related to information discoverability, search efficiency, and overall UI refinement. The project scope included:

Improving the discoverability of key features

Ensuring that users can easily find essential tools and options.

Enhancing the searchability of information

Streamlining how users locate and filter information to meet their specific needs.

Refining UI components within the current layout

Aligning with Travelwits’ branding while enhancing the platform’s visual and functional appeal.

This project demonstrates

A self-initiated, user-centered approach to tackle interface usability issues where I championed the redesign of critical interface components that can be reusable across multiple platforms and adapt to different combinations of information context.

A focus on consistent design patterns to present rich information in a hierarchical manner and progressively disclose features and information according to user research insights.

FINAL SCREENS

Hotel search result page

Client home page

design pain points Discovery

Although the project lacked a well-defined scope initially, I began by conducting thorough research into the current platform.

This included:
UX Audits: Identifying usability bottlenecks and inconsistencies in design patterns.
Stakeholder Interviews: Engaging with travel agents to gather insights into user pain points and workflows.
Opportunity Mapping: Pinpointing areas where design interventions could improve the platform’s functionality and user satisfaction.

Heuristic evaluation and data analysis using Woopra and Google Analytics

Define and scope

Quantitative data analysis and qualitative insights from interviewing and usability testing revealed several critical findings:

Searchablity and Discoverability of information

Insights from the UX audit and user feedback indicated that while the platform supported primary functions like search and filters, travel agents faced significant challenges in quickly narrowing down and finding results due to poor interface design.

Key features aren’t maximized its utility

Brochure was reported as as the most like/useful feature through interview, however based on data only 30% users check the brochure after adding the brochure, also I discovered that 2/3 interviewees have trouble knowing where to find the saved brochure after adding it.

The design scope focused on enhancing the current UI to improve information discoverability while addressing UI constraints. Key components included filters, feature discoverability, and text information hierarchy.

Search and filters

Feature discoverability

Information hierarchy

UI Constraints: Rich and multi-layered information must be displayed all on one page, with the inability to change the current layout due to technical restrictions.

design

01/ Redesigned Filter and Sorting Sections

Redesigned filters across various booking modules to help users quickly narrow down search options. I considered:

Establish Consisteny

Implement a unified design pattern for filters and sorting options throughout the platform.

Select Appropriate Filter Types

Tailor filter types based on the context and user needs.

Enhance Usability

Ensure filters are discoverable, easy to use, and logically organized.

02/ Creating a Visual Hierarchy of Features

Improved accessibility and usability for supplementary features such as "View Map," "Add Compare," "Add Brochure," and "Ask ChatGPT" by applying the following strategies:

Space Utilization

Effectively utilized available screen space by integrating features like brochures and compare options directly into the filter bar. This made these features more accessible without overcrowding the interface.

Change of States

Color-coded dropdown buttons are used to visually distinguish state changes, improving user awareness.

Progressive Disclosure

Organized supplementary features to appear contextually or as users engage deeper with specific tasks, minimizing cognitive load while preserving feature discoverability.

Improved Hotel Information Cards and Nested Navigation

I considered:

Button Hierarchy

Differentiating button levels using color and size to make primary actionable buttons more prominent.

Visual Separation:

Applying visual emphasis to distinguish primary buttons, secondary buttons, dropdowns, and expandable options based on their purposes.

Navigation Management

Enhancing the nested navigation hierarchy to make information more digestible and findable.

ui components & Design system

REFLECTION

Balancing Industry Standards with User Needs
While benchmarking against industry leaders like Google Travel and Expedia provided valuable insights, it was critical to adapt these best practices to Travelwits’ unique user requirements. For example, while Google Travel simplifies its interface by omitting certain details, Travelwits agents require access to more comprehensive information to efficiently narrow down search results. This highlighted the importance of thoughtfully applying progressive disclosure, ensuring functionality isn’t sacrificed for visual simplicity.

Considering Diverse Use Cases and Systematic Thinking
Design decisions were carefully aligned with the platform’s context, such as maintaining appropriate text lengths and word counts to support scalability and consistency across various use cases.

Feedback Integration
Continuous feedback from travel agents and internal stakeholders played a pivotal role in refining the designs, ensuring they met both user needs and business objectives.