Homepage  |  Blog

Tajawal / Almosafer

Product Owner/Manager/Designer
Travel, OTA
Mobile Web, PWA

Thumbnail Tajawal 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.

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.
Dev, QA, PM, UX (Cross-functional)

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

  • 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


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.
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. 


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.
Timeline TajawalExecution Tajawal

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.

Page speed benchmark

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

Travel Micro moments

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 ︎

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.


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. 

Tajawal PWA Flights

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).

Tajawal PWA Hotels


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!

Tajawal PWA Results

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

Chrome Dev Summit Tajawal

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