Homepage  |  Blog
︎Live

Tajawal / Almosafer



Role
Product Owner/Manager/Designer
Category
Travel, OTA
Platform
Mobile Web, PWA
Timeframe
2018-2019


About
Tajawal [part of Seera Group] is an Online Travel Agency and one of the fastest growing startups in the MENA region. 

My role
I was hired as a PM/PO to drive forward the development of Tajawal’s Progressive Web App. My previous experience as a Product Designer focusing on native mobile applications was beneficial and essential for this role as I also took over the whole UX/UI design of the PWA.

Disclaimer
The content of this case study covers the work on Tajawal’s PWA but also relates to Almosafer’s PWA. Both brands almost share the same technical architecture and UX but only distinguish by Brand Identity. Therefore the seen content focuses on Tajawal only.
Team
Dev, QA, PM, UX (Cross-functional)

Focus areas
Design
  • Analysing
  • Wireframing
  • Prototyping
  • Testing
  • High-fidelity designs
  • Dev handover

Ownership/Manager
  • Roadmap/Backlog creation
  • User stories
  • Stakeholder management
  • Agile team management (Sprints etc.)
  • Cross department communication
  • Data dashboards, presentations, weekly updates
  • Product release and maintenance

Tools / Software
  • Pen & Paper
  • Sketch
  • Zeplin
  • Jira
  • Youtrack
  • Slack


Problem(s)

Customers
Our existing Mobile website was neither optimized for a convenient mobile experience nor did hit performance goals we set for ourselves. Customers were bouncing off due to high loading times and unclear UX. Small fixes were done to increase the performance by reducing the time for the first meaningful paint in a hackathon. This resulted in a 22% decreased bounce rate.
Organization
The team members which focused on the first improvements to the mobile website were not fully dedicated to build a better mobile user experience. The team was missing a UX/UI designer and PM/PO. 


Planning


To start off the project some necessary steps needed to be taken:

  • Bring a team together
  • Define the MVP
  • Dedicate to a timeline (deadline)
  • Build a backlog
  • Make a release plan
  • Track and evaluate impact

We decided the MVP of Tajawals new mobile website to be only about the Flight booking journey. Our data indicated this to be the most used product and we expected the biggest impact by focusing our efforts on this particular user journey.


Research & Concepts

In order to define the scope of our MVP, I looked into the existing mobile website and made a problem analysis. Speed was one of the key success metrics for the new PWA. We used Google Lighthouse to evaluate our existing site and compare it with any changes we release in the future.




Data
Besides our own data we looked into industry benchmarks and research done by experts. Google Insights supported us to understand travel personas better.





Concepting
I translated our research into a low fidelity journey map considering the different user intends, defined the content of each step in the journey and started to create higher fidelity mockups.

At this stage, the newly formed PWA team members got involved. The overview supported the developers to build the initial infrastructure (”App shell”) and alter backend functionality in order to deliver the correct data at every step.

Our lead developer Khurrum wrote a great piece on Medium which deep dives into these technical changes.
Read it here ︎


Mockups
The high fidelity mockups helped us to understand the user journey better, encounter possible usability issues at every step and test look& feel with a clickable prototype on mobile devices.

It also supported me in explaining specific interactions to the dev team.

After 3 months we soft launched the newly designed and developed mobile experience only to specific regions and observed the numbers old vs. new site.

Designs

Designing a PWA has to comply with performance requirements and mobile web specific conditions. To make sure the experience stays slick and gets the highest scores in Lighthouse, we used Google Web Fonts and Material UI, a React components library that implement Google Material Design. 



Appbar & Tabbar
In order to give users a convenient mobile experience we set the goal to have the look & feel of a native mobile app. We implemented a permanent Appbar for navigating and a sticky bottom bar/tabbar for the CTA, price summary and important tools (filter, sort, currency).





Results


We were the first company to work with and being part of Google's mWeb Innovation Program.
We launched our Progressive Web App for Tajawal and Almosafer to increase our conversion rates by around 30%.

We also increased our Lighthouse score from 64 to an avg. of 90!


Chrome dev summit 2018
Our success made it to the chrome dev summit 2018 next to big names like LinkedIn, wayfair, Expedia, Walmart etc.




Thank you.

Personal note
I am grateful for the experience and the new friends I made working on this project. Tajawal not only gave me the opportunity to pursue a new career path but also teached me a lot about myself and what I’m capable of with the right team around me. I learned about Progressive Web Apps, Product Management and Ownership and to be hands-on when circumstances ask you to step out of your typical role.

Say Hello!


You need support with a project of yours or just want to have a chat? Don’t hesitate to message me! Let’s grab a coffee together, let’s talk business...or about technical innovations, startups, design and human psychology.


Hit me up!


LinkedIn   |   Twitter   |   Medium   |   Xing
Copyright © 2019 Yusuf Algan

Mark