angelicaalagia

ITINERA.COM

an e-commerce design project

OVERVIEW:

Itinera.com is a fictitious company that sells online authentic travel experiences.

All of us are travel lovers. Everybody loves planning the next trip. What to visit, where to eat, how to find and get to the most interesting places. Travelers today want to make informed decisions. Trips made with vague plans usually turn out to be a harrowing experience.

In the past years, travel e-commerce websites and apps overtook travel agencies, making digital travel arrangements progressively easy, fast, and convenient. The name ITINERA comes from “in itinere” which in Latin means “on the way”.

Experiences are sold as customized packages. The website creates these experiences based on some user preferences such as location, budget, date/time range and particular user interests.

OBJECTIVE

This project objective focuses on the whole design process, brand identity, logo creation, style decisions, design. The process involved the whole wheel: analyze, design solutions, prototype, evaluation. 

PROJECT SCOPE

UI/UX/Usability test

TOOLS

Illustrator – Photoshop – Axure RP

THE PROCESS

1. DESIGN BRIEF

During the phase I established the company’s goals, who the target market should have been, and the website specifications.

2. LOGO CREATION 

The logo of Itinera.com is a fusion of the company goals.

The logo features an eye that also looks like a target. Inside, it reflects a magnifying glass that is “searching” for the best experience for its visitors. The magnifying glass reminds the letter “i”, which is the initial of the company name.

3. COLOR SCHEME

The logo of Itinera.com is a fusion of the company goals.

E-commerce website owners want (and should) know which colors will make their websites more attractive to visitors. The main goal of Itinera.com is to sell extraordinary and unique travel experiences.

The brand colors used should be able to match with this objective and transmit a feeling of exclusivity and authenticity. These experiences are authentic, unique, and “hidden gems”.

Purple features stimulation of red and calm of blue

WIREFRAMES AND INITIAL DESIGN

Wireframes were created in order to design the best user experience. The design was developed to create an initial prototype that was used to run a usability test on 8 users. The results of this usability test were useful to modify and implement the design (as we can see in the next chapter).

The pages developed were: category page, product page, cart and payment page.

Category page. WIreframe and Design
Product page. WIreframe and Design

USABILITY TEST

I ran a usability test. I used the DECIDE method to set up my test. The results will be used to improve functionalities and tools in itinera.com.

DECIDE the goal.

The main goal of this evaluation study is to assess the perceived usability and the ease of use of the itinera.com prototype.

The second goal is to evaluate the website’s design. The basic premise of itinera.com is to help travelers find local experiences and activities, and book them in the most comfortable way.

The main design objective is to create a website with a modern flow that is easy and fun to use.

This study aims at gathering information about what people like (or don’t) while completing tasks in this travel e-commerce website. This will be achieved by comparing itinera.com with benchmarks projects such as Airbnb, Booking.com, and TripAdvisor.

Questionnaire

EXPLORE the questions

The main questions connected to the project’s goals were the following:

  • How easy is to find the experience/activity asked?
  • Is the flow intuitive? Is the website learnable?
  • Are there some elements in the website that distract the users?
  • Do users need more information about some feature in the website?
  • Do the cart and checkout pages provide a good UX?

The answers will be collected through a Usefulness, Satisfaction, and Ease of Use Questionnaire.

CHOOSE an evaluation approach

  1. Users were asked to interact with the prototype and book an experience.
  2. A short interview will introduce the second part of this test.
  • Have you ever used websites such as Airbnb, booking.com, or TripAdvisor?
  • If yes, choose one that you want to talk about.
  • What do you like more about it and what don’t you like.
  • Which are the main differences (negative or positive) with itinera.com?

This will help users to compare their experience during the interaction with the prototype with other websites they usually use.

 

3. Questionnaire

At this point users are asked to complete a post-session questionnaire. The questions used to gather information related to this goal are organized in a “Usefulness, Satisfaction, and Ease of Use (USE)” questionnaire. It consists of 30 rating scales divided into four categories: Usefulness, Satisfaction, Ease of Use, and Ease of Learning. All of them will be positive statements on which the users rate their level of agreement on a seven-point Likert scale.

IDENTIFY practical issues / DECIDE about ethical issues / EVALUATE, Interpret and Present the data, were the last three steps pf the “DECIDE” Evaluation Method.

DESIGN IMPROVEMENTS

The results of the usability test showed that some of the main problems users had while interacting with itinera.com prototype were:

  • Experiences need to be displayed in categories to create more “order” in the users’ minds when they look at the list (e.g. “Restaurants”, “Museums”, “Relax”).
  • Itinera.com needs an important tool integration related to the possibility of showing only experiences and activities “nearby” users when they using the website.
  • During the interaction with a travel e-commerce website, there are some actions that users expect to be able to do and find. The reason they search for these tools is usually to save time and filter the results based on their specific needs.
  • Itinera.com needs to be integrated with some of these tools (filters, search bar, price rate, etc.).
  • Some of the users needed time to find basic buttons (such as the arrow to go back to previous page). From the design perspective, some of the elements in the website need more visibility.

ICONS AND METAPHORS

Predictable interactions create trust in the product as well as the brand. In general, I can say users interacted with the prototype without particular issues. Some changes will involve elements that need more visibility (such as arrows to step back as reported from users).

Terms, concepts, icons, and images that seem perfectly clear to you and your colleagues may be unfamiliar or confusing to your users.

In the first design version there was a wrong use of metaphors in the top navigation bar.

The bad use of metaphors made it difficult for the users to interpret what images meant. For this reason the top navigation bar has been removed and only clear metaphors remained: a question mark icon for the help center, a planet icon for selecting the languages, and the indicator of the currency in use. Any other information is manageable in the profile settings or located in the footprint.

CATEGORY PAGE 

During the interaction with a travel e-commerce website, there are some actions that users expect to be able to do and find. The reason they search for these tools is usually to save time and to filter the results based on their specific needs.

I made changes mainly in the category page. This was the section where users had most issues with filters and group categories.

I made changes mainly in the category page. This was the section where users had most issues with filters and group categories.

After analyzing the result of the usability test, I integrated some tools in the new design version.

Users found the way in which the experiences were displayed to be confusing.

CHECKOUT PROCESS

The goal is to keep the content and visual design of UI focused on the essentials and not let unnecessary elements distract users from the information they really need.

The website focuses this goal especially in the cart and checkout page. Users appreciated the minimalist design in these pages because they didn’t feel overwhelmed by other information (promotion, insurance, additional sales).

In this section, a “review cart” page was added. From this page users are allowed to modify their reservation before proceeding to checkout.

HIGH-FIDELITY PROTOTYPE

You can interact with the Itinera.com high-fidelity prototype through this link:

https://eh2jxj.axshare.com