Improving travel experience through PWAs
Introducing a Progressive Web Application (PAW) to replace painful responsive experience
A bit of context
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 was 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 wanted to alongside building the PAW.
According to Google, PWAs are, progressive, responsive, connectivity independent, app-like, fresh, safe, discoverable, re-engageable, installable and linkable.
Additionally, Google has published case studies which prove how Progressive Web Apps (PAWs) 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.
It would benefit the business because they were low-budget, light-weight, easy to create with cross-platform compatibility, easy to expand, reduced data usage and loading time and with push notifications. These would help us boost conversion. At the stage we were, these were enough reasons for us to develop a PWA instead of a native app.
HOW IT STARTED
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
The second stage started 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:
The traveler with kids
The business traveler
The conventional tourist
The adventurer or unconventional traveler
The conventional traveler with concerns
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
Empathy Map
Having the persona led to an empathy map that allowed us to capture the emotionas of Mahan.
User JOURNEY Map
The User Journey Map gave me more accurate information about her emotions and perceptions and where these changes negatively or positively and it helped to identify the goals and opportunities to develop solutions to resolve Mahan’s needs.
HOW MIGHT WE?
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 started paper prototyping to be able to communicate my ideas to the stakeholders
STAGE 4: Ptototype
At this stage we knew the product's value proposition, the main business objectives, and users' needs and goals and potential ideas and scenarios to get things started.
Information architecture and navigation
Before jumping to design, I needed to create a site map to observe user task flows.
Benchmarking and moodboard
I benchmarked and monitored different platforms providing same products such as flights, stays and short-time experiences to keep track of what they do. I made a mood board of them.
Onboarding
For introducing the new product, I found it necessary to integrate an onboarding process.
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
I used Marvel to make an interactive prototype in order to present the final design to the stakeholders.
What came next?
This was just the beginning for us. We aimed for iterative improvements on usability and user experience.
These are our next steps in improving the experience.
Usability test of the prototype with users
Improve user flows
Gathering feedback on newly introduced features
Shining a light on accessibility issues such as inaccessible colors and communicating it with brand ambassadors
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.