Client: Wego.com
Roles: User Interface, Visual design, User Experience.
Fields: Meta search engine, Travel.

 

Challenges

With the rapid growth of mobile users in Asia we're challenged to expand our product and give more access to broaden users.

In the past few years Asia has shows the rapid growth on the number of mobile broadband users. More people accessing the internet using phones & tablet. Our analytics also showing the same trend where we conclude that It's a must strategic plan for us who to serve this market. Starting with android app will be make more sense, but with limited resource, we decided to build the iPhone app first as a pilot project.

 

 

Discovering 

On every project I tried to understand the key mission and see where I can contribute. I discussed & brainstorm with the VP & other manager to propose how we're going to working on it and the constraint around it. As an UI/UX designer I was in charge designing all the interface & experience of the app. I found that the more I get better understanding of wego product, the more I understand the design challenges that lies when you designing its product. There are few challenging constrains we face:

  1. Localization 
    As a meta search engine that support 50 languages we need to consider how long each content when translated to these languages.
  2. RTL
    As part of the localization, we need to think how to design in reverse. Some countries in middle east use arabic language in RTL system.
  3. Resource & Time
    We don't have any developer yet, and it's our first time developing an app. Beside that we're really catching up with the deadline we aim which is only couple of weeks.



Ideation & Wireframing 

While we're looking for a partner to develop this, we started the process by brainstorming ideas and laying out some features we want. We're inspired by our existing product base, we try to transform its functionality to our iPhone app. VP & Manager then come up with initial wireframes (see some of the manifest below).  I tried to revamped some of the screens on the basic but our VP helped me us lot by laying out a base visual of our app.  (see few of our manifests below)

 

Visualizing

We've got initial layout for our app and it's time to convert it into pixel perfection design. I did all the design using photoshop. We tried to complete first sprint doing the hotel part and later move to the flight. There are few main parts of app that: 1) Search Form 2) Search Result 3) Details page so we focus on fixing those page first and then go to other part such as filter, shorting, handoff, history & settings.

 

Search Form

As a meta search engine company we want user to perform the main task right away. To do search. I tried to keep the visual language the same & consistent with our existing brand & product (website). Big field & button for better usability. At first we decided to use tab switch for one way/ return flight, but our dev have an idea to clip it on the date picker (tap 2 dates for return flight, tap 1 date for one way). We make sure that each field has enough space so it's still looks good when localized & transformed to RTL.

Flight & hotel search form

 

Search Result

Consistent is important between to let user experience the same & recognize the brand. Here we want to do that by maintaining the similar visual approach on how we display the search result both for hotel & flight. We try to not give too much information on each list since most people will skim & compare here.

flight search result on the left (one way). Hotel search result on the right

on flight side, we have different view for roundtrip result as we need to display both time, duration & via. We also took different approach on leg by leg flight. We found that people inside the country that do roundtrip flight is more likely to choose different airline. So we adopt a grid layout, side by side so user will easily book choose their depart & return flight from different airlines.

Left: roundtrip result (international flight). Right: leg by leg result (roundtrip domestic flight)

 

Detail Page

The challenge here is how to display lot of information in a single screen. These informations sometimes can be very long, sometimes can be very short. Since we're a metasearch engine, we can't have a control over the content. Thus we tried to laid out universal design for this that can be flexible in both way.

Explore Screen & explanation (click/ tap for bigger pict)

As you can see above, we use collapsable elements where we can clip long information so user can scan information they need it in a quick way. Beside that, we want to minimize thing by having partners/ airlines/ hotels/ OTA displayed and visible on default iPhone screen.  This way user can easily choose their preferred airline/ OTA.

 

Hand over

Handover is a crucial things in this app. We need to make sure that the experience between our app to partner site is easy & comfortable. We do this by opening an in app browser and explaining where we transfer the user. 

Handover to Agoda

 

Filters Screen

We have complex filter on our website. When we translate it to mobile app, we need to think carefully which filter that we're going to use. Based on data & research we shorted the filter where people find benefit the most.

Left: Flight filter. Right: Hotel filter. Orange corner on each section indicate user modify the filter.

 

Other Screens, icons, specs & flows

There are lot of more other screens like calendar picker, history page,  promotional page also icons and specs etc. While I love to explain design decision I made on each page, I'm afraid it will be pretty long. So feel free to see & inspect the screens below

 

Summarize

I've been doing this for months and this is one of the challenging project I've handled. Alway collaborate intensively, gather as much as feedback & suggestion to help plan & execute the project. Sit down with the developer so the project can get done faster.

Quick lesson learned:

  1. Don't spend too much time on refining things before everyone agree. I did these mistake where I was too focus on refining one hi-fi wireframes. Limit the wireframes and aim for function. Apps like flinto help me motivate to complete all the wireframes and let you see how it looks like. 
  2. Prioritize user. Some times when the ego is high I want to plan fancy interactions & delicate visual design, but it will be useless if most of the user target will not understand/ not get used to that. Obvious things always win (clarity & usability)
  3. Launch & iterate. This is a must on every project. Sometimes it's better to launch the app in the minimum functional feature and gather data from it rather than spent long time building an app to aim for perfection. In this way, you can get better input on how you're going to iterate the product
  4. Timing is important. We've been doing this when we're still in iO5/6 era but in the middle of the development, the iOS7 beta is out and when our app launched first time the app feels dull already. This is because we still adopt skeuomorphism language where iOS7 is flat & focus on interaction.
  5. Make sure hire in-house developer. We spent lot of time managing, communicating, & assisting the development of the app. This make the development take long time. Hire great developers where they can implement your idea and supportive. No matter how good, how fancy, how neat you design the interface & interaction; if you can't get a good developer, this will not likely happen.  

Fun facts:

  • My first time app that launched quite well.
  • #1 top free apps on Indonesian app store.
  • The app is featured on #1 travel app on Saudi Arabia (I think we're the first metasearch enginge app that support RTL!) and #3 in Indonesia
  • iOS7 version coming soon!
  • What I did: Visual, UI, UX, Interaction, mobile design

Wait, I've read this long and I don't see what you post on the banner!? owh that's a current iOS7 version that I'm still cooking, take peek here

Download the app