Flipp

App redesign: Adding a deal indicator to help people identify good deals

Cross-platform app

This is a redesign project of the Flipp app, not a real existing feature.

Overview

Flipp is an app that allows users to browse flyers for stores around their area, store their loyalty cards and clip coupons digitally. It allows people to save as they shop by helping them find the best deals and sales.

Project goals

The main goal of this redesign is to help users easily find and identify a good deal for an item, and ultimately help them get the most savings as possible as they shop.

My role

UX designer

Key skills:

  • User research

  • Wireframing & Prototyping

  • Testing & Validation

Timeline

Week 1-2: Empathize

Problem statement:

People are constantly bombarded by discounts and sales, which can be overwhelming and confusing. I wanted to explore how we can improve the shopping experience of Flipp app users, while ensuring that they get the most savings possible.

User interviews

I interviewed 3 participants who had experience with shopping apps and have used Flipp before, to understand how and why people use shopping apps, how Flipp compares to other apps, and how Flipp can provide more value to its users.

Competitive Analysis

Exploring other competitors to help better understand what are common features, along with identifying potential opportunities that can help make Flipp better than other apps available on the market. 

Week 3: Define

I started to create different resources to help visualize the research insights gathered and help summarize the understanding of the target user of Flipp, along with their motivations, needs and any pain points they encountered.

Affinity mapping

To create useful insights from the user interviews, I started with creating an affinity map based on the responses from the different partcipants to try to identify any common themes, including frustrations and complaints.

Common themes from affinity map:

  • Shopping habits

  • Benefits / helpful features

    • Food cost/money saving

    • Paper flyers

    • Sale/deals

    • Comparing with other stores

    • Shopping list feature

  • Areas of improvement

    • “Is this a good deal?”

    • Complaints / inconveniences

    • Personalization

Point of view (POV) & How might we (HMW) statement:

Based on the details gathered during user research and empathize stage, I developed a POV and HMW statement to clearly define what is the problem that the users are encountering.

POV:

I’d like to explore ways to help people trying to become smarter shoppers, identify what is a good deal, because it can be difficult and time consuming for people to sort through a wide range of stores and products while shopping.

HMW:

How might we help people identify what is a good deal?

Persona

Based on the results gathered during user research, I created the persona, Jason, to highlight any characteristics, needs and wants found among the target users.

Week 4-5: Ideate & Prototype

I started to brainstorm different features that can help the users determine what is a good deal. I decided to prioritize adding a deal indicator to help users identify a good deal, to help them make an educated decision about where to purchase their desired item to get the most savings possible.

Journey map: finding good deals when grocery shopping

To illustrate the problem Flipp users are having (unsure what is a good deal), and visualize how the new deal indicator feature would help them make an educated decision about where best to purchase their desired item.

Task & user flow

Task and user flows were created to help show the steps that users would utilize the new deal indicator feature, and outline the screens that would be crucial for them to find the best deal on the Flipp app.

Sketches & mid-fidelity wireframes

I first started with sketching out the required screens, then building these ideas into mid-fidelity wireframes in Figma to understand how the new deal indicator feature would fit into the current layout of the Flipp app.

Initial sketches

Mid-fidelity wireframes

High-fidelity wireframe & clickable prototype

I then applied the Flipp UI kit and examples of grocery store flyers to the wireframes.

Key changes after adding the deal indicator feature:

1) Added deal indicator button to highlight best deal items on the specific flyer

2) Include a label on the pop up screen that appears when users clip an item

3) Added a best deals tab in the list screen, to show lowest priced items for the flyer period

Week 6: Usability testing

I did multiple rounds of testing at various stages to ensure the design is on track and made updates based on the feedback from the participants.

A/B testing for deal indicator icon

All 3 participants preferred the piggy bank icon to deal best deals, as it is often associated with saving money.

Usability testing

I conducted a round of usability testing with the clickable prototype in Figma with 5 participants, who had experiences with Flipp or other shopping apps.

  • Participants think that the deal indicator made it easy to find and identify whether a sale time is a good deal or not

Iterations from feedback:

1) Added label for deal indicator button, to ensure all users clearly understand how the feature help highlight “best deal” items

2) Updated design of the deal indicator within the pop up, to visually emphasize best deal items vs. items with lower prices available elsewhere

3) Updated the pop up that appears when items are selected, to directly show if there is an exact match item with a better price elsewhere. Previously, users will have to expand the pop up to see alternative options.

4) Added “In Your Watch List” filter option in the best deals list, to allow users to easily sort for relevant items that they have saved

Final Work

This is the proposed feature to be added to Flipp, a deal indicator to help users find and identify a good deal for an item, as they try to limit their expenses towards groceries and essentials, and ultimately better budget their finances.

🌟 Key takeaways

  • Learning how to work within an existing product and design

  • Not all ideas are good, especially when it comes to implementation (e.g. directly labeling items on the flyers)

  • There is no such thing as too much testing and it is always good to get a second opinion (of course, if resources and time permitting)

📑 What could I have done differently

I spent quite a bit of time contemplating what would be the best icon for the feature, so to me the high-fidelity version was pretty intuitive and I did not even consider labeling the feature.

While it is great to have that flagged during usability testing and corrected, it was a reminder to always consider how your product would encounter different people, who will interact and interpret your product differently, and sometimes it is not so bad to over communicate to ensure the design will make sense to everyone, even first time users.

✏️ Next steps

  • Explore idea of creating new icon for best deals (piggy bank + coin/token)

  • Improve sort option in list screens to include a store option, and maybe compile number of items at each store