PLAY Airlines Booking
Aviation
Booking flow
TypeScript
Next.js
React
GraphQL
MUI
Prismic CMS
Spreedly Payment
Booking.com integration
Development
QA
About this project
PLAY is an Icelandic airline that began operations in 2019. Its main goal is to offer affordable airfares between Europe and North America, using Reykjavik as a transfer point. PLAY positions itself as a youthful, dynamic brand, which is reflected in its vibrant red color scheme and direct, friendly communication.
WRD Labs Zrt. was responsible for the frontend development in this project. PLAY Airlines wanted to create a user interface for the flight booking process that differs from conventional solutions and is more user-friendly and easier to navigate for customers.
During the project, we worked closely with the main contractor Mito Digital team, who were responsible for UX/UI design and with AviLabs team, an Icelandic agency who created the middleware. Our task was to bring these designs to life, implementing the frontend code that allowed users to navigate and interact with the site smoothly.
Client
Participants
WRD [Frontend Development]
Mito Digital [Main Contractor, UX/UI]
AviLabs [Middleware Development]
Business value
- Started the new Europe-USA sales in 4 months: During the initial four months of our engagement (Aug 2021 - Nov 2021), we successfully developed and launched the first iteration of the comprehensive booking flow. This critical milestone enabled the commencement of high-volume ticket sales for Europe-USA routes.
- More than 1M ticket sales on the website: Throughout our full tenure on the project (Aug 2021 - Dec 2023), we witnessed a remarkable growth in annual ticket ales, escalating from 28,000 to 1,500,000. Notably, the website we developed facilitated the sale of over 1 million tickets annually.
- Custom web system for the whole digital experience: Over the course of our 2.5-year collaboration, we succeeded in creating a user-friendly and efficient web system, tailored to meet the innovative requirements of the airline. This bespoke solution resulted in minimal user drop-off rates, significantly enhancing customer retention and conversion.
ticket
sales annually
ticket sales
annually online
only to develop
the first version
Challenges
- Inadequate previous system: The former version failed to effectively guide users through the ticket purchase process, resulting in significant drop-off rates.
- Stringent timeline: We were tasked with launching USA-Europe route ticket sales within an extremely tight four-month deadline.
- Stringent timeline: We were tasked with launching USA-Europe route ticket sales within an extremely tight four-month deadline.
- Accelerated development process: Time constraints necessitated commencing development before full stakeholder approval of designs, requiring us to prepare for continuous iteration throughout the project.
- Business logic shift to frontend: Due to limited timeframe and middleware developers' capacity, the middleware insufficiently abstracted backend complexity, compelling us to implement substantial logic on the frontend.
- Emphasis on micro-animations: The site design incorporated numerous micro-animations to reinforce the youthful brand image, demanding special attention during implementation.
- Prioritizing accessibility: In alignment with the airline's brand values, we needed to ensure the site was fully accessible to users with special needs, presenting an additional challenge given the tight deadlines.
- Stakeholder management: Our client's rapidly growing organization experienced frequent personnel and role changes, requiring our team lead to skillfully navigate and manage multiple stakeholders in this dynamic environment.
Solution
- Strategic technological consultation: WRD Labs provided ongoing technological advice and feasibility/time-cost analyses to support Mito's UX/UI designers as they created the component set and business process screens in Figma in collaboration with the client.
- Frontend architecture setup: At the project's outset, WRD Labs designed and secured approval from client-appointed experts for the React/Next.js-based frontend architecture and code organization.
- Component set creation: Building upon the previously selected MUI component library, WRD Labs began implementing a new component set based on the new Figma design, alongside developing the first version of the booking flow.
- Dual-track agile implementation: WRD Labs established the dual-track agile methodology with Mito's UX/UI designers, where UX/UI planning progressed in sprints, 1-2 sprints ahead of development. This approach proved effective throughout the project's 2.5-year duration.
- Rapid delivery using modern technologies: Utilizing TypeScript, React, Next.js, styled-components, MUI, GraphQL, and Netlify, WRD Labs implemented and launched the first version of the booking flow within 4 months (approximately 10 sprints), enabling the commencement of USA-Europe route ticket sales.
- Sprint-based workflow with frequent client demos: Throughout the 2.5-year collaboration, two-week sprints and end-of-sprint client demos ensured various divisions remained informed about new website features and upcoming sprint priorities.
- Integration implementation: Beyond middleware, the project required integration of Prismic CMS, Spreedly payment, SendGrid-based email dispatch, Booking.com, Uplift installment payments, and Sentry monitoring. These integrations heavily involved frontend work, and towards the project's end, WRD Labs also contributed to the Node.js-based middleware due to resource constraints in the middleware team.
- Technical project management: As technical and integration challenges grew more complex, requiring input from an increasing number of client stakeholders, WRD Labs' lead developer and senior developers often took charge of coordinating these discussions.
- Multi-device and accessibility testing: WRD Labs' QA specialist devoted equal attention to testing the mobile version on real devices as to the desktop version. Accessibility tests received special focus, including keyboard-only navigation and screen reader software usage.
Technology
TypeScript
React
Next.JS
Styled-Components
Let’s talk!
We’re here to help with your software development needs. Whether you have a question or want to discuss a project, feel free to get in touch. We look forward to connecting.