Travex | UX and product design

A dashboard web app for the unique lifestyle needs of digital nomads, or expats.

Background

This personal project came out of a need I saw for a web application that helps location-independent workers, known as digital nomads, with their unique travel needs like finding airline tickets, accommodation, and working spaces in their every day lives as expats.

Digital nomads frequently use a laptop as their primary device for work and other tasks. Travex aims to integrate more effectively into their lifestyles by offering a desktop web application which they can use to find travel and work offers that are tailored to their unique lifestyles.

Needfinding research

Understanding the user and problem space

By leveraging a triangulated research approach, I conducted primary and secondary research remotely to help define the user space and understand their needs and environments:

1. Secondary (desktop) Research

I started by gleaning from the research conducted about location independent workers and people working abroad from various online sources.

Findings overview:

According to a 2018 census done by MBO Partners, 54% of digital nomads travel full-time and 70% of those will travel to 5 or more countries a year.Even during these pandemic times, many digital nomads will move countries whenever a more beneficial opportunity arises. This proves that easy access to airline tickets should be a priority for this product.

It was also found that 51% of digital nomads will live in non-permanent residences. As we will see in the primary research, this creates a unique problem for many since 52% of digital nomads rated finding a reliable WiFi connection as the main challenge of a nomadic lifestyle (2021 census, Project Earth). This vital need in their professional lifestyles isn’t addressed in traditional travel applications and presents us with an opportunity to create a solution.

2. Semi-structured interviews

Now that I had a better understanding of the potential user group, I spoke to people who identify as digital nomads in the top 3 countries where this user group was found to be located.

Learning goals

  • Which features are most essential to digital nomads?
  • How do digital nomads make their travel plans?
  • How do users typically book airline tickets and accommodations?

Research methodology

  • Primary recruiting criteria: Location
  • Interview: 30 min semi-structured interview via Zoom.

Participant 1 | Indonesia

"I usually look around on apps until I find a good deal."

Nationality: American
Job: Content creator
Time abroad: 3 years
Place of work: Cafes

Participant 2 | Vietnam

"I need stable Wi-Fi to contact my work."

Nationality: British
Job: Online teacher
Time abroad: 2 years
Place of work: Office

Participant 3 | Thailand

"I like to take impulsive weekend getaways."

Nationality: South African
Job: Virtual assistant
Time abroad: 1 years
Place of work: Home

Participant 4 | Vietnam

"I need stable Wi-Fi and privacy to teach."

Nationality: American
Job: Online teacher
Time abroad: 3 years
Place of work: Home

Participant 5 | Vietnam

"I will often go somewhere if I see a cheap flight."

Nationality: South African
Job: Web developer
Time abroad: 2 years
Place of work: Cafes

3. Survey

Next, I conducted a survey study to evaluate if the findings from the interview study are generalisable and to learn more about the travel behaviours of participants.

Learning goals

  • What factors do users consider when choosing a working space or accommodation?
  • How do digital nomads make holiday or travel plans?

Method and recruiting

  • Used Google Forms to conduct a survey with a geographically diverse participant group.
  • Recruited participants from social media groups aimed at digital nomads.
An affinity map diagram showing the themes from the UX research.

Synthesising the Data

After conducting the qualitative studies, I conducted a thematic analysis of the findings using affinity mapping to look for trends.

Affinity mapping process

  • First, I added added all the research findings on yellow notes using Miro.
  • Next, I clustered them using green notes to indicate trends.
  • Finally, I grouped the trends in areas of interest using pink notes.

Findings highlights

“I'll often take last minute weekend getaways to neighbouring countries if I come across a suitable airline deal.”

— Participant 5

Finding 1

Impulsive traveling

A large portion of participants planned holidays less than one month in advance.
Furthermore, if the destination did not require a visa, 35% of them had a tendency to take impulsive weekend getaways if they found cheap airfare or similar offers.

“I frequented Traveloka for a few days until I found a good deal.” — Participant 1 

Conclusion 1

If the opportunity presents itself, users showed that they enjoy taking spontaneous holidays.

Therefore, highlighting special destinations and offers might inspire users to travel and thus purchase tickets.

Finding 2

Make their work easier

Participants indicated that they needed simple data visualisation that informs their work needs.

Users wondered about:

  • A stable WiFi connection.
  • The workspace’s distance from user's home.
  • A comfortable working environment.
  • Private working spaces.

“I wish there were reviews of the landlords and facilities on the accommodation apps.” — Participant 4

Conclusion 2

Card designs for the accommodation and workspace sections might offer opportunities for representations of information that users care about most.

The product space

A feature prioritisation matrix to guide the UX designer and stakeholders on which features to design next.

Features that meet meets the users' needs

I started by brainstorming various features that might support the end user's needs by using the insights from the research that I conducted.

Then, I used a value/complexity matrix to evaluate which features to prioritise based on the potential value that they might add compared to the complexity of implementing them.

Brainstorming design alternatives

Next, I used some sketching techniques like Crazy 8s to explore solutions for a dashboard structure.

The physical constraints of a dashboard interface proved to be an interesting challenge but I aimed to find a solution that prioritises the airline tickets feature based on the research findings..

Brainstorming designs with Google's Crazy 8s sketching technique.

Choosing one to prototype

In the final detail sketch I combined the ideas and included search functionality and the ability to add bookmarks on the world map for favourite destinations in order to encourage user engagement.

Conclusions

  • I will give the airline ticket section the majority of the screen area and group all the related elements together.
  • I will use a world map design to highlight special destinations.
  • With a compact card design, I will keep other elements like the accommodation and working spaces on the side.
Putting it together with a final sketch of the user interface.

User Flow

After gaining a bit of clarity regarding the features and constraints of the interface, I proceeded to create a vertical user flow diagram that maps out the primary task that I'll be designing for during this sprint.

Users can follow the login flow and continue by searching for an airline ticket and completing the purchase with a native card payment checkout flow.

User flow diagram

Designing the interface

Early Stage Prototyping

It is important to evaluate design decisions as soon as possible. Therefore I created digital wireframes to use for a rapid online moderated usability test with the aim of learning more about the users' mental models and getting qualitative feedback on the current iteration.

Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe

Qualitative Evaluation

Scenario:

"You are a digital nomad living in Vietnam. You are attending a conference in Perth in two weeks. Use Travex to book a cheap airline ticket with standard luggage."

Performance Measures:

  • Task success rate
  • Interface learnability
  • User satisfaction

Method:

  • Recruit 5 participants to complete the task using Lookback on their computers and giving them control of the mouse.
  • Conduct first impressions test on each screen.
  • Use a think-aloud protocol.

Finding 1

Task success rate

35% of users skipped over the required CVV text field while other information was deemed to be autofilled.

Solution:

I will increase salience by adding a tooltip next to the CVV field. This also shortens the gulf of execution by illustrating which numbers we require.

Finding 2

User values: Security

Because this application is always open on the users' browsers, there was a concern that someone else could make an unauthorised purchase.

Solution:

I will send an OTP to the user's email (as travellers might change cellphone numbers frequently) to authorise any purchases.

High-fidelity prototype

Using Figma, I increased the fidelity of the prototype to facilitate more realistic data and optimised the user experience using the user feedback from the previous iteration and conducting heuristic evaluations.

Scenario:

You are working in Vietnam, and you need to return to Perth indefinitely. Buy a cheap ticket on Travex and add standard luggage.

Travex high-fidelity prototype

Users have the flexibility to quickly log in using email or social login.
Creating a new account will involve following the authorising process for their chosen social networking service.

Travex high-fidelity prototype

Users will see this home screen dashboard when opening their browsers.

The airline ticket search bar is auto-completed for a one-way ticket with the departure airport that is closest to the user's current location and the current date. These can be changed using text fields with suggested results and drop-down menus. The user then enters their destination—Perth (PER).

All the form elements should be responsive and expand to accommodate a variety of content.

Travex high-fidelity prototype

Users will see the 3 most relevant results sorted by their preference with the search bar available to improve tolerances and perceptibility.

To improve comfort and accessibility, the pagination was improved by adding a text label to the buttons because the tap target is far away from the initial cursor position.

The ticket components will be responsive and grow to fit the content.

Travex high-fidelity prototype

On the selected ticket, users can add extra luggage with the price amended in line.

Travex high-fidelity prototype

Next, the user will add the passenger details. More passengers can be added using horizontal pagination if required.

Travex high-fidelity prototype

Now, the user will be taken to the checkout funnel with an order summary on the side.
The system will automatically use the bank card that was saved and require the CVV to continue.

Travex high-fidelity prototype

Inline feedback is given to users when the CVV code is accepted and all the information is valid.

Travex high-fidelity prototype

To support the previous research findings toward safety concerns, users will now enter the 4-digit OTP that was emailed to them in order to complete the transaction.

Travex high-fidelity prototype

If the payment was successful, users can download the ticket from the app or scan the QR code for the link.
If the payment was not successful, users will return to the payment details page and receive appropriate feedback to try again.

Aside: Working Spaces

Travex high-fidelity prototype

Back on the home screen, users can brows the accommodation and work spaces close to the user's current location.
The cards will expand on click to show more information about the offers with the most recent reviews at the bottom.

Conclusion

This sprint prioritised one task, but there are several other to design in the user profile and aside sections, for example, before adopting a more agile development approach. These can easily be added using the insights from the needfinding phase and evaluated further with users before implementation.I enjoyed the unexpected challenges in designing this web application.

The complexity of this industry demanded careful adaptability and responsiveness to a variety of content and user needs.The diverse user base this type of application can attract also requires careful consideration of user values and usability that can be optimised in future iterations with real users.

Get in touchBack to top