top of page

TRIVAGO
Re-design
Hospitality (B2C)

MY ROLE

UX Researcher

UX/ UI Designer

TOOLS

Adobe XD

Adobe Illustrator

Adobe Photoshop

Microsoft Office Suite

SKILLS

User Research

Information Architecture

Interaction Design

Prototyping

User Testing

Branding

TEAM

Individual project

OVERVIEW

The project involved designing a mobile app that would be rolled out to retailers, as a part of the client's digitalization initiative. The app would primarily be used for placing and managing orders in a B2B setup. I was a part of the cross-functional team that designed and delivered this app. The project involved conducting user research for, and designing with, accessibility considerations for users who are old (60+) and digital immigrants.

PROBLEM​

A large portion of the market still constituted of offline booking and the existing users did not seem too happy about their experience with the platform. 

There were complaints from users that the trivago platform was confusing and not easy to use. They did not go back to the platform after a couple of tries. Instead, they preferred booking offline or directly via the booking portals available.

goal.png

GOAL

To identify issues with the current design and propose a data-driven solution that aligns with trivago's mission

It was essential to re-design the underlying process to be in line with the way the user thinks and that fulfills the mission.

plan.png

APPROACH

Conducted usability testing and exploratory research, re-designed the platform and evaluated the effectiveness of the proposed solution

Planned and conducted testing and research based on trivago's mission statement. Generated insights to identify gaps, pain points, and user needs. Re-designed the company's brand identity and marketing strategy, information architecture, user flows, user interactions, and visual design and translated them into tangible solution artifacts such as branding and marketing collaterals, web, and mobile apps. Subsequently, validated the re-designed solution with the users.

IMPACT

Users successfully adopted the app across 3 months

~50,000

THE PROCESS

Usability Testing

Purpose of the test was to

  • Evaluate usability on web and mobile

  • Identify pain points

  • Set the stage for user research

Conducted via prototype test runs and moderated interviews

Created a task list and test brief

N = 19

(n = 9 for web)

(n = 10 for mobile)

Outcome

  • Only 5 participants were able to successfully complete all tasks

  • Participants tend to abandon the platform during decision making 

  • Evident confusion in making a choice

  • Process/ user flow misalignment with users' mental model

Secondary Research

Referred to literature and articles

On accessibility and designing for old users

Analyzed relevant examples

Of e-commerce and retail mobile apps (B2C and D2C) especially in Vietnam

6209999.jpg

Charted domain considerations

By examining business operations and the 'Sub-distributor-to-Retailer' supply chain dynamics.

flow-chart.png

Crossrelated learnings

With existing functionalities to establish a baseline and formulate the primary research.

Primary Research

The purpose of the research was to

  • Establish a comprehensive understanding of the problem space

  • Understand the users' mental model and status quo regarding the ordering process, their needs, and their experiences

  • Understand what works, what are the issues, and what are the users' expectations from a digital system.

Achieved via

• Semi-structured interviews and surveys

An interview guide was created to assist with the process. I moderated and took notes for all of the interviews.

N = 12

• Surveys

An interview guide was created to assist with the process. I moderated and took notes for all of the interviews.

N = 36

Journey Map

Data Analysis

Insights board

Vision

impairment

with age

One hand to hold the screen, finger of other to tap on the screen

Comprehension may get slower with age. Recall can take even longer.

Shaky hands, accidental taps/ touches, fat finger delays

Easier to say product names than type them out (hence ordering on call easier)

Skeptical of action-to-be-taken and unsure of the outcome

Low literacy and low digital / technical know-how

Multiple possible workflows from one place can be confusing and overwhelming

Intimidated by mordern UI aesthetics. Find it complex.

Familiarity with

e-commerce platforms such as Lazada and Tiki

Some design considerations..

Interface

  • Simplification over modern UI aesthetics

  • ​Larger font sizes

  • Leverage font-weight in establishing hierarchies

  • Larger button sizes (especially CTA)

  • High contrast - maintain a minimum of 5.3:1
    (balancing branding with contrast requirements)

Feedback

  • ​Cues, reminders, and alerts

  • Pairing images and icons with appropriate text

  • Confirmations/ double confirmations for critical actions

  • System status visibility and clear feedback for every action

Navigation

  • Simple and straightforward user flows- Focus on the active task, limited secondary exposure

  • Progressive disclosure

  • No complex and quick gestures. Only single-finger gestures

Ordering

  • Voice recognition enabled searching and adding products to order

  • Prioritization of frequently ordered items

Prototyping

Lorem Ipsum

Lorem Ipsum

Iteration 1

Iteration 2

Final High Fidelity Design

Completed in sprints and followed an iterative process

Each section and flow was reviewed with the user representatives for feedback and updated accordingly

High-fidelity clickthrough prototype

  • Created using Adobe Creative Suite

  • Concurrent clickthrough made available in Invision to support operational needs

  • Handed over to the development team along with design specifications

Responsive production scale design

Works with various screen sizes for mobile and tablet devices

Lorem Ipsum

Lorem Ipsum

For different form factors

Lorem Ipsum

Choose SKUs

Lorem Ipsum

Submit inquiry

checked.png

Lorem Ipsum

Confirm order

Lorem Ipsum

Manage order

Lorem Ipsum

Receive order

(Mockups representing process. No resemblance to actual)

Validation

To evaluate effectiveness and usability

  • On various screen sizes and devices

  • Spot gaps and issues, if any

  • Determine readiness for UAT

Conducted via prototype test runs and moderated interviews

Created a task list and a moderator's guide for debriefing and assistance during the tests.

N = 4

Outcome

  • Participants were able to successfully complete all the tasks

  • Found the design solution familiar, simple, and not intimidating

  • Expressed willingness to adopt

Delivery

User Acceptance Testing

  • Wrote functional/front-end UI test cases

  • Checked for gaps in approved and developed versions

  • Log bugs- review and resolve with the help of the dev support team

  • Determine the scope for successive releases

Final version

  • Cleaner release with minor bugs

  • Presented to stakeholders for approval and launch

REFLECTION

track.png

Limitations and challenges

  • Lack of direct access to users

  • The majority of users were not acquainted with the English language

  • Users were digital immigrants

next-button.png

Next steps

  • Build on the existing application to fulfill the next set of requirements

  • Chart a UX plan for the next relsease

open-book.png

Takeaways

  • Try to leverage alternate routes of data collection while dealing with hard-to-access user populations, such as representatives and domain experts.

  • Iterative sprints save time and effort in the long run. While working with users with special needs, it is even more important to involve them early and seek feedback throughout.

bottom of page