Wings
Wings is a traveling app that enables passengers to understand the timing of their trip, stage by stage, and understand the entertainment, amenities, and dining options at their layover airport during a transfer flight.
Role: Product Designer Project Type: Academic Platform: Android Time Frame: 10 Weeks Tools: Pen & Paper, Adobe XD, Illustrator, Photoshop
Design Process
The Double Diamond Framework
My design process for this project implemented the Design Council's Double Diamond framework. The two diamonds represent a process of exploring an issue more widely or deeply (divergent thinking) and then taking focused action (convergent thinking).
Discover
Discover the challenge & conduct research to develop an understanding of the user
Problem Space
A personal struggle turned into inspiration
The motivation for this project came from a challenge that I had been facing - I found that existing flights applications don't provide the travellers with the information they need, like time and places awareness, in order to make their travel experience smoother. For this project, I wanted to explore this topic because it is something I struggled with personally. I wanted to create a platform that focuses on improving the transfer flight experience.
Defining the problem space:
Transfer flights are often cheaper than direct flights, but despite the savings, around 60% of young professionals pay more to avoid the extra time in the airport.
Layovers can be tight and short therefore, the possibility of missing the next flight in case of a delay is high.
Or it can be long and passengers have to spend a lot of waiting time in the airport.
According to study in 2015, the number of connecting flights is 25% of the total flights in 16 of the most important airports worldwide. The average layovers time depends on flight type, and varies from flight to another:
1 Hour for domestic flights, which will increase the chance of missing the nest flight in case of a delay.
2 Hours for international flights, which is not enough time to explore the airport.
4-8 Hours at airports with separate international and domestic terminals, which may cause boredom and frustration.
Project Goal
What do I want to achieve?
The ultimate goal of this project was to improve the flight transfer experience by combining time awareness and option awareness at various stages of a trip in order to equip travellers to better utilize the time they have during a given layover.
Project objectives
Better planning ahead: better support for travellers with their decision-making process by providing them with information regarding the layover time and length, and the transfer airport.
Reduce boredom and pain: by providing travellers with a list of activities, places, meeting new people and recommendations in and outside the airport around their boarding gate.
Efficient notifications: notify travellers of when they should head back to their gate based on their scheduled boarding time and estimated walking time from their current location.
Preliminary Research
Competitors Analysis
Analyzed 5 competitors about online airport guidance, flight applications, and in-person transferring services to identify potential design opportunities.
What I learned:
Online transferring info websites are text heavy and confusing for users.
Most of applications don’t provide places recommendations, time progress and unavailable online.
Current efficient guidance at the airport depends on a lot of human resources.
User Interviews & Insights
The goal of the interviews were to dig deeper into the behaviours, motivations and pain points of young professionals (21-34) to gather experiences and thoughts about the flights layovers, and to understand common misunderstandings and why they take place.
The objective is to extract insights in order to develop a primary persona that would guide my design and solution process.
Insights: After organizing the interview data into common themes, I gathered the following insights:
Awareness & Feelings
Interviewees had experienced negative feelings during the waiting period due to lack of time and options awareness: anxiousness, boredom and annoyance.
Exploring new areas
Interviewees were motivated to explore new areas around their gate in the airport instead of sitting and rest all the time.
Airport logistics
Interviewees suffered from long waiting lanes, the lack of clear signage, crowded waiting areas, uncomfortable seats and poor airport logistics.
Define
Synthesize research findings to determine where the users problems exist
Primary Persona
Who am I building this product for?
Using the interview insights, I developed a primary persona to help solidify the target users needs, behaviours, experiences and challenges. This could then be referenced moving forward to ensure that my design decisions were aligned with my user.
Experience Map
Discovering areas of opportunity
I then created an experience map to visualize the current process that my persona would go through. From there I was able to identify specific areas of opportunity based on the pain points they faced.
DESIGN QUESTION
How might we help young professionals passengers better utilize their time during a given layover in order to improve their overall flight experience?
Ideate
Explore potential features and solutions
Task Selection
What does this application do?
Thinking about both the HMW question and my primary persona, I created a products value proposition to help determine the core functionalities of what should be included within the app.
Core Value Proposition
To improve the overall experience of a transfer flight for passengers.
User stories
I created a set of 40 user stories based on my persona, to meet the needs of his goals and find a solution of his frustrations. These stories will reflect specific features and functionality users might expect from a digital solution.
Core Epic
I categorized my user stories into epics (themes), and identified the one that would best demonstrate the value proposition.
Task Flow
I pulled some of the user stories within my core epics which would become individual tasks for the user to complete. I arranged them into a task flow, thinking about the step by step process that a user might go through.
This task flow shows the user finds a desired activity in the airport and navigates to its location while checking the remaining time for his next flight.
Ideation Sketches
Based on my user findings, user stories and task flow diagram, I sketched out different ideas for possible solutions while staying aligned with my task flow.
Then I chose the most compelling one to convert it
into a digitized version.
Mid Fidelity Wireframes
Test
Turn the wireframes into a working prototype and begin user testing in order to reach a desirable product outcome
Usability Testing
Identifying and solving usability issues - Round 1
I conducted 2 rounds of usability testing, each round with 5 testers, each tester was given 5 tasks to complete.
After each round, I synthesized the feedback as well as the observations I had made. I used this to determine areas that needed to be changed in order to improve the overall usability of the product.
Notable changes in some screens
Identifying and solving usability issues - Round 2
After completing the second round, all 5 testers were successfully able to complete each task with no clear major usability issues. I made some minor adjustments and created the final greyscale wire-flow version:
Visual Design
Defining the brand values and visual identity, and creating the final prototype version
Brand Identity
Defining the brand values through keywords
With the final wire-flow established, I started thinking about the visual identity of the brand before creating the high-fidelity prototype. I came up with a list of keywords and (More A than B phrases) that represent my brand:
• More simple than complicated.
• More professional than casual.
• More clear than convoluted.
• More modern than dated.
• More instructive than uninformative.
• More practical than impractical.
• More exiting than boring.
• More safe than insecure.
Defining the brand tone
Based on keywords, I created a mood-bored to get inspiration for brand tone and overall mood of the brand.
Since my application is all about Time and Options Awareness, I wanted my colours to speak trust, stability and clarity. Taking Accessibility principles into consideration, I achieved AA colour contrast ratio:
My primary colour is Dark Blue It symbolizes trust, loyalty, wisdom, confidence, intelligence, faith, truth, and heaven. It produces a calming effect, and it is associated with depth, expertise, and stability; it is the most preferred colour for mobile applications worldwide.
Teal is my secondary colour of choice. It combines the calming properties of blue with the renewal qualities of green. It is a revitalizing and rejuvenating color that also represents open communication and clarity of thought
Experimenting with names
After experimenting with different names related to travel and flights, I decided to go with the name WINGS. I like that it is simple, clear, evocative, different, and represent the goals of my brand.
Narrowed down list
Tripo
Trave
Wings
Vistour
Reise
Selected Name
WINGS
Brand Logo
I wanted to create a logo that would represent my applications goals. from the word “Wings” I tried to have 2 combined wings; One represents Time, and the other represents Options. I used a grid based on the Golden Ratio.
Then I injected my brand colours into the final sketch, and created a logo which can be used as an abstract logo, Wordmark logo, or both.
Application Icon
I created the app icon at 400% (192 x 192 dp), which will display edges at 4dp. By maintaining this ratio, any changes to the original will be scaled up or down proportionally, which preserves sharp edges and correct alignment when the scale is returned to 100% (48dp). I used the brand logo with a grey sky background.
Typography
I chose the geometric sans serif typeface [Poppins] since it goes well with the modern clean style that I wanted to create for my application, it also renders beautifully on any digital browser, with good readability.
Iconography
I chose Material Design icons for this project, I felt they are modern and clean and fit with my application style. Moreover, they were originally designed for Android, which is the platform I designed this project for.
UI Library
I created a UI library based on the Atomic Design System as it is a great way to leverage the modular and reusable nature of UI components. It lets the design team share these components across projects, save time and keep the UI consistent.
Final High Fidelity Prototype
Putting it all together
Once the visual identity was developed for the brand, injecting colours, logo and images, I began working it into the prototype. To view the final prototype and finished product please click the button below.
Promoting the brand
How to promote the application?
Responsive Marketing Website
In order to get Wings application on the market, so it can be downloaded and used by users, and after 2 hours of usability testing with users, I created a responsive marketing website - A desktop version and mobile version.
The following sections were included:
Header section with Top navigation bar with brand logo, app download button, brand tagline and a screen mockup.
Features section with time awareness feature, option awareness feature and how to use videos.
Pricing section with 3 pricing plans (free personal plan, premium plan and unlimited plan).
Testimonials section with 3 user testimonials.
About us section with the brand story.
Footer section with brand logo, download buttons, brand social media, newsletter subscription, company contact information and same tabs of the header.
Multi-Platform Integration
After creating the marketing website for my app, I wanted to transition my app to another platform to let a bigger sector of my users benefit from it. Based on my primary persona and the core value proposition, I decided to design for Google’s Wear Os, since my application is a native Android one.
Wings users can get notifications about their flights, continuously informed about their layover time, can navigate to any place within the airport and more.
Future Thinking
Next Steps & Key Learning
What’s next for Wings?
Although there were many positive feedbacks after 2 rounds of user testing, more improvements can still be made to this project:
Improve the information hierarchy on some screens since it’s still somewhat confusing for some users.
Simplify some of the animations on the Home Screen for ease of use.
Add more tasks to the application, like booking flights and comparing flights prices.
Add a solution for the users in case of a flight delay.
More testing and exploration.
Tarot Card of Tech: The Radio Star
One important area that I would like to focus on is how the flight and airlines industry would be effected.
Using Wings application, users don’t need to ask employees at the information centre of the airport for any information related to time remaining, places or their next flight, therefore, their physical job is not needed anymore.
In addition to that, users will no longer need any navigation application within the airport (like Google maps), since Wings has a built in navigation feature.
Key learnings
Project take-aways
Looking back at what I accomplished in the last 10 weeks, I learned how creatively solve problems by focusing on humans behaviour and needs rather than their demographics. Doing that will increase the satisfaction ratio which will reflect positively on the profitability of any project.
Testing & Feedback
When working on a project, we can get caught up in our own thoughts. I learned to distance myself and get feedback from testing on users, and that makes me see things that I can’t see on your own.
Research
Research is the most important phase of the design since it comes first when you start to design any project. Fully understanding of the problem space and creating user personas based on interviews will result in having a strong base for your next designing steps.
How to present yourself
I finally learned how to present yourself and convey your ideas to others, that makes an enormous difference in how you view yourself. With the right mindset, confidence, look and behavior you can improve your self-image and feel your best.