OurGroceries is a mobile app used for making shopping lists. The goal of this project was to add functionality to an existing and was completed as part of a capstone for DesignLab UX Academy.
User Research
UX Design
UX Strategy
Interaction Design
User Testing
UI Design
Sketch
Photoshop
Illustrator
Marvel
To quote NPR, “Food is more than nourishment. It's a source of pleasure — and guilt — and an agent of change.” Because most people living in the United States don’t grow their own food, trips to the grocery store are a necessity. On average, Americans visit the grocery store 1.5 times a week. Consumer Packaged Goods marketers distribute billions of dollars of coupons each year and yet, surprisingly only a small percentage of shoppers (about 1%) redeem coupons. This all despite the fact that average savings from coupons over a year equal or rival the average annual raise. Through research, including surveys and interviews, I gained insights into the challenges shoppers face, not only in the grocery shopping process, but the barriers to coupon usage as well.
Key Challenges:
Inspired by the pain points discovered in research, the goal for this app feature add-on was to create an easy, all-in-one grocery shopping tool—combining shopping lists, saved recipes and coupons into one place. My aim was to find a solution that offered robust enough features to be useful for multiple aspects of the shopping experience, while still being simple enough to avoid over-complicating the shopping process; thereby encouraging retention.
After competitive analysis and other secondary research, I created an online survey to better understand the frustrations of shoppers and their general feelings about grocery shopping and coupons. Using these insights, an interview guide was crafted to gain more qualitative responses from shoppers about their feelings on shopping for groceries and coupon usage.
“COUPONS ARE HELPFUL. SOMETIMES THEY’LL DETERMINE WHAT I BUY WHETHER I SWITCH TO A BRAND OVER ANOTHER I WAS CONTEMPLATING [...] ANYTIME I HAVE THE OPPORTUNITY TO USE THEM OR REMEMBER TO USE THEM, I TRY TO. I DON’T EVER HAVE A PHYSICAL COUPON. IT’S A LAST MINUTE ‘OH HEY, I HAVE THIS IN MY PHONE’.”
— INTERVIEW PARTICIPANT
Survey and interview responses showed that shoppers want to use coupons—because they want to save—and yet they don't use them because of hassle. Shoppers enjoy the process, but not the prep work, of grocery shopping and so convenience and ease of use for any tool become paramount. From the insights of my research, the persona of Ellen Marino was born. As a working mom to three kids, Ellen's time is important. Trying to price shop is key for her, so being reminded to use the coupons she takes the time to find is helpful. She also doesn't have the time to return to the store for forgotten items, so following her list and checking off as she goes along keeps her on task.
To further understand Ellen's motivations, I created a user journey mapping out her typical day.
I mapped out the application for OurGroceries, which shows the main four functions—Lists, Saved Lists, Recipes and Coupon Binder.
Based on my research and the existing app design, user flows and wireframes were designed to define the flow and interactions of the application, creating a smooth journey for shoppers.
Thumbnail wireframes from the user flow were fleshed out to medium fidelity wireframes.
A prototype from wireframe screens was created in Marvel and tested in-person, and two ways via lookback.io, in order to better capture screen interactions, since in person testing was not possible for lack of sufficient time. In testing out lookback.io, some sessions were moderated and unmoderated (in order to gather more responses). Initial testing of the prototype yielded confusion between list types and the process of adding a saved list to a current shopping list, due to the language used in the navigation bar.
Following the results of testing, revisions to the prototype screens were made and high fidelity screens were designed and further tested. Further changes were made to the interaction design from the existing app due to results from testing. In the original app, in order to check an item off the shopping list, one taps the largest surface area of the item card. However, to see more information about the item and adjust its category or quantity, a very small hotspot on that card is the interaction point. This makes it easy to accidentally check items off your list and harder to adjust item details. To facilitate ease of use, a check button on the right hand side, which would be much harder to accidentally trigger, was added to the design.
Additionally, the realization that shoppers like Ellen would be better served by having the option to scan coupons for upload with QR/barcode reader integration (and therefore information about the coupon like expiration available from database for app notifications and reminders to use). This brought changes to the coupon binder and item entry screen designs.
“I LIKE THAT THE ICONS AT THE BOTTOM ARE REALLY INTUITIVE; IT’S LIKE THE THREE ACTIONS YOU’RE GOING TO DO WHILE SHOPPING. I THINK THE ORGANIZATION OF IT IS PRETTY GOOD, TOO. I LIKE THE FACT WHEN YOU’RE DOING YOUR COUPON, YOU CAN SCAN OR LOOK A COUPON UP.”
— USABILITY TEST PARTICIPANT
Here is the final UI prototype of the app:
Because the coupon feature in the app was designed as a minimally viable product, the end of prototype testing left more open questions for further research and testing. The app would need a series of screens devoted to notifications for coupons (perhaps coupons found for items on saved lists at preferred stores, or upcoming expirations for saved coupons, as well as reminders to use coupons in-store). Questions were also raised whether saved lists should actually revolve around preferred stores and how then that might change the UX introduced here by this prototype. Furthermore, there were interactions that would have been designed differently, had it not been for the limitations of Marvel as a prototyping tool (i.e. use of timed toaster notifications instead click interactions as indication of success of an action). All in all, I believe the prototype created represents an improvement to the existing OurGroceries app and accomplishes its goal in maintaining simplicity while adding functionality.
Have a question? Want to work with me? Drop me a line at kim@kimschaefer.design.
