Oct 01, 2020
UI
UX
Front End
UX Engineering
App Development
Redesigning a Fluid Mobile App for Wego
Wego is one of Asia's most popular travel websites and the largest in the Middle East and North Africa. The platform is a mobile-focused service currently available in 59 countries and 22 languages.
The first step in the company’s journey to create its award-winning mobile app started with improving its interface and user experience. Their original app was plagued by poor UI and UX practices affecting sales and contributing to bad reviews. To fix this, Wego wanted to move into a progressive web app that provided its users with a native experience.
The challenge was to create an interface that was clean, cohesive, and intuitive. We worked with Wego’s design and development team to correct the app’s UI/UX issues through a series of iterations. The redesign of their app lead to significant improvements in Wego’s numbers:
Ratings on Google Play increased from 3.2 to 4.1 stars
Monthly user retention improved by 300%
Uninstall rates dropped by 25%
User registrations increased by 40%
The engineering team’s product development was expedited by 300%
The Challenge
Outdated design and poor user experience made Wego’s mobile app difficult to navigate. The company wanted a human-centered interface to provide its users with a native experience. The challenge was to make Wego faster and more intuitive while helping their product development team streamline their production process.
The Process
To solve this problem, the team applied a design thinking approach. We started by investigating the problem and ideating solutions refined through multiple iterations with users. Below is a break-down of each step:
Step 1: Understanding / Empathizing
After reviewing the existing version of the app and conducting a detailed study, we found the following problems:
UI was outdated and inconsistent
UX was poor and navigation was hard
UI/UX was not optimized for mobile devices
From a UI standpoint, an outdated visual layout and poor color palette choices affected contrast and legibility. This was especially noticeable with the app’s CTAs. Primary CTAs were encased in bright yellow buttons with white fonts, making them difficult to read. Secondary CTA buttons for “Search” and “Filters” also had legibility issues because of poor contrast. There were problems with brand identity too—Wego’s logo was absent from most sections.
The user research revealed another issue that Wego’s team had been unaware of. The app’s primary CTA’s had been set up to highlight the price of hotels and flights. This was done under the impression that price was the main factor influencing a user’s decision to tap on a flight or hotel. It turned out that price was not the only thing that mattered to users. The researchers found that users considered a combination of three elements — reviews, location, and price — when shopping for flights and/or hotels.
Step 2: Ideation
The team followed Google’s Material Design guidelines to optimize UI elements and interactions. This system provided us with a set of ground rules to correct Wego’s disorganized layouts, inadequate color palettes, and limited interactions.
On the design side, we revamped the app’s layout to correct alignment, balance out proportions, and improve the use of white space. This resulted in a more organized design and simplified navigation. Strong, high-contrast colors combined with better typography improved legibility issues across the application and made CTA’s and other design elements more visible to users.
Wego’s original app featured a very limited range of gestures and transitions. This slowed down navigation and affected user flow. We used Material Design interaction and motion principles to optimize the app for mobile users and ideate responsive and intuitive interactions.
Step 3: Creating a Source of Truth
We developed a UI component system to ensure that all the changes would make it through the development process. This source of truth contained a collection of design elements that had been tried and tested by both the design and development teams. Its function was to improve communication between the design and engineering teams, ensure cohesiveness, and speed up production.
Both designers and developers could draw components from this library and reuse them to create new designs and interactions. Reusing components would save them from having to create new ones from scratch every time something needed to be added or changed in the app.
Step 4: Prototyping and Research
To test the solutions, we created a series of fully-functional prototypes featuring all the upgrades that we intended to make on the app and used them in experiments with users. This approach allowed us to identify problems fast, iterate, and improve user experience.
Since we had already created a UI Component System, developing prototypes was easy and fast. Reusing the components from the library for iterations saved us time and allowed us to run more tests. During the iteration process, we refined the elements in the UI Component System to ensure that their code was clean and the engineering team could reuse them natively.
Collaboration was key during this step. We worked closely with the design, product development, and engineering teams. All sides were able to inform each other’s perspectives to work towards results that were useful and feasible.
Results
The new Wego app was faster and more intuitive. The introduction of Material Design principles and UI/UX best practices resulted in a clean, consistent design and a more fluid user experience. The implementation of the UI Component System ensured that the end-to-end design came out as planned and that Wego’s team could reuse the elements in it for further development
Conclusion
The new user-centered app helped Wego boost its growth in the mobile-first markets of Asia. Their development team was now better equipped to solve problems and keep building and enhancing the app thanks to the component library. The mobile-optimized interface provided the app’s users with a clean design and an experience that was more streamlined and intuitive.
