From a Painful Experience to a Local Travel PWA

Product Design Case Study
Overview
Alibaba travels Co. has been active in Iran’s travel and tourist business since January 2014 as a startup. Alibaba Travels Co. is the pioneer of online travel services in Iran. Alibaba Group has five offices located in Tehran. We are providing innovative, competitive, and enjoyable services for the people who visit Iran and all Iranians traveling worldwide.
HelloPersia is a subset of Alibaba travels Co, a team of professional and dedicated travel experts continually striving for excellence. With its ancient history, we believe Iran, rich cultural diversity, hospitable people, and mesmerizing natural sights, has the potential to become the top destination in the Middle East. To serve this end, we have launched a reliable online booking platform to provide top-notch travel services to those visiting Iran.
My Role
Having had previous experience designing some parts and developing a PWA from the ground up, I worked as a Product Designer with occasional support from developers.
I coordinated and led all design facets, including information architecture, user task flows, interaction, visual, product, and prototyping. I also conducted user research using usability tests, interviews, surveys, and focus groups to address user behavior and attitudes.
The Problem
HelloPersia has a growing mobile audience. Over 70% of bookings happen on mobile, and the company’s mobile web traffic recently overtook their desktop web traffic. Even with this traffic growth, we encountered very high bounce rates because of mobile responsive’s load speed, unstable functionality, and usability, making a frustrating user experience. We wanted to improve the experience with the help of the existing team. Users were using mobile responsive, and they were extremely unhappy with it, the experience is a pain, and most users report problems repeatedly. The business is also planning for new features like local short-time experiences and customer referrals that we want to develop in this phase.
Following, you will find why we decided to develop a PWA rather than a native app.

According to Google, PWAs are,
Progressive
Works for every user, regardless of browser choice because it’s built with progressive enhancement as a core tenet.
Responsive
Fits any form factor: desktop, mobile, tablet, or whatever is next.
Connectivity Independent:
Fits any form factor: desktop, mobile, tablet, or whatever is next.
Read More
App-like
Feels like an app, because the app shell model separates the application functionality from application content.
Fresh
Always up-to-date thanks to the service worker update process.
Safe
Served via HTTPS to prevent snooping and to ensure content hasn’t been tampered with.
Discoverable
Is identifiable as an “application” thanks to W3C manifest and service worker registration scope, allowing search engines to find it.
Re-engageable
Makes re-engagement easy through features like push notifications.
Installable
Allows users to add apps they find most useful to their home screen without the hassle of an app store.
Linkable
Easily share the application via URL, does not require complex installation.
The following reasons convinced to design and develop a PWA rather than native applications.Low budgetLightweight and easy to createCross-platform compatibilityEasy installationBoosts conversionCompetitive advantageEasy to expandQuick installation on any deviceIncludes push notification optionsReduces data usage and loading time
Additionally, Google has published case studies which prove how Progressive Web Apps are improving technical and business performance. According to comScore, 51% of users still don’t download any apps in a month.
This means even if you create an app, it will take a lot of work to attract users to download it. But, an average user will at least manage to visit 50 websites in a month. So, by creating progressive web apps, you can cover more users.
See Less
Research
I initiated the process using a Design Thinking methodology: Discover, Define, Develop and Deliver.
Stage 1: Test
I started monitoring user behavior by watching session recordings and analyzing heat maps. I conducted a Usability Testing (with 5 participants) to ensure which parts don’t function well, find out the main problem, and cause dissatisfaction.
Here’s the affinity diagram for flight booking, research process key findings, and ideas.
Stage 2: Discover
I started the second stage with a qualitative investigation to understand the context and validate the assumptions we made about our users. I needed first-hand information about our users to know their profound motivations, opinions, and perceptions about the travel experience. We designed questions about the following topics: Motivations, fears, and expectations. Tools, channels used to plan the trip and, what our users do during the trip. I found out there were five types of travelers:
I discovered patterns and found that this last type of traveler was the most accurate and representative of the project. And also the most relevant to develop solutions that link travels with hobbies.
Getting to know the persona
Mahan is a successful 28-year-old Archaeologist from Toronto and an avid traveler and adventure lover.
Empathy Map
Mahan's creation led to an empathy map that allows us to capture the emotional part of Mahan.
Pains and Gains
Pains
Gains
User Journey Map
With this User Journey Map, I validated the goals and found opportunities to develop solutions that resolved Mahan’s needs. The User Journey Map gave me more accurate information about her emotions and perceptions and where these changes negatively or positively.
With this information, I started to develop some ideas. The green emojis show the gains Mahan had during the experience, and the blue emojis stand for the pains she suffered.
Walking in Mahan's Shoes
Through this exercise, I defined Mahan’s needs and found some main problems to solve; I also discovered some issues in mobile responsive usability testing.
How Might We...
This question is part of Human-Centered Design, a creative approach to problem-solving. Once we have framed the problem we want to solve and know who our users are, the creative process to tailor a solution for them starts with this question: How might we solve this problem? For each issue I found in the research process, I wrote possible solutions in a question form beginning with “how might we…”.
Stage 3: Ideate
I created solutions using paper prototyping, which allowed me to make iterative changes at a low cost. Here’s a part of the paper prototype.
Stage 4: Prototype
Now that we knew the product's value proposition, the main business objectives, and users' needs and goals, we can start our design process.
Information Architecture and Navigation
Before starting the design, I needed to create a site map to observe user task flows.
Benchmarking and Mood Board
I benchmarked and monitored different platforms providing short time experiences to keep track of what they do. I made a mood board of them.
Onboarding
There are three main goals behind app onboarding: it greets, informs, and engages a user.
Onboarding screens set the first contact between the user and the app. It is a sort of introduction that somehow imitates communication in the non-virtual world with a greeting. It is mostly clear if the app uses a mascot or character chosen to reflect a direct contact flow with a user. However, the salutation should be short and concise to avoid distracting users from the essential information.
Visual Design and Prototyping
Here is the user flow of booking a flight and booking an experience on the Marvel App.
And here is a mock-up of the final designs. You can find the prototype on Marvel App by clicking on the link below.
Prototype on Marvel App
Conclusion
The goal of this project was to create a user-centered PWA using the UX process. I went through all the stages, using design thinking and UX tools.
All this process helped us create a meaningful product for users, which resolves pains during the travel experience and helps them achieve their goals.
As a team, we realized the importance of developing a product with a user-centered approach.
We also learned the power of testing ideas at the early stages of the process, to validate our product before developing it and saving time and reducing costs.
What are the next steps?
This is just the beginning. We're going to improve the app and make it the most user-friendly as it can be. These are our next steps in improving the experience.