Add a feature redesign:
Deal Indicator on the Flipp app
This is a redesign project of the Flipp app, not a real existing feature.
About Flipp and this project
With cost inflation in recent years, many are trying to find ways to reduce their spendings, especially for groceries and essentials. There are many products out there that are created to help users save as they shop, some are focused on helping users get the best deals and sales, others focus on providing cashbacks or coupons for certain items. This project focuses on Flipp, an app that creates an “one-stop marketplace for savings and deals”, which allows its users to browse flyers for stores around their area, store their loyalty cards and clip coupons digitally.
This project started with me trying to reflect on any inconveniences or frustrations I encountered when using the Flipp app. People are constantly bombarded by discounts, as businesses will use sales to get the consumers’ attention, so that
“People will buy more, or buy more often, than they would otherwise.” - Jonah Berger
One of the issues I encountered while grocery shopping and looking at flyers of stores, is that it can be overwhelming with the different sales and discounts available at various stores.
The main goal of this project is to explore how we can improve the Flipp users’ shopping experience, while ensuring they get the most savings possible.
The project was done over 6 weeks:
-
User Research
-
Defining the problem & ideation
-
Usability Testing
-
Final iteration & handoff
User research
Competitive analysis
I started with gathering more information about Flipp. To better understand what is available and missing in this space, I compared 3 other common apps related to shopping and groceries: Flyerify, Checkout 51 and Walmart Canada.
Flyerify
Flyerify is an app that digitizes mailer flyers, and it includes a wide range of stores, not just grocery stores. While not all the stores are populated, and mostly only included information from grocery stores, it is certainly an area to explore: potentially expand the selection of stores that are included. However, it is missing features that would further help users get the most savings, such as ability to search and compare products etc.
✅ Wide selection of stores included, not just grocery stores
✅ Can favourite a specific flyer
❌ No option to filter for currently available offers; require users to search manually
❌ Cannot clip item on the flyer (user may forget which item they need at the store)
❌ Cannot search by product; require users to manually look through each flyer
❌ Cannot set up alerts for specific items
Checkout 51
Checkout 51, on the other hand, is a cashback app. It allows users to browse different coupons that are available and choose ones that interest them. They simply have to make the purchase then upload the receipt as proof. Information on this app is sorted by products & categories, which makes it easier for users to browse.
✅ Allow users to search by both stores and specific items
✅ Content are sorted based on product and categories
❌ Limited selection of items; offers are limited by brands that pay for their promotional service
❌ Time sensitive; offers are only available for 1 week and require users to submit receipts of purchase within the same time
❌ No favourites or watch list option for users to customize items relevant to them
❌ Users complaints of poor customer service and often having to dispute receipt rejections
Walmart Canada
Walmart Canada is an app for the specific grocery store. It allows users to browse its flyers, see any available deals (e.g. coupons & rollbacks), along with actually making a purchase (e.g. ordering online, grocery delivery). While the app includes many functions, it is limited to one store only, so users are not able to compare prices with other stores.
✅ Allow users to browse for discounts available and make purchase directly
✅ Many personalization features (e.g. reorder & track previous purchase history, favourites etc.)
✅ Offer many ways of savings: flyer, coupons, clearance, partner offers etc.
❌ Limited to one store; users cannot use it to compare prices or look for savings from other stores
❌ No option to create multiple shopping list
❌ Users complaints that many function needs updates (e.g. difficult to browse items, showing items that are not in stock etc.)
User interviews
I wanted to understand the users’ experience with these shopping and grocery apps, including Flipp, along with any frustrations or pain points they encountered. I interviewed 3 users who had experience with shopping apps and have used Flipp before, including 1 male and 2 female participants, ages: 28, 31, 26.
The goal is to better understand how and why they use shopping apps, how Flipp compares to other apps, and how Flipp can provide more value to its users.
Key findings from user interviews:
All participants mainly use shopping apps for groceries and personal items, including pet related goods
All participants started using shopping apps to save money and better budget their spending
Participants will try to check apps before grocery shopping to see if there are any sales available, and also to choose which grocery store to visit, as they want to get the most savings possible without having to visit multiple stores
One of the main benefits of flyer apps is the convenience it provides over physical paper flyers
Participants liked the shopping list and clipping items feature in Flipp, as users can then reference the list when they are shopping
All participants agree that they often question “is this a good deal” when looking at flyers
Key complaints from participants:
Cannot share shopping list with others
Difficulty comparing prices or unsure if price is a good deal, either:
Need to manually keep track of, or memorize prices on their own
Need to search the item, then compare prices among different stores
No filter system or criteria for alerts in watchlist (e.g. target price)
Issue with navigation; hard to find loyalty cards and coupons feature
Cannot keep running list for tracking purpose (e.g. staple items or items repurchased on a regular basis)
Hard to use when price matching (e.g. have difficulty bringing up the flyer when clicking items clipped in shopping list)
Unable to create multiple shopping list (e.g. if shopping for others, or for a special occasion)
Using the responses gathered from the user interviews, I created an affinity map to help identify any common themes and ideas between the 3 participants.
An affinity map was created to help visualize the responses from the user interviews, and identify any similarities, along with any common frustrations and complaints from the participants
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
Defining the problem
Based on the details gathered in the user research phase, I developed a point of view (POV) and how might we (HMW) statement to clearly define the problem.
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.
How might we help people identify what is a good deal?
I started to create different resources to help visualize the research insights gathered and help summarize the understanding on the target user of Flipp, along with their motivations, needs and any pain points they encountered.
All user interview participants want to keep their grocery related spending low and uses shopping apps to budget and get the “best deal” possible. The main issue that the participants had is that even though Flipp conveniently gathers all the flyers and discount information from various grocery stores, it is hard for them to know whether the sale is a good price for an item. It requires them to make a judgement based on past purchase experiences to determine if a certain sale is a good deal.
These insights were then used to create Jason, the persona, including user frustrations with grocery shopping and the Flipp app:
Hard to determine what is a good deal
Need to manually compare prices, against regular priced items or sales in other stores
Grocery shopping can be time consuming and annoying
Summary of the Jason persona
Using the HMW statement: how might we help people identify what is a good deal?, I started to brainstorm different feature ideas that can help address the users’ problem and pain points with using the Flipp app.
Potential features includes:
Tracking and creating price chart for items
Listing the highest and lowest price observed for an item at a specific store
Allow users to set notification for a target price for an item on the watch list
I decided to prioritize adding an indicator or label to help users identify a good deal, along with compiling a list of best deals items for the same flyer period. As this will help users make an educated decision about where to best purchase their desired item.
A journey map was created to illustrate the problem the user is having (unsure what is a good deal), how they would encounter the new feature, and how it would help the user resolve their problem.
A journey map to show the problem Jason experienced, and how he found the new feature, which help resolve his issue
Task and user flows were then created to help outline the steps that user 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.
Task flow to outline the steps required for the users to find and identify a good deal for an item.
User flow to outline how the user would move through the app in order to find and identify a good deal for an item.
The design process
Sketches of screens on the Flipp app with the new deal indicator feature
The design process started with sketching potential ideas for the screens required for the users to be able to find and identify a good deal, including exploring what would be the best way to highlight or label a certain item on the flyer.
Mid-fidelity wireframes of the deal indicator and best deals list
At this stage, I did a round of mid-fidelity testing with 3 participants, who have used the Flipp app before, to test the functionality of the new deal indicator feature. I started with just showing the wireframes to the participants, and have them pretend to clip an item on the flyer. 2/3 of the participants spotted the feature immediately when they saw the pop up, that appears when an item is clipped or selected. All participants were able to understand the labelling difference between a best deal item or item with lower prices available elsewhere, and think that it would be helpful for planning their grocery trip.
Then, after giving them some more context about the deal indicator feature, I did a round of A/B testing to determine what icon would be most appropriate to highlight an item as a good deal. I showed the participants 2 versions of the deal indicator and asked them which one is more obvious and straightforward to indicate that an item is the best deal. I experimented with using a star vs. a piggy bank icon directly on the flyer to label the items. Within the pop up that appears when an item is selected, I tried using just dollar signs or also incorporating a piggy bank icon to indicate if it is the best deal or if there are better deals available at other stores.
In the end, all 3 participants liked the piggy bank icon (version 2). As it is associated with saving money, which makes it easy to understand and identify that an item is a good deal.
2 versions of the deal indicator used in A/B testing
These sketches are then built digitally in Figma to create the mid-fidelity wireframes, to understand how the deal indicator feature would fit into the current layout of the Flipp app.
With the updated layout, I then applied the Flipp UI kit to the wireframes and created the high fidelity wireframes and prototype.
Here are some of the key changes after adding the deal indicator feature:
1) Using an indicator (piggy bank icon) to show best deal items on the flyer directly.
2) Include a label on the pop up screen that appears when users clip an item, to help them identify if item is the best deal or there are better deals available.
3) Compiled a best deals list of the lowest priced items for the flyer period.
As I tried to put the labels in action with images of the flyers and products, I had some concerns about including a label directly on the flyer. I realize this would be difficult to code and implement in real life, since flyers of different stores have their own branding, which would result in having different layouts with text and product image, as well as colours for the background on the flyers.
After some discussion with a mentor, I decided to include a button to show users that there are best deals on this flyer, rather than just directly labeling the items on the flyer itself.
Screens to show updates of the deal indicator on the flyer (version 1: piggy bank icon directly on the flyer; version 2: best deal button)
Testing & improvements
With the high fidelity wireframes, I conducted a round of usability testing with 5 different participants, who had experiences with Flipp or other similar shopping apps, to determine if users are able to easily find and identify a good deal for an item when they are browsing.
Key feedback from usability testing:
All participants were able to find and identify a good deal for an item with the deal indicator
Participants found it relatively easy to complete the task: average 2.4/10 (1 - easy; 10 - difficult)
Overall participants think that a deal indicator would be helpful to identify whether a sale item is a good deal or not
Previously would have to rely on search to compare the prices of an item, or compare with own knowledge or shopping experience (e.g. previous seen price)
I then assessed and prioritized the many suggestions and feedback from the participants, and made further iterations to the design.
Prioritization of the feedback and results of usability testing
Iterations based on usability testing:
1) Add a “In Your Watch List” filter option in the best deals list, to allow users to easily sort for relevant items that are saved in their watch list
2) Labelled the deal indicator button on the flyer with “best deals”, to ensure that all users clearly understand the added feature
3) Updated the design of the deal indicator within the pop up that appears when an item is selected (filled vs. outlined), to clearly categorize items with the best deal vs. items with lower price available at another store
4) Updated the pop up that appears when an item is selected, to directly show if there is an exact match item with a better price elsewhere.
Previously the pop up will only indicate that there is a lower price available, and will require the user to expand the pop up to see alternative options.
Conclusion
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.
-
Learning how to work within an existing product and design
Not all “good” ideas can actually be created and implemented
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)
Over communicate is good (sometimes)
-
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.
-
Explore idea of creating new icon for best deals (piggy bank + coin/token)
Improve sort option for lists to include a store option, and maybe compile number of items at each store
