Fave App Revamp

Redesigning consumer fintech app experience for 4M users.

Timeline
Dec 2019—Early 2022
PLATFORM
iOS & Android App
MY ROLE
Senior Product Designer
Introduction
Problem
Goal
Impact
Our Users
Process
Final Designs
Learnings
Future

Introduction

Fave is one of Southeast Asia's fintech startup that helps consumers save, while empowering small and medium-sized enterprises to grow in the digital economy. Fave's key offering includes cashless payments, online/offline deals and other offers. Fave has been acquired by PineLabs, an India-based unicorn on April 2021.

In this project, we revamped the user experience and redesigned the UI, which is one of the largest projects at Fave since 2019.


My Role

I'm the lead product designer for this project. I collaborated with product designers (Archie, Arvin, Esther) and product managers (Laurin, Aishah) throughout this project.

Problem

Since 2016, Fave's app experience has not been changed. Here are the key problems with the core experience.


fave
PROBLEM #1

No Relevancy

Irrelevant content directly impacts the conversion rate. Every individual is unique but every day, the app recommends irrelevant content that are not personalised to our users.

EXAMPLE

The app shows female Deals to men—the user might feel that the app is not for him, and he might never use the app again.

IMPACT

With no relevant content, users tend to not use the app and spend less time on it.

fave
PROBLEM #2

No Defined Journey

Unclear user experience leads to frustration in users—in turn increases the drop off rate.

EXAMPLE

There are multiple entry points to perform the same action. Users can scan the QR and FavePay in 3 different ways.

IMPACT

With no defined journey, users easily get lost and lead to low conversion.

fave
PROBLEM #3

Brand & Product Perception

The copywriting and visual elements do not speak to our brand—they lack consistent emotional branding and a clear strategy.

EXAMPLE

Our app messaging gives users the impression of low quality offers, like ‘Shocking Deals’.

IMPACT

A product without a strong branding is just an app.

fave
PROBLEM #4

Inconsistent Experience

Inconsistent design breaks the user experience and increases technical debt. Users are more likely to be lost in the app.

EXAMPLE

The design components look different on most pages, so when one component breaks, the app crashes.

IMPACT

Without a consistent and mature UI and design system, we will always spend time building on top of existing solutions.

Defining the problem

problem statement

Goals

BUSINESS GOALS

Strengthen the value proposition of core products

With new products introduced, we want to highlight our core product offerings that go beyond Deals. We aim to allow a habit-building & fast payment experience for our consumers, while strengthening product discovery on the app.

Operational efficiency

To optimize internal operations, we will build scalable design components, which will work across FavePay, Deals & eCards.

USER GOALS

Increase content relevancy

To work with the data science and engineering team to build a recommendation engine that automatically shows consumers the most relevant content based on their past purchase behaviour, interests and most favourited brands.


A delightful, consistent consumer experience

To ensure a proper design system is in place to reduce technical debt, and give our consumers a better, consistent experience.

Impact

As this is a huge project, we released the new designs in phases. For confidentiality reasons I have omitted the actual values for these metrics.

impact

Our users

Before we started designing, we deep dive into existing behavioral and purchase data of our users to understand them better. We also conducted a series of customer interviews.

We focused on identifying what is the job that our customers hire our product for.

We defined 3 user archetypes, and mapped them to their respective jobs-to-be-done.


user archetype image

The Habitual Creature

An early adopter seeking for convenience—She/he is a heavy FavePay user that value cashback with a potential cross sell to eCards.

JOBS-TO-BE-DONE

When I grab my morning coffee, I want to be able to pay with my mobile phone, so I can track my spending and get out of the queue faster.

user archetype image

The Modern Saver

A heavy FaveDeal user and less of a cashless adopter—which makes it hard to convert her/him to be a FavePay user.

JOBS-TO-BE-DONE

When I want to go for manicure, I want to find the cheapest offer, so I can keep the money for what is important for me and my family.

user archetype image

The Routine Breaker

She/he is more adventurous and is open to try any type of product.

JOBS-TO-BE-DONE

When I don’t know what to eat, I want to find new restaurants or cuisine so I can have new experiences with my colleagues and/or friends.

Process

Design Sprints

We conducted design sprints to facilitate collaboration cross-departments. Product Designers, Product Managers and Creatives contributed their fresh ideas in this sprint. The purpose of these sprints is to align everyone on the same goal—To improve our consumer experience by solving our user's problems today.

Design SprintDesign Sprint


User Flows

We mapped each archetype to their user journey on the app, with their respective success metrics.

On the left, we have the current user flow.

On the right, we have the newly improved user flow.

User flow

We mapped each flow with the percentage of tap events.

User flowUser flow

Sketches

I sketched multiple user flows to visualize ideas quickly. My focus at this stage is to diverge first, converge later. Here are some early sketches of the Brand page.

Sketch

Early designs

A sneak peek into my early wireframes, mid-fidelity designs and drafts. The designs have went through at least 30 iterations per screen. It is due to several reasons: Change in business direction, a pandemic, shift in product roadmap or simply to improve the user experience.

Home Tab

We want our home tab to be personalised to each user. These are the various designs I've tried and did not make the cut. It could be due a number of reasons like unclear value proposition, cluttered designs, and lack of scalability.

Home

Explore Tab

A place for further exploration so users could discover something new and interesting. Instead of asking users what Fave product they want to use, ask them what they want to do first. One of our design principles is that each screen is singular purpose. This is why we don't overwhelm the user with too much content on the Explore tab.

Explore Tab

Collections

We show users a collection of recommended deals or shops to visit. We needed a scalable design so in future Operations Team can automatically create useful collections based on deal/shop tags and reduce manual work. This also makes it easier for users to browse related content all in one place.

Collections

We went through 200+ iterations.

The initial designs went through several user tests, discussions with operations, marketing and business teams to ensure we have a friendly and scalable user experience.

I wish I could show you every single part of the process!


Usability Testing & Customer Interviews

To validate our designs or test prototypes, we did guerrilla testing with real users. Before the pandemic, we did this in-person. Now, our customer interviews are done remotely.

We've tested the prototype with 17+ people in a controlled testing environment as well as the guerilla way.

User Testing

Final Designs

Here's a detailed walkthrough of the revamped app.

Looks new. Feels like home.

Before the redesign, the app was cluttered, it had a lack of focus on Fave's core products. Now, Fave has a fresh new modern look and a better experience. To improve our brand and product perception, we introduced new, scalable components, redesigned micro-interactions and repositioned the product.

A new home

Introduction of the Lucid Design System

Lucid is a scalable design system that saves time, reduces technical debt over time. It solves the problem of inconsistent components and user experience.

Lucid consists of 100+ components with properly defined typography styles, icons and illustrations. Everything in the app is made up of these modular components—this gives a unified, consistent, robust UI.

The design system is never final. It evolves as we go along.

Design System

Your home is personalised to you

The content you see is now more relevant. We collaborated with the data science and engineering team to implement full personalisation of the user experience to show you content based on past purchase behaviour and interests.

The prominent QR scanner on the bottom menu has a 31% increase in usage.

Homepage comparison

Designed for discovery: The Explore Tab

The old 'Nearby' tab is replaced with 'Explore'. While it wasn't an easy decision to make, people can now navigate to discover new things easily. Detailed breakdown below.

Explore page

Discover by Categories

To encourage discovery, we reduced the friction when switching categories and products. With products as the main tab, people are aware of Fave's other products.

Category page

Discover eCards across different categories

Having a dedicated entry point to eCards also means users can discover eCards across multiple categories with a swipe.

eCards Discovery

Improved Brand page

We have separated content into 3 pages for easier navigation. Social proof is also more prominent now, with the key brand information displayed upfront like cashback amount, FavePay button, opening hours, ratings, price range, and user's available cashback.

Shop Page

Revamped Deal Page

Besides making the photos more prominent, I rearranged the information on the Deal page to tell a better story. Based on customer feedback, there is lack of trust in deals. So, I paid extra attention to improving the trust through social proof, ratings and reviews, and displaying the most important information upfront to give clarity.

Now, highly-rated reviews with a lengthy description will be shown first so it is more helpful for users than reviews with no comments.

Deal page

eCards with clearer messaging

Previously, people are unclear of the value of eCards, how to use it and where to utilize their bonus cashback. After several rounds of user testing to improve the messaging, pricing and discoverability, it has resulted in 19% increase in conversion rate.

eCard page

Humanized copy and delightful illustrations

People should feel like they're engaged in a conversation with Fave.

I designed the illustrations for a delightful experience. Empty states, error states and loading screens are often the most overlooked, so I gave these screens more love.

Empty States

My Savings

One of the most exciting mini screen we've launched. Now, people can see their monthly and lifetime savings with Fave, and share this to their friends as a humble brag.

My Savings

My Faves

People typically favourite deals to compare them for later, or favourite a shop for quick access so they can pay faster.

My Faves

What we learned

Adapt to the changing consumer behaviour

We needed to stay grounded and focused on the goal, but also account for changes to the product to match the changed behavior of customers during the pandemic.


Products don’t exist in a vacuum

With a major user experience revamp, our internal processes are affected. For example, the operations team needs to change how they tag offerings or our merchandise.

If we didn’t collaborate with these teams, listened to their concerns, and evolved the tools they worked with, our beautiful app revamp would look nice only as a prototype, but fall flat once implemented in production. Hence, we had a lot of alignment initiatives going on in the background, such as re-defining our brand guidelines.

Take it one phase at a time

We learned to break down complicated designs into small, manageable chunks. This eases development and handles bugs as we go along.

Future

Bug fixes

For a project of this scale, even though we have already fixed plenty of bugs before public release, there are bound to be minor bugs.

Post-launch optimization

This is a crucial next step for every UX improvement or product launch. With informed, actionable insights, we are able to design a better experience for our consumers.

Continue to design better experiences

To follow through our product roadmap and continue to stick to our design principles.

This has been my proudest contribution at Fave. Couldn't have done so without the amazing team at Fave! Huge kudos to our heroes in the product engineering team, our QA team, and the data science team.

Thank you for reading through! Hope you enjoyed learning about my design and thought process. :)

More to explore