Vista

Overview

Tourism is one of the world’s fastest-growing industries and a major foreign exchange and employment generation for many countries. It is one of the most remarkable economic and social phenomena. Tourism could be explained as the movement of people from their usual place of residence or work to another place ( with the intention to return) for the sole purpose of leisure and pleasure. It could be the same country of residence and work or an entirely different country.

Vista website allows people register and book tours across different beautiful cities around the world at an affordable price and encompasses all expenses needed for the tour, enabling tourists have a highly exciting time during this period of leisure. 

The Challenge

Design of a website that enable individuals to easily explore options and book an affordable tour to amazing cities around the world, providing a minimalistic, attractive and immersive interface for users.

Design process

Design thinking approach was chosen as it is an iterative process that helped me to understand the users, challenge assumptions, redefine problems and create innovative solutions to prototype and test. 

Understanding the Users and problems

In full my research mode, I conducted primary and secondary research in qualitative and quantitative manners. I interviewed participants from different backgrounds for inclusivity and handed out surveys for quantitative analysis. I also read articles and journals on existing systems to carry out competitive audits and to further understand users problems and needs. Before conducting the research, I assumed people always want to have companionship when going on a tour and especially in distant locations. However, this was an assumption that was eradicated after the surveys and interviews I conducted. I got to understand that several people just want to enjoy new sights and experiences with or without a travel companion. 

Qualitative research

I had interviews with 10 participants where i asked questions about their opinions on tourism and their interests in it. They explained their viewpoints, the experiences they have encountered - the good and bad, reasons why they go or would want to go on tours and their preference on assisted or independent planning. I took note of the insights i received from the interviews. 

Quantitative research

I conducted a survey to better understand the challenges of people who want to go on a tour. I received 38 responses at the end of the survey. These were the results based on some of the questions I asked which provided more understanding and insights on the users challenges. 

User pain points

1   Cost- Expensive tourism websites. 

2   Planning- Difficulty in planning a tour.  

3   Accessibility- Challenges in accessing and understanding website contents. 

4   Time- Lack of time for tourism trips. 

Empathy mapping

I created an empathy map to represent a group of participants during the research (the aggregate), to gain deeper insight into the users and understand their perspective. 

Creating user personas

I created two user personas from data i collected during the research to understand the user’s needs and difficulties. This enabled me to empathize with the users at a singular level. 

The user journey map

To properly define the problem and brainstorm solutions, I needed to understand how users would interact with the website and carry out their tasks. I wanted to make sure the interaction would not be complex and users can carry out tasks with easy navigation from start to finish. For this, I created a user journey map from the persona of esther roberts. 

Creating a sitemap

After understanding the user flow, I created a site map which helped me arrange the major interactive screens of the responsive website in hierarchical order for the design and prototyping phase. 

Brainstorming

Big picture storyboard

Using quick sketches, I created a big picture storyboard. It helped me place focus on the actual user needs and understand the context where Vista would be relevant to the user.

Scenario: Esther is bored of her reguar job and wants to take a break by going on a tour despite having limited budget. 

Close up storyboard

Using quick sketches, I also created a close up storyboard. It helped me understand the 'what' which will be required for the user to achieve their goal in a specific context.

Scenario: A website that allows users register for affordable tours in exciting cities. 

Competitive audit

I evaluated similar existing websites to understand competitors approach, and figure out what Vista might be missing out on and carryout analysis on what could be a competitive edge. 

Paper wireframes : Starting the Design 

Taking the time to draft iterations of each screen of the website on paper ensured that the elements that made it to digital wireframes would be well suited to address user pain points. For the home screen, I displayed an information on all the activities and interactions that can take place on the website for an easy user flow and avoidance of complex navigations. 

Prototyping and testing the design 

Low fidelity (LoFi) Wireframes

As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research. I designed the screens to all be linkable to one another so the user can move from one flow to another seamlessly. Using the completed set of digital wireframes, I created low-fidelity prototypes with the user flow starting from the landing page to encompass the pages that could be accessed during the usability study. 

LoFi Usability Testing: Findings 

I conducted a round of usability studies. I wanted to figure out what specific difficulties users encounter when they try to complete the core tasks of the website: Selecting a city to register for tour, filling in information and paying, and website navigation. Findings from the first study helped guide the designs from wireframes to mockups. After a round of usability testing with feedback from 4 participants labelled participant A-D, I was able to create an affinity map to observe similar patterns and draw out insights from the usability studies. It was crucial to conduct a usability test at the lofi level so as to tackle structural design flaws before taking the project to the next level - High fidelity wireframes. 

Affinity diagram

Insight 1

Some usability test participants expressed frustration about the placement of the ‘register’ button and some called it an uncommon button placement. When designing, the intention was to make the ‘register’ button stand out but after the usability test feedback, I positioned the button where it is commonly placed and instead, I used a fill colour to highlight it. 

Insight 2

Some usability test participants suggested that confirmation of purchase should be added so as to see what is being paid for before paying. I added a confirmation summary to vet all details before proceeding to payment page. 

Also, some usability test participants wanted the destination city to be highlighted when filling the form so that they will always be certain about where they chose throughout the entire registration booking process. Although not at the highest priority, I redesigned the interface to show he destination city at each step of the registration process. 

Insight 4

Most participants expressed annoyance about the minimal information about the cities after choosing a destination city. To enable users know more their selected city, I added more details to the city info page including map and reviews. 

Home page

Users are greeted with an immersive and creative home page which displays the navigation bar. Users can click on each individual page on the nav bar to open it or they can just scroll through the home page to see everything.

Registration & confirmation pages

These pages are accessed from te navigtion bar and allows users to register and book a tour. It contains form to fill infromation details after whichthe user proceeds to payment and then the booking is confirmed with additional information. Users can navigate through the booking steps using 'breadcrumbs' so they can always modify any input.

HiFi Prototyping

After designing the hifi wireframes, I prototyped it to accurately show the userflow between screens to carryout interactions that would be required to complete a task. 

Accessibility considerations

1   Minimalistic interface to avoid distraction and cognitive overloading. 

2   Used several visual descriptions for easier understanding.   

3   Used hierarchical texts to differentiate text importance and provide distinctions. 

Takeaway

Impact

The tourism website enables individuals register for affordable and organised tours in beautiful cities around the world .

One quote from peer feedback:

“ The website has a great visual appeal and makes me feel the beauty of the cities before even registering.” 

Other projects