UX | UI Case Study: Asir Tourism Website

On the fifth week of the Misk UI and UX course, we were asked to create a tourism website/app based on our user's needs for visiting Asir provision.

Asir was an interesting provision since it had a breathtaking nature, in addition to all of the kind of activities. However, the research showed that Asir consisted of a number of cities including Abha, Rejal Alma, Khamis Mushait, Bishah, Al-Nammas, and the rest of 11 cities from the Ministry of Interior.

The project plan helped us a lot to achieve the project effectively. We followed the order:

○ User Study

○ C & C analysis

○ Information Architecture

○ Design System

○ Wireframes and Mockup

User Study

Screener Questions

Interview Questions

we managed to interview 12 users and collected a survey of 28 users.

Affinity Map

after we analysis our user's interview responses we created the affinity map and conclude the following insights:

1. Most of our users prefer to use a Website to plan or book their travel. They find the website is easier and has a better view of photos and information.
2. The majority of users look for packages based on their needs. They prefer to customize their packages.
3. Our users like to travel mostly to explore new cities and learn about their culture.
4. The most things that attract our users when they travel are the history, culture, and nature of the city.
5. Most of our users like to visit the official website of the city to collect information.
6. Most of our users choose the city they want to travel to based on the weather and the culture of the city or and friends or social media suggestions.
7. All information about the destination city and advice is needed for our users, including the history, culture, events, and activities.
8. Our users struggle to find everything they need to book their travel in one single platform. They move from one website to another to find information which is time and effort consuming. Another pain point is finding the best deals that suit their budget.

Affinity Map

Persona

Problem Statement

Family members struggle to find and manage all their travel bookings. They move from one website to another in order to find the best package deals which is both time and effort consuming. Our solution is to create a one single platform which is a website to find all their travel bookings without breaking their budget.

Key Features

our main features our website will provide in order to solve the persona pain points:

1. City information and sightseeing
2. Customize travel plan
3. Comparison price deal
4. Sharable reservation
5. Integrate Map

C & C analysis

Feature Analysis

our insights from the compatriot's features analysis:

1. Tripadvise has an advanced filter with many options. You can filter with a specific criterion.
2. Only Travelocity has a customize packages for family, Solotraveler, pet friendly ..etc
3. Amosafer and Travelocity provide the user with a customized package for flight, accommodation, and transportation
4. Travelocity provide their user with QR code for all booking information and tickets
5. Only local application as Visit Saudi and Enjoy Saudi provide the user with full local city information

Features Analysis

Heuristic Evaluation

our insights from the layout analysis :

1. Most of the competitor’s websites were easy to use and navigable.
2. Some of the local competitors’ websites have a lack of important features such as search bar and city information.

Heuristic Evaluation

Layout Analysis

Layout Analysis

Leaf Diagram

Information Architecture

Site Map

User Flow

we created a user flow where the user starts exploring the website and explore one of the cities then plans the trip by the customized package.

User Journey

we created the idle user journey, before using our website, during, and after using our website to plan the trip or explore the city.

User Journey

Design System

we created a design system for our website using the Helvetica sans-serif typeface and we inspired the colors from AlQatt Alasiri which considered the art of Asir provision.

Wireframes and Mockup

Wireframes

we created mid-fide wireframes of the website in order to be tested later on.

Wireframes Usability Testing

we tested our mid-fide wireframes on 6 users and they respond with the following:

Wireframes Usability Testing Responses

Wireframes Enhancements

based on the user responses we highlighted the parts that need to be enhanced in the mockup.

we leave you with the prototype to enjoy it

Future Work

We aim to add the following to create the following in order to enhance the user experience.

1. Mobile app
2. Integrate Different APIs
3. Favorite list

Thank you my great team Sukainah Alahmad and Ahlam Fallatah 😍

Thank you for reading 🌹