Case study: Adding plan comparison feature to App in the Air
The goal of this project was to propose a new feature for an existing app. The main focus was the UI Design implementation by doing the hi-fi prototype using components and variants and also applying the atomic design principles. It was an individual project and I had only 3 weeks before the deadline so I decided to choose an app related to one of my passion: travel. Like this, I could also input my insights.
Project Brief
Context: UX/UI Design Bootcamp by Ironhack
Duration: 3 weeks (Part-time)
Topic: Propose a new feature
Device: iOS Mobile App
Learning goal: UI implementation by doing the Hi-fi prototype using components and variants on Figma. Do the native app analysis. Apply atomic design principles.
Design Challenge: Designing a new feature for an existing mobile app
Contributors: Silvia Vukic
Tools: Figma
Introduction to “App in the Air”
As a frequent traveller, I’m using different apps to plan and organize my trips. One of those apps is App in the Air, which is a travel assistant app designed for modern frequent travellers and helps to plan, book, track and manage your travels. It has also a community of more than 6 million users around the world. It’s very handy to have all your bookings in one app.
Ideation
Firstly I analyzed the app properly, checking every single feature to make sure I create something useful that was missing in the current app, and of course that could make the app even better. Then I scanned the steps that I usually follow when I plan my trips so I could understand what possible feature or idea I could work on.
The features I thought had potential was related to public transportation, budget or comparing planned trips. So I did a feature competitive analysis comparing App in the Air with other apps like TripIt, Wanderlog, Skyscanner, TravelBank and Citymapper.
However to gather some other ideas or insights I had 4 quick interviews with frequent travellers and also with one person that uses “App in the Air” very often. Curiously enough their main needs were related to the same needs I had in mind and I mentioned before: transportation, budget and comparison. Here is one of the quotes that made me decide which feature I would create:
I decided to go for the comparison feature as the main focus but I also cover the budget feature… I will cover the reason in the next paragraphs.
So once I had the feature idea I asked myself:
How might I create a way for travellers to compare their different trips options more efficiently?
Then I created the user journey based on the interviewer’s quote I mentioned before which helped me to identify other opportunities, that I could develop in the future, such as: Save the booking at the same price for 24 hours or an option to book and pay everything in one go.
After this, I created a very simple user flow with one happy path and a shortcut.
Finally, I was ready to start designing the solution.
Design solution
I started by analysing the native iOS app to define which typography, colors and spacing they use to keep the consistency in my prototype.
Keeping this in mind, I created the low-fi frames and I completed 3 concept testing which went really well. I took into consideration some insights to improve the final solution.
Just before starting wireframing in hi-fi, I applied the Atomic Design Principles to break down the homepage frame to know which components, I could reuse throughout the app and the ones that I need to create from the scratch.
Then I created the components and variants that I needed to build the frames for the new feature. Like icons, navigation bars, bars, buttons or boxes.
Solution
Finally here is my comparison feature proposition for the App in the Air mobile app! I’m going to explain to you with 4 frames the bits and pieces of the feature and how it works, before showing you the animated prototype.
1. The app had already the option to save your trips and create a folder where you could keep everything related to your desirable trip. However It doesn’t have a section, so whenever you want to check your save trips you need to go to the Booking section, which for me didn’t make sense. So I added to the “Homepage” frame an icon called “Plans” to keep all the saved trips and where the comparison feature will be implemented. Also, I added a shortcut to compare the trips under an already existing box.
2. If the user taps in the “Plans” icon will land on the “Plans” page where I added a simple view of the travel plan saved. These are organised per dates and years, and in each trip, the box has the main info about the trip which are flights, hotels and transportation, and the prices. So the user can see straight away what he/she has saved already or what it’s missing, also the expenses of the whole trip. If the user clicks on the arrow on the top of each box, a dropdown with more details about each trip plan will appear.
3. If the user clicks on the “Compare button” a modal stack with the checkbox categories to compare will pop up. Once he/she finishes with the selection they can press “Done” to finally be able to compare their saved plans.
4. Here is one of the final frames where they can compare the trip categories very easy and fast. They can swap the categories just by tapping the floating buttons at the bottom of the screen.
This might be a bit confusing so to wrap the presentation of the comparison feature, I’m going to show you a quick demonstration of how It works.
In order to implement the plan comparison feature properly, I had to do some changes in the searching part. I added the continents to the destination options, so users that know which continent would like to visit but they don’t mind the country can compare easily different destinations in one go, also for those people who travel on a tight budget I added a budget filter.
So once the users filled up all the flight info and click on the search button, the app will offer the flights to the countries in Europe that match their desired budget.
Once the users know which option they are interested in, they will need to create a new plan in order to save the flight, hotel or transportation option, in this case, the flights to Marseille.
Then they can compare their plans from the homepage (Booking section) or in the Plan section as I explained before.
Next steps
I would like to complete some further steps in order to develop and improve this feature in the future:
- Do a usability test.
- Improve the Hi-Fi prototype.
- Present the plan comparison feature and all the little changes to the App in the Air team.
What I have learnt
This project was super intense but worth every minute dedicated to it. It was the first solo project and also the first one to focus more on UI design rather than on UX, like the previous ones.
I started this project using an Android mobile device and after a week I changed to iOS, so I could compare both systems. I was very impressed with the differences, not only with the obvious ones like typography and sizes but also the content. There are some options in Android that I couldn’t find in iOS. It was quite stressful for me to change systems because I had a tight deadline and this “change” was time-consuming. However, it was very interesting and useful for me and of course I learned a lot from it. Risking is better than regretting… 😝
I feel that I had improved a lot my Figma skills which has made me feel more confident and want to learn more and more. I couldn’t be happier with the results!
Thank you so much for reading my first UI case study! Next week I will upload a full UX/UI case study for an Editorial magazine so stay tuned 😊
