Flipp: Elevating the one-stop market
experience
OVERVIEW
Flipp is a one-stop marketplace for savings and deals. It is an app that brings you the latest weekly ads, deals and coupons from more than 2000 of your favourite stores. Flipp empowers users to plan and save money on their weekly shopping trips through access to a plethora of digital shopping content. This allows shoppers to provide for their families by making life more affordable. Flipp is a free app, that helps consumers make more informed purchasing decisions, saving them time and effort.
During this three-week sprint, my team and I were challenged to identify opportunities of improvement to an existing digital experience. With savings being a relatable matter to a wide range of individuals, we were intrigued to dive deeper into the current challenges of this topic. As a result, we chose to explore such opportunities with the Flipp app.
TIMELINE
3 weeks (2020)
TYPE
General Assembly group project
TEAM
3 UX Designers
TOOLS
Figma, Invision, Whimsical
ROLE
Research, wire framing, usability testing, UI
CHALLENGE
How might we help shoppers to plan more efficiently for their shopping trips while helping them save as much money as possible through informed decision-making?
Solution Preview
Notes & multiple lists
Never forget what you previously paid for an item again with our new notes section.
And you need multiple shopping lists? We got you! Make as many lists as you need.
Clippings
Easily locate your clippings and never get confused with offers from the wrong week ever again.
Compare tool - clippings
Looking for the best deal without using your calculator? Our compare tool will tell you which is the best deal!
Compare tool - scanner
Looking for the best deal but tired of mental math? Our new feature does the work for you, just scan the barcode for whichever items you are looking to compare!
User Research
Online research
In order to go straight to the source, we searched facebook, reddit, and google play for any reviews and pain points that were being addressed by users. This gave us a better understanding of which features users wanted an improvement on and their respective feature wish lists. Some of the recurring themes we saw expressed online were hopes of:
1) Improvements to the clipping feature
2) Historical pricing feature
3) Calculator
User interviews
We conducted 6 one-on-one interviews to understand how our users used the app to plan their shopping trips, their pain points, motivations, and potential areas of optimization. This created a space for stories to emerge, which allowed for us to cross-reference our findings from the online research, and to discover deeper insights as we were able to follow up directly with our interviewees.
A few quotes from the interviews:
Key Findings
Our next step was to synthesize our data to discover any themes or trends among our users. We used affinity mappings to help uncover these items. From this exercise we were able to pin point a few major points, as summarized below.
*All screenshots shown below are the current Flipp screens*
Finding # 1: Users are confused on how to find their clippings, making it hard to plan for their shopping trips and leading to a stressful checkout experience.
Simple tasks such as finding any previously clipped items were described as difficult, frustrating and confusing as these items are currently under the “Lists” navigation button, which is not intuitive for users to find. This often leading users to scramble during checkout.
Finding # 2: Users often forget to pick up items, resulting in a double shopping trip or missed sale, as they can only create 1 shopping list in the app.
Users wanted the ability to create more than 1 shopping list, which currently cannot be done on Flipp. This often led the user to using other apps just for their shopping lists.
Finding # 3: The status of clipped offers is confusing, often leading to wasted shopping trips or paying full price.
Users are often confused with the offers that they have clipped because they:
1) Didn’t realize an offer was not valid in the current week because it was related to the deals for the subsequent week.
2) Find it difficult to tell which offers are still active (not expired)
Finding # 4: Shoppers constantly found themselves doing mental math or using their phones to calculate the cheapest deals.
Users wanted to ensure they were getting the best bang for their buck, and would spend the time performing calculations. However, sometimes struggled because of their lack of confidence in their math skills.
User Persona
From our research and findings we were then able to craft our persona, Kevin.
Feature List
Based on all of the information gathered, we honed in on the most pressing frustrations that we wanted to tackle for our users, which led to the birth of the feature list below:
Notes section
Multiple shopping lists
Auto compare & scanner
Clippings navigation button with clear organization for offers (current/next week, active/ expired)
Sketches
To start off the iteration process, we began by sketching out our potential screens and flows. This allowed us to generate and explore multiple ideas on a low-risk basis.
Mid-fidelity wireframes
Next, we moved on to low and then mid-fidelity wireframing and begin user testing.
Iterations & Findings
Challenges Encountered
With all things, planning our idea was one thing however during execution we encountered a few hurdles, specifically with two of our feature items.
1. Adding additional icons to the navigation bar (clippings & compare)
As of today, there are only four icons in the bottom navigation bar of the Flipp app. Two of the newly introduced features however, needed a space there as well, which would have meant crowding up the navigation with a total of 6 icons. When we took our design to our professor for critique we learned this to be troublesome because most apps try to reduce the amount of icons on their navigation bar, not add to them. As a result, we really needed to decide how to solve this issue.
Below is a screenshot of the current navigation on the Flipp app.
Ultimately the issue was, should we have 6 icons, and if not, should we remove something, and if so what? Otherwise, where might we place the new features? An option was to leave the “Clippings” within the “Lists” section (where they currently are) but we knew we wouldn’t be solving our users pain point this way, so we decided not to pursue this. Upon brainstorming, we realized that during our research we found that all of our users had not ever used the “Deals” tab. Having taken a second look, we also noticed that the same information could be found in a flyer or through the search bar. As a result, we moved the deals icon and added space for our two new features.
Below is a screenshot of the redesigned navigation.
2. Designing the manual compare feature (scanner)
To begin, 100% of our users had mentioned wanting a feature that helps them compare products during their shopping trip, so it was really important for us to get this feature right and make it exactly how our user’s wanted it.
As a result, this particular feature, particularly the manual component, went through multiple rounds of iteration and testing. Below are a few examples.
However, just as we thought we had locked down the final form, we took our mockup to a draft design review, where we were told to make the feature work harder for the user. This feedback completely changed the direction of the feature, with only a few days before the deadline.
Thus, we quickly brainstormed and re-designed the feature and brought forth this final design, which is depicted below.
Final Solution
THE SOLUTION
View Prototype →
To interact with the prototype:
1) Click anywhere on the device screen + use right keyboard arrows to see next screen OR;
2) Click anywhere on the deceive screen and follow the blue links to guide you to the next screen
Next Steps
1. Usability testing on the scanner compare feature
As a result of changing the scanner design at the last minute, we faced both time and resource constraints and ultimately did not have time to re-test our final design on our users. Having said, I would love to test it out and incorporate the feedback to take this feature to the next level for our users.
2. Explore areas of opportunity to Flipp’s latest feature, The Watchlist.
Flipp recently introduced a new feature known as “The Watchlist”. Unfortunately, none of our users were familiar with this feature, however when we created the awareness, our users seemed intrigued. At a later time, when users are more familiar with the feature, I would love to explore the potential area of improvement to The Watchlist.
Retrospect
As with every opportunity in life, there were multiple golden nuggets that I learned on my journey developing the Flipp case study.
1) I learned that users will not always tell you exactly what they want. They will give you an area of frustration, and it is up to the designer to propose solutions beyond these walls.
This lesson was immediately clear when my team and I presented the compare scanner function during our draft design review. As a designer, it is extremely important for me to put the users at the center of the whole process, so really learning to listen and to find a solution that really did the work for the user was something that really spoke volumes during this three week sprint.
2) I also learned that less is more. Users will get confused when multiple features or changes are introduced all at once and so really focusing on the most important problems and solving those is immensely important. You can always introduce features later!