Ironhack project 3: redesign an app — Air France
Making flight booking great again!
As I’m progressing through the UX/UI bootcamp I’m following at Ironhack Paris, I’m reaching the 3rd student project of the training which is basically to redesign a couple of an existing app screens in order to work mainly on our UI skills. This is the main difference between this project and the two firsts that I did these past weeks. Other difference: it’s an individual rather that a group project.
If you did not read the stories of my first two projects, you can take a look at my first project about immigration and my second one about a local shop e-commerce website.
So as I said, the main goal of this new challenge is to come up with redesigned screens for an existing popular native mobile app. For this project I decided to work on AirFrance’s official app.
I chose this app because I mainly used Air France for my flights lately so I’m pretty familiar with it and get frustrated by how unappealing it is for a travel booking/managing app.
HEURISTICS
The first step for me was to replicate the screens I chose to redesign. For me, it was important to choose the 3 most important screens of the app:
- The homepage screen
- The flight booking screen
- The manage my booking screen (with 2 versions: incoming and past flights)
I replicated each of these screens on Figma, taking care of finding the right colors & the right typography. You can see the screens below:
The goal behind replicating those screens is to understand well how the app works and especially how information is structured and displayed on your screen. This way, it’s way easier to understand what works… and what does not.
This was the time to do a heuristic analysis of these screens. Heuristics help us review a design to ensure we don’t miss any important function. While creating a website, it helps you think through the possible outcomes quickly and arrive at a solution that may solve your unique problem.
After taking some time to analyse the heuristics of Air France’s app, I came up with the following points:
- Flight booking isn’t accessible from the homepage: as a travel booking app, I feel it’s important to have the main functionality directly available on the homepage. Of course you can tap on the teeny tiny navigation bar footer but I really feel it’s important to have at least some sort of a button/section well highlighted on the homepage to redirect the user to the booking page.
- Selecting dates is different screen than the booking screen: when you actually are on the booking screen, the main action offered to you isn’t “Look for flights” as you mainly expect but “select dates”. Which means that it adds another screen before you actually have the flight offers. My assumption was that it would be faster to have the dates options directly on the screen rather than putting them on another screen and then adding another step to the booking process.
- Colors consistency: as you can see on the screens above, we have lots of different shades of blue for the header, the titles, the texts, the links, some backgrounds… It’s important to have a consistent design while designing an app in order to facilitate the user flow and enhance the user experience.
At this time I then knew what did not work well on this app. The other huge thing that wasn’t working for me and is the main reason I chose this app is how does the app actually looks. I feel it is very outdated and not appealing at all. It is supposed to be a travel app and for me when arriving on the homepage, I do not feel inspired at all. So I had to keep this in mind for later on when I’d try to solve the issues listed above.
But what are the competitors doing? Let’s jump to some competition analysis in order to help us creating the best design for Air France.
COMPETITORS ANALYSIS
Finding Air France competitors apps was very easy. Lots of main international airlines have their own apps and functionalities are quite similar. I’ve downloaded at least 20 of these apps and focused on a couple of them that I found interesting in terms of design choices and layout.
I’ve then made small moodboard to sort of summarize the interesting design choices or layout ideas of each of these apps:
So I kept Korean Air, British Airways and American Airlines apps because they each have some interesting things that I’d want to have in my redesign:
- Color consistency: they all have a clear color palette of primary, secondary functional and neutral colors and I really find they all made good use of their palettes. It was also easy for me to imagine this on the Air France app because these 3 airlines have the same 2 main brand colors than Air France have: blue and red.
- Accessibility of the booking screen: all these apps had a clear link or even a booking section on the homepage which is important considering the main function of the app is to book flights!
- Travel suggestions and inspiring pictures: travel should inspire people and displaying beautiful pictures of worldwide destination make the user actually wanting to travel. These apps all display some great pictures of great destinations in a different way but they all do.
With all these points in mind (heuristics and competition analysis), I had everything I needed to start to redesign the Air France app on Figma.
THE REDESIGN
After making some quick sketches to get an idea of the layout I then designed the new screens on Figma. The goal of the exercise being only to focus on the screens redesign, I did not have to create the relationships and animations between each page but I did the basic one in order to get a better understanding of the new flow.
If you want to see it in details, you can access my Figma prototype below:
HOMEPAGE
As I stated earlier in this story, the original homepage (on the right hand side) isn’t appealing and not actually leading the user to the booking page. It’s only displaying informational cards with links.
I wanted to completely change the layout by getting rid of the color header and display a dedicated greeting message that would be available when logged in. Then the “Je veux partir à” is dynamic and the destination changes every 3 seconds: when the user clicks on it, the app redirects to the booking page with the destination already filled in.
Same thing goes for the cards below : we have suggested trips and then last offers cards that redirects to the booking page when clicked on.
I’ve also modified the footer in order to make it clearer and reduce the options for the user. Instead of having the account and “plus” icon that are displayed on the original app, I decided to integrate all these in an overlay footer that you can drag to the top of the screen and then have all your secondary functionalities/section of the app as you can see on the screen below.
BOOKING SCREEN
Having another step before actually seeing the flights offer and having a rather dull design look, the booking flight screen had to be completely redesigned as well.
I kept the booking part classic in order to not lost the user to trip booking standards but I’ve made it clearer and brought back the dates selector on the same screen than the other travel informations. I kept all the functionalities of the original screen so I also included the loyalty program options and the recently searched cards.
The other main difference of this screen is also that I made it a little bit different than the homepage. As you can see, the footer isn’t appearing because I wanted the user to be really focused on flight booking. Of course I kept some things that let the user completely free in his choices with the cross on the top right and also the fact that you can drag down the screen and get back to the homepage or the booking managing page.
MY BOOKINGS — INCOMING FLIGHTS
For this screen, I kept the original layout for a case where the user does not have any scheduled flight. I’ve just made it more consistent with the overall design.
MY BOOKINGS — PAST FLIGHTS
For this screen, I’ve been inspired by the cards/tickets iOS app and wanted once again to emphasize the inspirational aspect of travelling with huge picture instead of tiny thumbnails.
So here is my redesign proposition for Air France application. But that’s not the end yet. While redesigning the screens, I created a document that gather every design element of my creation: my project’s style guide.
STYLE GUIDE
A Style Guide is a set of standards that communicate design instructions to a team or organization. Style Guides align designs with a company’s voice and mission.
For my project I tried to stick to Air France brand color palette because I find it very classy and elegant but I needed to have also icons that goes along with this style I wanted to give to the app.
Here you can see a glimpse of my redesign style guide with the color palette, the typography and the icons. For more details, you can consult the entire document here.
CONCLUSION
Being familiar with visual design before the bootcamp started really helped me on this project. I feel that UI design is the domain I want to focus in so this project was very pleasant to do, especially with the fact that I could chose the app I wanted.
Thanks to the design critique session we’ve made in class, I realized I still have a lot of work on these redesigned screens especially in text visibility and spacing but overall I’m pretty happy with the design.
Let me know your opinion on my app redesign and do not hesitate to leave any comment. Now it’s time for me to wrap this one up and see you on the next project!
