Mobile website - Airborne airlines
UI | RMITO | FIGMA
As part of the RMITO User Interface(UI) design course, I worked on a design brief for a ficticious airline - Airborne Airlines. AirBorne Airlines was looking to expand on the User experience (UX) research that had been conducted and complete the UI design of their website.
Project overview
Project background:
I started with a design brief from Airborne airlines. The design brief included details of the UX work done so far including personas, low fidelity wireframes and company expectations.
​
Duration:
6 weeks - 04 Jul 2022 to 14 Aug 2022
​
My roles & responsibilities:
Moodboard, user flow, iterations, component library, usability testing, prototyping in Figma
​
Project outcome:
-
Responsive design for homepage for mobile, tablet and desktop
-
UI states
-
Click-able, high fidelity prototype
​
​
​
​
Project presentation:
The project journey along with the project outcomes was presented to the stakeholders via a 5 minute video presentation.
​
Details of the project is documented in the subsequent sections.
Project Flow
Empathise > Define > Ideate > Prototype > Test
I was given a design brief with low fidelity wireframes. To achieve the project outcome of high-fidelity prototype, I followed the UI design process from researching to understand the airline industry and the target audience to conducting usability testing on the mid fidelity prototype.
​
Below are the milestones through which I worked on this project.
​
Fig 1: Project flow
Moodboard
Design direction based on my understanding of design brief and competitor analysis
As per the design brief, Airborne airlines is an airline that promotes ultra-comfortable, economical flights.
Its target audience Budget travelers seeking value for money both in terms of comfort (inflight experiences) and cost of travel (deals).
Keeping this in mind, I started creating the mood board. I started working with some key words which summarized the airline vibes like comfort, holiday and warmth.
I also did a competitor audit to understand more on how airlines targeting similar market positioned its products digitally.
The airlines name - Airborne served as an inspiration for designing the logo.
While doing research on the airline industry, I read an article which concluded that the most used colours in airline brands, globally was Blue and red. I chose to go ahead with blue and red color palate.
I decided to keep simple and used Montserrat and Inter across the website. During the iteration activity, based on the feedback from stakeholders, I changed the font used for airline name to Cormorant Unicase, as the font Montserrat Subrayada seemed a bit difficult to read.
Fig 2: Moodboard
Userflow
User Flow based on the low fidelity wireframes and industry research
The design brief as well as the desk research and competitor audit which I had conducted while creating the mood board, gave me a better understanding of the user flow.
After landing on the homepage , the user had several options to search and book a flight, checkout the deals, explore the various offerings from the airline, access their profile and membership privileges via the user profile page. And also, be able to search through the website on specific questions.
​
While working on the user flow, I also considered situations wherein the user might get stuck or might not find something they are looking for. Hence, I included UI states in the user flow, to help me remember to design for them.
Loading state, empty state, error state, success state, blank state and partial state were a part of the user flow.
This was captured ion the user flow which I created in Figjam.
Fig 3: Userflow
Iteration
Home Page iterations to test moodboard elements of fonts, colours, images and more …
For this project, the design approach was - mobile first. Once, the website design was finalised for the mobile view, I would work on creating views for the tablet and desktop.
​
Before moving on to converting the wireframes into mid fidelity design, I undertook some homepage iterations to see how the various elements from the moodboard would combine..
I created 5 iterations of the homepage with different colours, fonts, images/illustrations and button styles. I shared these with the stakeholders to get their feedback. The feedback was really helped me focus on important design aspects such as like accessibility.
​
One of my designs did not clear the contract check and I decided to not use that colour in my designs.
Fig 4: Iterations to test moodboard
Component library
Every evolving component library
I started with a basic component library which consisted of the styles from the iteration activity and from material design.
​
Fig 5: Component library at the beginning of the project
Having a component library helped keep my design consistent but more so helped me make changes on all pages in one go, without missing any element on the pages.
The component library evolved as my design evolved and I added more pages.
Fig 6: Component library after high-fidelity prototype
It was a definitely a learning curve to create components in a way that they were easy to edit and be included on other pages.
Mid fidelity prototype
Clickable mid-high fidelity prototype ready for usability testing
The design iteration on the homepage, helped me finalise some of the components for the design. I decided to have another feedback session, before going ahead and creating the pages for the primary user flow. This would ensure any issues on the elements is picked before I spend time and effort in creating more pages.
So, I created a mid-fidelity prototype for the 4 main pages – Homepage, Deals, Experience and Help& support.
The feedback on these pages, helped me address some of the elements which I had not considered – like having a hamburger style menu with search inside the menu instead of having 2 elements taking up space.
Also an important aspect of alignment was catch early on, enabling me to ensure subsequent pages followed the correct alignments.
Fig 7: Iteration on 4 main pages
Fig 8: Iteration post feedback
​
Then I went ahead and added more pages to get the primary flow of searching and booking a flight ready for the usability testing..
Fig 9: Mid-high fidelity prototype ready for usability testing
Usability testing
Scenario based remote testing to uncover insights and recommendations
I chose to undertake a scenario based remote usability testing. I recruited 3 users from diverse backgrounds with travel. They were given a scenario to help them explore the prototype independently.
They performed 3 tasks, navigating through the website and I observed their interactions on the prototype and noted their feedback, comments and behaviors.
​
Scenario :
You are planning a short getaway to Singapore and you open the Airborne airlines website
​
Task :
-
Book a flight to Singapore. Find your flight, check your fares ,and book it.
-
Log in your profile to see customised deals for you and book a flight to Singapore
-
Explore other offerings from the airline. Find different experiences, deals and the support you require.
Fig 10: Summary of the interview guide
I synthesized and analysed the interview data using a template in Miro. This helped me understand what worked well and what needed improvement. There were 8 insights concluded from the interview. I used the ‘How might we’ questions on these insights to derive protentional recommendations.
Some of them were quick fixes like adding a button on the flight selection page while others needed me to relook at the entire page layout of the help & support page.
Fig 11: User interview synthesis using MIRO
Design updates
Insight > How might we ...? > Recommendation > Design update
All the 8 insights were looked at from the lenses of the How might we (HMW) question to think about how we can address them.
Here are the top 3 insights with their HMW questions and recommendations.
Design update 1 : On the deals page, the users found it confusing to select a deal. To address this I added a secondary button to draw their attention.
Fig 12: Design update on the flight selection page
Design update 2 : On the Baggage selection , having the same radio button for included as well as additional baggage was confusing to the users. This was addressed by making the included baggage information as a text and having check boxes only for additional baggage selection.
Fig 13: Design update on the baggage selection page
Design update 3 : The Help & support page did not work well with the users This insight was particularly challenging for me as I had to relook at designing the layout on the current page. After some research, I decided to expand the help categories to give users a clear view of topics they can access. Also add an image behind the search bar to make it more prominent.
Fig 14: Design update on the Help & support page
Project outcomes
Responsive homepage design for mobile, tablet and desktop
Once the homepage design for the mobile view was finalised, using the responsive grids, I worked on creating the homepage design for tablet and desktop.
​
Here are the 3 views of the homepage
Fig 15: Desktop version of homepage
Fig 16: Tablet version of homepage
Fig 17: Mobile version of homepage
UI states
I wanted to ensure that my design would enhance the user experience, even if that means they need to wait for the page to load if the internet is slow or guiding them in case they are lost while navigating the website.
Keeping this in mind, i created designs for UI states - Loading state, Empty state, Error state, Blank state, Partial state and Success state.
Fig 19: Error state
Fig 18: Empty state
Fig 20: Partial state
Fig 18: Loading state
Clickable high-fidelity prototype
The website design was updated based on the recommendations. I ensured that the user flow captured at the beginning of the project translated into a clickable high-fidelity prototype.
You can access the prototype via this link
​
​
Fig 21: High fidelity prototype
My learnings
Miles to go before I sleep...
-
Power of feedback : I realised the importance of getting feedback at various stage of designing. Sharing my designs for a quick review to stakeholders,ensured design issues were fixed early on. Also undertaking the usability testing helped me get a perspective of the actual users
-
Updating component library : In the initial stages of design, I was not religious in updating the component library. I quickly realised how much rework would have been saved, only if, i had updated the component library. A note to self - Update the library as you go
Thank you for reading this case study.
Feel free send me an email to connect or discuss more on my work.