Project Overview
“eTour” is a Travel Agency and they need a website that helps people to book tours online. Also, travelers would be helpful to get some valuable information about their destinations from the website.
Project Duration
Sep 2021 to Oct 2021
My Role
UX Designer
Problem
Sometimes travelers want to book the best tour package easily, for a cheap price.
Goal
Design a Responsive Website for “eTour” that allows users to easily search and book the best travel destination for a cheap price.
My Responsibilities
Conducting interviews, Competitive Audit, Creating Sitemap, Paper and Digital Wireframing, Responsive Designing, Lo-Fi and Hi-Fi Prototyping, Conduction Usability Studies, Accounting for Accessibility and iterating on designs.
User Research Summary
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was in a lot of time, Travelers can’t book the best tour package for a cheap price.
The user group confirmed initial assumptions about eTour, but research also revealed that tour for a cheap price was not the only factor limiting users from booking tour for them. Other user problems included obligations, trust or lack of knowledge that make it difficult to book tours from a website.
User Pain Points
Conducting interviews, Paper and Digital Wireframing, Low and Hi-Fi Prototyping, Conduction Usability Studies, Accounting for Accessibility and iterating on designs.
Pricing:
Travelers can’t book the best tour package for a cheap price.
Navigation:
Travel Agency website designs are often busy with images, which results in confusing navigation.
Experience:
Travel Agency websites don’t provide an engaging browsing experience.
Problem Statement
Mohamed Salah is a professional Photographer and he needs travelling to get some awesome shots. So he needs to book perfect trips for a cheap rate.
User Persona
Competitive Audit
An audit of a few competitor’s products provided directions on gaps and opportunities to address with the “eTour” website.
Ideation
I did Crazy Eight’s exercise to come up with ideas for how to address gaps identified in the Competitive Audit. My focus was specifically on “Search” and “Book Tour” features.
User Journey Map
I created a user journey map of Mohamed Salah’s experience using the site to help identify possible pain points and improvement opportunities.
Paper Wireframes
Next, I sketched out paper wireframes for each screen in my website, keeping the user pain points about navigation, browsing and checkout flow in mind.
Digital Wireframes
Moving from Paper to Digital Wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience.
Prioritizing useful features, search box and visual element placement on the homepage was a key part of my strategy.
I’ve added some advance Filter options to find tours for a cheap rate easily.
Low-Fidelity Prototype
To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of Search a Tour for a cheap rate and Book the Tour.
At this point, I had received feedback on my designs from members of my team about things like placement and buttons and page organization. I made sure to listen to their feedback and I implemented several suggestions in places that addressed user pain points.
Usability Study: Parameters
Here are a couple of slides sharing information about usability tests conducted with early designs of “eTour”.
Study Type:
Unmoderated Usability Study
Location:
United States
Participants:
5 Participants
Length:
20-30 Minutes
Usability Study: Findings
These were the main findings uncovered by the usability study:
Check Availability:
Users want a “Edit” button after clicking the “Check Availability”. So that they can edit their information before Sumbit the Order, if they want.
Payment Details:
Users want an option for adding their card to their account for future use. So that they’ll don’t need to input their payment details on their future orders.
Mockups
Based on the insights from the usability study, I made changes to improve the site’s Check Availability flow. One of the changes I made was adding an “Edit” button to edit user information before submitting their order.
I’ve also added an option for adding their card to their account for future use. So that they’ll don’t need to input their payment details on their future orders.
Here is some High Fidelity Mockups for the “eTour” Travel Agency website.
High-Fidelity Prototype
My Hi-Fi Prototype followed the same user flow as the Lo-Fi prototype and included the design changes made after the usability study, as well as several changes suggested by members of my team.
Responsive Designs
The designs for screen size variation included Desktop, Tablet and Mobile. I optimized the designs to fit specific user needs of each device and screen size.
Accessibility Considerations
01. I used headings with different sized text for clear visual hierarchy.
02. I used icons to help make navigation easier.
03. I used detailed text to help all users better understand the website.
Takeaways
Impact:
Our target users shared that the design was intuitive to navigate through, more engaging with the image and demonstrated a clear visual hierarchy.
What I learned:
I learned that even a small design change can have a huge impact on the user experience. The most important takeaway for me is to always focus on the real needs fo the user when coming up with design ideas and solutions.
Next Steps
01. Conduct follow-up usability testing on the new website.
02. Identify any additional areas of need and ideate on new features.
Let's Connect!
Thank you for your time reviewing my work on the “eTour” website! If you’d like to see more or get in touch, my contact information is provided below.
Email: [email protected]
Website: rifatmehedi.com
- Date: October 20, 2021
- Categories: UX Case Study
- Project Duration Sep 2021 - Oct 2021
- My Role UX Designer