Flapp
Expand and iterate mobile app of an OTA
ROLE:
※ Sr. Product Designer

PROJECT TYPE:
※ Product Design

TEAM STRUCTURE:
※ Cross-functional, agile team: PO, 1 Android dev, 2 iOS dev, designer (me)
※ Design chapter: 3 product designers (incl. me), 3 marketing designers 

DURATION:
※ 3 years, ongoing production. Implement new features, iterate existing.

CONTRIBUTION:
※ Product functionality specification
※ Define user flow and interaction
※ App UI design
※ Create interactive prototypes
※ Support QA
※ Create & maintain UI Kit for iOS & Android
DESCRIPTION:
Flapp is the mobile app (iOS & Android) of Travelstart, the leading online flight booking agency in Africa.

In the initial version of Flapp we only sold flight tickets for 1 route (Johannesburg – Cape Town) for the next 7 days to cater commuter traffic (JNB – CPT is among the world's busiest air routes). This concept was then applied to other regions and air routes. 

But not long after that, users missed the ability to choose their own routes and book beyond the given timeframe. Therefore, over time, we brought in features that were available on Travelstart's booking website and expanded on some to make them more app friendly.

The commuter feature was eventually dropped, and Flapp became the official mobile app of Travelstart. 

CHALLENGE:
There have been plenty of challenges and solutions. Each new feature and iteration was measured by substance and value. Some tasks took merely an afternoon, while others spanned over several weeks. A challenge often was not to get carried away and adding more than needed. 

Visually, early app versions were playgrounds, having iOS and Android both look quite different. Over time I brought both platforms closer together. And later the UI was adjusted to be in line with the Travelstart website and follow Material Design guidelines.

Working in different team formations, the Product and Development team eventually settled to work in cross-functional agile teams -- borrowing elements from the "Spotify model" --, which introduced a whole new dynamic. 

RESPONSIBILITIES:
As Sr. Product Designer at the App Development office in Taipei, I helped grow the app. Together with the PO, Head of Product (based in Cape Town) and app development team (based in Taipei) we defined new features and iterations. I created flow charts, designs, interactive prototypes, and prepared the handover to developers. During the development phase I also helped with QA. 

outcome / reflection:
Flapp was an exciting product to work on. What started as a light-weight app, became a full-fledged product that still isn't near its full potential. Within 3 years, Flapp was downloaded 1 million times and was among the top 10 iOS apps in South Africa.

Learning never stopped. Each released change was carefully monitored so we could measure what works and what doesn't. Every follow-up iteration could be explained. I believe the overall flow and feel of the app do resonate well, and all the changes -- while not always easy -- made for a better app. 
AGILE WORKFLOW:
The development process followed a tight agile development cycle, with a new version of the app released to the app stores every 2 weeks. Designers were involved in a variety of tasks throughout the cycle.

SCREENS PROGRESSION:
Below are samples of screen updates throughout 3 years.
MICRO-INTERACTIONS:
Two examples of micro-interactions/wow-factors added to the app. Prototyped with Framer.
That darn CVV Number; always required but always misunderstood.
Flights departing soon are marked with a plane animation, to induce that travel feeling.
FLOWCHARTS:
For more extensive new features and iterations, flowcharts were the basis of the task description. Below samples of flowcharts as implemented in the documentation. 
Sample flowchart: First iteration of (button) chat-bot
Sample flowchart: Study of flow when data no longer is available.
DESIGN SYSTEM:
As the app matured, a design system was implemented to create a visual language spanning all platforms and to streamline the design process. The following image contains screens of different pages of the mobile design guidelines. These were published in an inVision project to share them with developers in the same way as the feature designs were handed-over.
Sample pages of the Design System Guidelines, iOS vs Android
PuBLICATION:
"Choosing a Typeface for Flapp" on Medium. An article for the company's Medium publication, discussing the font choices within the app.
Flapp
1
57
0
Published:

Flapp

Flight booking app on iOS & Android.
1
57
0
Published:

Tools