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 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
Fig 2: Moodboard
Userflow
User Flow based on the low fidelity wireframes and industry research
Fig 3: Userflow
Iteration
Home Page iterations to test moodboard elements of fonts, colours, images and more …
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
Mid fidelity prototype
Clickable mid-high fidelity prototype ready for usability testing
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 2 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 : 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 13: Design update on the Help & support page
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 14: 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.
