Flipp
Flipp is a one-stop marketplace for savings and deals. It’s a free app that allows you to easily browse, clip and use flyers from over 2000 of your favourite stores. The goal of this three-week design sprint is to identify opportunities of improvement to an existing digital experience.
During this time, many individuals have lost their source of income and making more informed purchasing decisions has become a priority. Now more than ever, consumers prefer to buy more while spending less. With savings being at the forefront for many, my team and I decided explore design opportunities with Flipp’s mobile app.
Tools
Figma
Invision
Whimsical
The Challenge
Redesign
Flipp users and those looking to save, need to easily and efficiently find, compare and locate the best deals for their shopping list. Flipp’s cluttered UI, hidden features and need for manual calculations overwhelms and frustrates users. This case study dives deeper into understanding user limitations to improve their experience, and ultimately, to make their lives easier amid the pandemic.
Solution Preview
Six New Features
The Discovery
Main Areas of User Frustration
Cluttered + Confusing Navigation
Flipp's navigation operates as horizontal scroll with infinite categories, overwhelming users. Users are provided with improper affordances. Most did not realize the navigation was a carousel. Category names did not provide users with meaningful insights.
Difficulty Finding Clippings + Creating Multiple Lists
Flipp did not provide an intuitive path for their users, as they consistently forgot where to find their clippings.
Flipp has a single shopping list option. Users require multiple. Users are restricted from organizing information in a way that is meaningful for them.
Hidden Expiration + Date Affordances
Flipp’s expired clippings are not separated from their active clippings, creating confusion.
Users were unaware of which week’s flyer they were viewing, misleading them to believe that they have a deal. Users realized this while at the store causing frustration and disappointment.
Clipping Affordance Block
Important information is blocked when users clip a flyer. Cashiers are unable to read the details required, preventing users from receiving the discount. Users cannot move forward without unclipping the flyer. Once unclipped, the user loses their clipping and the discount, ultimately leaving them frustrated.
Use of Multiple Applications
Users were frustrated by downloading and jumping around several apps to complete a simple task, creating clutter.
Multiple apps were used in conjunction with Flipp, including: Calculators, Checklists, Notes
Search + Filter Complications
Users were frustrated with the search function as it provided too many results while simultaneously not showing items that they were truly interested in. Users also did not find value with the price and store filters. The filters are extremely limited and forces the users to unnecessarily work harder to reach their goals.
User Persona + Journey Map
Once we fully synthesized our findings, we used them to structure our persona, and create a journey map to understand what a typical shopping trip is like. These techniques allowed us to visualize our thoughts and develop our solution.
How might we support consumers before, during and after their shopping trips in a simple and efficient way while empowering them to make more informed purchasing decisions?
The Solution
Our design was built to increase simplicity and create an intuitive interface by decluttering and preventing disruption for our savers, giving them the tools and space to make stronger decisions.
Sketches
Design Studio Results
Staying True to Brand
Visual Guidelines
During this build, my team and I wanted to make sure we were staying true to Flipp’s brand and building with respect and intention for what they’ve already created. We used their specified brand colors, typography and designated logos for our iterations and the final design
The Design
Reinventing the way People Shop
Solution 2: Organization + Personalization
Mid-Fidelity Wireframes
Usability Testing
Users disliked having several options, drop down menus and lists in one place. It made it difficult for the user to quickly decide.
Hi-Fidelity Screens
Our team created a centralized location for users to take notes and create multiple shopping lists in the same place they find deals. Users no longer have to frantically use several apps for a simple task.
Solution 3: Enhancing Visibility
Mid-Fidelity Wireframes
Usability Testing
Users were frustrated as they were unable to filter between their active and expired clippings and locate their clippings easily while shopping.
Hi-Fidelity Screens
We separated active and expired clippings for our users to easily move between them, added a clippings section to the bottom navigation for easy access, and organized their clippings according to the week.
Retrospect
This project taught me the importance of validating your designs. This case study highlights the drastic changes made during the iteration process and signifies the importance of user feedback. I learned that research and user testing is the true driver of design change. Doing background research, creating initial designs, planning the testing, observing the user, asking questions and further analyzing the findings was a true balancing act.
I had to be curious, kind, honest and realistic while being able to welcome and withstand criticism. By doing this, I learned what parts of our design frustrated people, where they became confused and what kept them from changing. Being empathetic and listening were the skills that allowed me to truly understand why our users do what they do.
