Categories
UX / UI

isango! Redesign – The Complete Design Journey

isango! is a travel e-commerce website selling tours, experiences and attraction tickets. The project was to redesign the website to improve the booking experience for the customers and incorporate the new mission and vision statement of the company through rebranding.

The project was initiated in May 2020 and was launched in September 2020. The deadlines were tight and we were short on resources as well. I handled the UX and UI design single-handedly. During my project, I worked with the Project Manager, Product Managers, Scrum Master, CTO, Engineers and QA Team to successfully launch the website.

My Role

  • Led the redesign project all the way from research to ideation to launch with the help of the product and engineering team.
  • Created wire-frames of end-to-end flows, prototypes, visual design mock-ups, and design specifications.

Technology Constraints

We were on a tight budget and short on staffing. Therefore, I decided to redesign the modules that had a direct impact on the conversion and usability of the website.

Design Process

  • Research – Qualitative & Quantitative Analysis of the website and its users.
  • Define – Defining problems based on the analysis of the website and its users.
  • Ideate – Creating mock-ups of the possible user journeys and elements for discussion & feedback.
  • Prototype – Creating a prototype of the selected model.

Research

I wanted to conduct a user interview that had at least 5 people from various user groups. However, due to budgetary restrictions, I had to make the most of the tools available online and within my boundaries. The goal of my research was to find out the pain points on the website.

Quantitative Analysis

I used Google Analytics to get a holistic idea of the page views, bounce rate, exit rate along with behavior flow, click-through rate and event clicks on the website. This gave us an idea of the most and the least interacted regions of the website.

Qualitative Analysis

While the numbers helped in detecting the painful regions on the website, the qualitative analysis helped in justifying them. Therefore, I used various user research methods and tools to help define the problem statement.

Inpectlet tool – helped in monitoring the website visitors in real-time and visualize their journey in a better way.

One-on-one interview with the Customer Service Team – a major chunk of bookings came through the Customer service department. Therefore, I interviewed them to get an insight into the customer queries.

User interviews (5 Users) – conducted a Contextual Interview where I interviewed five users in their environment. I gave them a task, where they had to make a booking using isango! website while I observed them. This helped in understanding the emotions evoked while performing the task to obtain a more natural and realistic result.

Defining Problems

  • Users facing difficulty in understanding the itinerary on the product page.
  • Lengthy booking flow with too much back and forth, even to perform a simple task as changing the ticket option.
  • Confusing ticket options leading users to make a booking on phone than through the website.

Solutions

  • A summary box with all the necessary information for the user to understand the itinerary better.
  • Reduce the booking flow by allowing booking from any point on the website and minimizing information on the options window.

Types of Users

I kept these users and conditions in mind whilst designing to make sure the design caters for all of them. Some users have conditions that naturally overlap.

Sitemap Overview

The sitemap was created to understand the final flow of the user on isango’s website.

Ideation

In the first stage of Ideation, I discussed and presented an audit of various competitors and how they do things digitally; including
documenting various repeated design patterns and brand elements.

Followed by creating rough sketches and wireframes to find out the best solution to our problem.

Prototypes

At this stage, I started working on the prototype that will give the stakeholders a realistic view of the product. Here’s a brief look at a few modules that we intended to improve usability-wise.

Product Page

Added a summary box to the right of the product image, displaying all the essential information related to the product.

Added a sticky at the bottom to highlight the price in a prominent manner and a call-to-action for redirecting users to the booking module.

Home page and Category landing pages

Gave the home and the category pages a facelift by pushing the visual design of every component and the website as a whole inspired by the playful identity of isango!.

  • Introduced a holding shape for hero images to bring in a more branded experience to the page.
  • Placed the secondary content in the menu that aren’t necessarily essential to the function of the website. However, a subset of users look for such information in places like this.
  • Added a personalized section for the users showing previously searched tours that will help them to recall the last searched city or tour.
  • On the landing pages, added a categorized filter to help the user narrow their search list at ease.

You can check out the website here and sharing some fond memories of my redesign project below 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.