Wego


Responsive web design

From April of 2015 to January 2017, I worked in Wego, a travel search service used by 10 millions people around the world every month. I helped travellers make right choice of flight and accommodation through search and booking service on Wego.

I worked across many platforms including iOS, Android and the web including desktop and mobile web, with a focus on web products. Following are some of projects I worked during my time in Wego

Hotel Map

The hotels map feature was launched on Wego mobile app in November 2015. I worked with our mobile interface designer, Herajeng, to create this prototype. It was to demonstrate how different elements in map view work together. This helped mobile developers understand the specs of design and build a successful feature being used by millions of people. The filter control stays at bottom of the screen for better usability. The commonly used filters are visible while other filters are accessed through button More (you can see this in Framerjs prototype).

I started prototyping on Framerjs since it included the logics of interface and how elements animate. Due to some reasons, the shared link doesn’t show the same prototype with what I have on local Framer Studio and has few bugs. I changed to Principle for Mac and realised its amazing speed of building animation with simple logics. The Framer prototype still served its purpose as I managed to code quite complex logics in the map view so it works like a real app while Principle prototype showed better animation.

The prototype was iterated according to feedback I received from product managers and design team.

Framer prototype

Animation

Search Loading

A problem for any travel search engine is the time required for data polling after user hit button Search, which make people feel like waiting for long time. In this design concept, this problem is solved by a progressive loading animation. The new loading animation intend to create a sense of frictionless experience, taking people to their exciting destination by having big image and “opening up” movement of elements. My idea is inspired by article The Illusion of Time, by Adrian, which introduces solving time perception with illusion, instead of actual speed.

In search result page, different elements including filters, flight cards, promotional ads are arranged in sequence to avoid cognitive overloading for user, helping them understand the results. This also helps achieve business objectives of having ads and marketing element in the future.

The prototype was built in Principle.

Animation

Filters

The collapsible filters allow a quick overview of what people can select. The UI components such as dropdown, slider and checkbox are used to help user find their preferred flights. The status at the top shows how many flights are being displayed out of how many flights found in the search unfiltered. When people choose Show All, all filters are reset. The copy Show All is proven to be clearer than Reset.

Google Analytics showed that using certain filters lead to higher conversion rate of booking. The order of filters was based on this finding.

More projects are being updated here