Client: App in the Air – Your Personal Travel Assistant. Designed for the modern frequent flier. Plan, book, track and manage your travels. Join our community of 6,000,000 users around the world.
Hypothesis: The form has become too difficult to fill out, if help to fill out and split into 2 less complicated steps, conversion to fill out will increase and time to fill out will decrease.
Users: Users of the app are travelers, modern frequent flier.
Why: Outdated design, difficult to scale and no consistency with other patterns in the app.
My role: Product designer.
Team: Working closely with a small team: product owner, IT and QA engineers, analyst and designer.
Result: The probability of filling out a form increased by 6.5% and the time to fill out the form decreased by 32%.
Hypothesis: The form has become too difficult to fill out, if help to fill out and split into 2 less complicated steps, conversion to fill out will increase and time to fill out will decrease.
Users: Users of the app are travelers, modern frequent flier.
Why: Outdated design, difficult to scale and no consistency with other patterns in the app.
My role: Product designer.
Team: Working closely with a small team: product owner, IT and QA engineers, analyst and designer.
Result: The probability of filling out a form increased by 6.5% and the time to fill out the form decreased by 32%.
Part 1
Problem definition
The situation is as follows
- Legacy code and legacy architecture;
- Field components are visually deprecated;
- Many different field handling patterns throughout the application;
- No logical accents - visual noise;
- Inability to scale;
- Duplicate blocks;
- No autocomplete e-mail addresses and passenger names;
+ All fields on one screen, you can see at a glance what you need to fill in.
- Field components are visually deprecated;
- Many different field handling patterns throughout the application;
- No logical accents - visual noise;
- Inability to scale;
- Duplicate blocks;
- No autocomplete e-mail addresses and passenger names;
+ All fields on one screen, you can see at a glance what you need to fill in.
Part 2
Design process
More than 10 different user behavior scenarios were implemented.
All data that were known in advance were added to the fields automatically.
All data that were known in advance were added to the fields automatically.
Adding one new passenger + recognition script
Adding one new passenger with an additional document
Adding two or more passengers
Sync passenger information if there is an account on other devices
Sync passenger information if there is an account on other devices. One passenger, matches.
Selecting from a list of previously started passengers.
Select from a list of previously started passengers - Multiple passengers - multiple selection.
Selecting from the list of previously booked passengers - No document, but it is needed.
Part 3
Testing and analysis
Scanning data from a document
During design, the question arose as to how to position the document scanning and uploading functionality. Two scenarios were proposed:
- The classic pattern with a recognizable icon opened a modal window with the option to select the upload method. The downside was that for new users this functionality was very useful but little noticeable compared to the last version (the current one is old)
- A large block at the top of the page with an icon and text would have worked much better, but was too bulky and didn't work as well for current users.
Part 4
Summary
All scenarios were introduced gradually, testing each step and analyzing user comments. Immediately at the first stages of updating the form, the figures showed the positive result of the work done.
- 6,5%Splitting the form into two steps and improving navigation increased the likelihood of completing it by 6.5%, indicating an improved user experience
- 32%Simplifying the structure and adding tooltips reduced completion time by 32%, significantly improving form utilization.
The new form design now matches the overall patterns and style of the application, improving the overall consistency of the interface. The updated design takes into account future changes and the addition of new functionality, making it easier to integrate.
These changes showed a positive impact on user interaction with the form and confirmed the effectiveness of the chosen approach.
These changes showed a positive impact on user interaction with the form and confirmed the effectiveness of the chosen approach.