UI/UX DESIGN

TOURSCANNER

An Amazing User Experience Design for Tourscanner Travel App

Introduction

Tourscanner is a Travel search engine that helps users find travel sites that offer interesting travel destinations and tour packages around the world.

The product at this time, has a website where users could visit to find travel destinations, but doesn’t have a mobile app. I was hired to create a memorable mobile experience for the Tourscanner app.

The Goal

To begin, my goal was to design and prototype user-friendly and intuitive user interfaces for the tourscanner travel mobile app to help users searching for trips, easily find travel destinations and tour packages.

I set-off to measure the success of this app design using some metrics like how easily users navigated through the app and the time it took for users to complete a destinated search flow, on the app.

My Role

Visual Design, Interaction design, UI animation, prototyping.

Research

Empathizing with the user

Crafting out user personas from user research

I created a screener survey to recruit users whose travel behaviours were beneficial to the research. User interviews were conducted with these users in participation and personas were drawn out, using feedback gotten from these users during the interview:

Competitive Analysis

Researching the competitors

Right after feedback was gotten from screened users, I did a competitive analysis of similar platforms, such as TripAdvisor and Expedia, to identify best practices and opportunities.

I also carried out Secondary research on the Tourscanner website, TripAdvisor and Expedia to discover product features and where these competitors were lacking in user experience and usability. Research data was curated on an audit table.

The data gotten from the competitive audit was used to draft out suggestions on how the Tourscanner app could have an edge over its competitors.

Competitive Edge Suggestions

These were the suggestions that I came up with after competitive analysis, that could make Tourscanner have an edge over competitors.

1. Comprehensive Destination Information: Focus on providing extensive, high-quality destination information to help users discover new places, cultural insights, and unique experiences. This sets the app apart from platforms like Expedia.

2. Curated User-Generated Content: Encourage users to contribute high-quality reviews and recommendations to ensure consistent and reliable content, differentiating the Tourscanner app from TripAdvisor.

3. Seamless Personalization: Develop advanced personalization features that cater to individual user preferences, helping users like John in creating personalized itineraries.

4. Visual Inspiration: Incorporate visual content to inspire users, complementing text-based information. This provides a unique blend of visual and textual inspiration, setting Tourscanner apart from Google Maps and Instagram.

Setting up the Foundations for a Great User Experience

Using data from research, a user flow was drawn to ideate how customers would complete tasks within the Tourscanner app.

Laying out the Tourscanner Experience

For a great in-app user experience, users needed to be able to move easily through the product via clear steps. To make this happen, information was organised hierarchically.

The Design

Transitioning from ideation to design

First Off, Wireframes…

Designing digital wireframes for The Tourscanner App was the next step. Users wanted an intuitive and easy-to-use product which solved their tour needs. Having the user in front and center, layout variations were designed, until ones with the best experience were arrived at.

High Fidelity Prototyping and Testing

To create an aesthetically pleasing user interface for the Tourscanner app, I settled for two color modes: light and dark modes. From user stories, users wanted to be able to switch between each modes, and while designing, I ensured that regardless of the mode the user was on, they would experience a simple, intuitive interface.

I also incorporated features that ensured that the app design was navigatable, easy to use and helped users complete their search for tour locations in minimal number of steps.

The Results

A new way to search for and find tour locations

Wrapping it up

The final prototype was created in Figma and interactions were added to make the design as enjoyable and realistic as possible.

Next Case