2015 Emirates Travel Hackathon(2): UX/UI Design for flight search

In our team, I was in charge of the UX/UI design.

Emirates Hackathon in Runway Incubator

Emirates Travel Hackathon took place in Runway incubator, located at 1355 Market St, #488 (The Twitter building). 

After checking in and getting our name tag, we went up to the fourth floor to participate the introduction panel, talking about the prizes provided by 20+ companies, the API coaching sessions and the theme for this Hackathon. 

Schedule for Emirates Hackathon

Objective: "Enable different personas to search for flights online or on mobile devices in new & creative ways" (each team should select a specific persona and re-invent search accounting to their special needs)

The Emirates manager said Emirates would like to change the way what people have done for the last 30 years.

While people are used to searching flight by entering dates and destinations, Emirates would like to change the way flight search has operated.

The Judging Criteria was
Unique/Innovative/Feasibility/Scalability/Economically Valuable/Customer Appeal

Our inspiration: Square Cash/Periscope/Kayak

Our team started brainstorming, thinking about what we could build and what we could change the process. First, we came out with an event-based mobile app inspired by Periscope, which let you broadcast live videos to the world. Then, Square Cash is another app that is pretty straightforward that you can send, request, and receive money from your phone contacts. We really like the simplicity  of the UX design.

It took us about an hour to generate ideas and finalize our App's structure. We tried to combine these functions to change the flight search process and made it easier for people who're concerned the budget the most.

Our App key features are:

1. Enter the budget for your flight
2. Browse the events
3. Book flight tickets 

Then, I started to do the prototype/interface. The others built up the backend system that connects to the API.

Reference 1: Kayak Interface

Before draw the flight interface, I took a look at Kayak that I use the most often to get basic understanding of flight search.

Kayak's design is quite clear that shows the basic information: time, airlines, airports, hours and price. What is impressed me is that it use numbers between the arrows to illustrate the numbers of transfer flights, making the screen neat. On the left side, you could adjust the range of times like what Airbnb does for controlling customers' budgets.

Reference2: Skyscanner Interface

One website that Stanley introduced to me is Skyscanner, which also uses white background with thin gray line to separate two flights. By using different colors - red and green, it illustrates that if the flight is direct or not. With  green tag , we could tell the price quite clear.

Different flight search interfaces

As you can see, even just for flight search, there are many types, focusing on divergent dimensions that their designs are a lot differences. In conclusion, the basic information what we need to show to users are :
1. Price
2. Departure and Destination locations
3. Flight duration
4. Date

The other features are:
1. airlines (Delta/United airline/Emirates)
2. non-stop/multi-stops flight
3. where to transport (shown in the third screen)
4. airline seats(Economy/Business/First Class)
5. miles
6. Filter
7. Search

There are quite a lot details for flight search designs. However, for our case, we would like to reduce information as much as we could. After looking at these apps, I came out with my first design version.

Original Design (1)

The first and the second interfaces show what we "learn from" Square Cash and Periscope.
Enter the price and it will show the destinations below your budget. The number in the bubble illustrates how many events are happening there during that time duration.

1. Font: Helvetica
2. Bubbles font: Helvetica
3. Menu's Font: Century Gothic

Original Design (2)

Then, if you click the bubble you're interested in, it will list the events during that time. After picking which interests you the most, you could see more details about these events (pictures/description/link to websites) In addition, you could save the events to your favorite list, which turns white heart into red. Finally, you could browse all the flights and book one.

I kept the Emirates icon and customer account on the top and used wine red for the background, and its lower color value to make the screen harmonized. I used bold Century Gothic with the title and Helvetica for content. On the top of the last screen, there are icons showing you the arrival/departure cities. In the middle of the arrows, you can tell how many transfer flights by the listed numbers.



It took me probably 3 hours(afternoon) to search for other similar apps, think about the functions and drag all the elements by Keynotes, Photoshop and Illustrator.

UI Design: Trial and Error(1)

For me personally, I would try several different UI to see which works best for me. For example, I change the fonts, icons, or the positions. To visualize the best option, I need to see different versions and play with the elements that to be able to validate.

UI Design: Trial and Error(2)

Take the flight search screen for example, the first version was the left one; however, I thought there was too much information that I started to reduce some reductant informations and refer to other apps' designs to get inspiration.



However, it still needed User Testing.
For the 24-hour Hackathon, my teammates are my best users. 
They looked at the interfaces and gave me straight/harsh criticisms and direct feedback.

For example, Yao-Jung did not like the menu on the third screen on the map. He thought it was quite awkward that the titles were too big and he suggested I use icons/images. In addition, he did not buy the "real button" things. He said modern apps use flat bars instead and recommended me to take a look at the designs of Live Nation and Ticketmaster. Stanley disliked the "pink" bar on event interface/flight screen (for me, its more like lower the opacity), he felt white backgrounds would be better.

Inspiration for event page: Live Nation/Ticketmaster

As you can see, they both use white backgrounds and the font would be smaller for the title and content. Besides, the background of Ticketmaster is quite blurry and lower in contrast.

Inspiration for menu bar: Spotify/Fly Delta/Kayak

Before that, I did not notice that there are so many apps' menu bars are quite similar: small icon, space and small font. People nowadays they get tired of words. That's the reason why app designers use lots of icon to release this pressure.

After taking a rest for a while and taking a deeper look for these app, finally, I drew the finalized version for our app.

Final UX/UI (1)

Final UX/UI (2)

As you can see, there were lots of changes and details that made it more modern and clean. With red based(Emirates icon) top bar, the background is white/light grey. In addition, I adjust the font to Calibri which are easier to read on mobile application and make it smaller. Flipping the positions between dates and events, the interface looks neat and sharp.

Moreover, because of the limitation of technique we acquired, we deleted some functions (favorite list, event page for the API issue, numbers of stops). However, the final design looks much better than the first version.

Takeaway: 

1. Don't be afraid to learn by copying others. 

I learned a lot from this experience. Stanley concluded that what you need to learn from UI is "copy the work of others". Because there are always great designers behind every popular apps that make those stand out from others. At first, I did not that agree with him because I thought we need to be unique and special. Nevertheless, app is kind of a universal design, rather than an artwork. We should play with as many apps as possible to see which one you think would be easier to use. (For instant, I really enjoy the UX from Airbnb Website) 

For more argument: 

Opinion: tomas libertiny on copying in design

http://www.dezeen.com/2013/08/08/opinion-tomas-libertiny-on-copying-in-design/

2. Taking Constructive Criticism

It's not that easy to accept criticism with grace and appreciation. However, we have to know that we'll always have room to improve. For my experience, the users gave me their direct feedback that was quite useful and benefit to UX/UI design. A true friend will want to help your design be better. Remember that those who offer criticism only want to help(probably lol).

Read more: 

How to Take Constructive Criticism Like a Champ

http://lifehacker.com/5957850/how-to-take-constructive-criticism-like-a-champ

Next, let's see what did we do at the Demo Pitch and how was the final version working with our talented software engineers :D