UW Informatics Design Thinking (INFO 360) Award Winner
Best Visuals and Best Overall Picture
Winter Quarter 2017

The Challenge

Maximize Time, Money, & Convenience

Many grocery shoppers generally visit either the most convenient location or only their favorite stores without taking the extra time to compare prices, sales, and coupons. Even if comparisons are made, weekly ads are likely to contain “big name” items with little savings rather than the items most consumers have on their grocery lists (Hamm).

Up Beet is a mobile application that informs shoppers of the best sales and deals of the week based on their grocery list and preferred local stores. Our ambition was to increase shoppers’ weekly savings by maximizing time, money, and convenience.

We adopted a design sprint approach so that we could validate and prototype our ideas on a weekly basis with our target users. This evaluation-heavy approach reduced the risk and uncertainty of Up Beet before the final prototype was finalized.

Our goals were to:

• Create an efficient platform to compare prices without visiting the actual store.

• Reduce the time to find great deals.

• Give shoppers the confidence that they are actually saving money.

My Role
UX Designer

Tools
User research, paper prototyping, usability testing, wireframing, high fidelity mockups

Tools
Adobe XD

Duration
3 months

Team
Lisa Koss & Alexis Koss

Instructor
Jason Yip

The Beginning

Understanding Grocery Ads

We conducted 2 semi-structured interviews with people who expressed an interest in saving money while grocery shopping, but didn’t have a plan of action in place to do so. Our goals were to understand the challenges these shoppers faced and the work-arounds, if any, that they employed to overcome them.

The Approach

Connecting With Our Users

A design sprint approach fostered collaboration early on between us and our users since we worked closely with them to brainstorm great ideas. We placed emphasis on sketching and paper prototyping, which we later iterated on and validated with user testing weekly.

Every week ended with user testing where we tested our current prototype with our target audience to validate what features would improve their shopping experience and what wouldn’t.

The Discovery

Missing Personalization

With our research it became clear that shoppers expect sales to be easy to find with minimal effort on their part. Shoppers know what sales they want to see, but impersonalized grocery ads make this difficult. The format of grocery ads also vary from store to store, making it difficult to find relevant sales easily every time. Shoppers also tend to put off looking at grocery ads until they arrive at the store, or even avoid it all together in order to not feel bad for choosing a convenient location over better deals that are farther away.

Value in Time & Money

Alexis and I designated persona types in order to prioritize the different kinds of users we wanted to primarily support throughout the entire design process. These personas served as our guide for design decisions and were the starting point for creating empathy between us and our users.

Our target users informed us that they:

• Value saving money and need to stay within their weekly or monthly budget.

• Want to avoid wasting time while shopping.

• Wish to find money saving deals more easily.

The Vision

Eliminate Guessing

Up Beet’s vision was to take the pain out of every day grocery shopping and make it more pleasurable. We wanted to take the uncertainty out of grocery shopping and instead give shoppers a plan of action to follow instead.

The Design

Introducing Up Beet

Instead of wasting time browsing hard to read grocery ads, Up Beet gives you your time back by making weekly grocery deals accessible and easy to find. Up Beet learns your favorites and alerts you of new and nearby deals, making shopping even easier.

…

Savings in One Place

Up Beet categorizes your weekly deals based on your favorite stores. We take the work out of finding savings so you can spend less time shopping.

Grocery Lists for Every Occasion

You can create personalized grocery lists that fit your lifestyle. Up Beet keeps track of your savings so you know you’re getting a good deal.

Make Informed Decisions

Up Beet not only tells you where to find an item, but also shows you if you’re actually getting a good deal. Check off items as you pick them up to keep your list up to date.

Find What You Need

You can add an item to any list from anywhere inside Up Beet. Skip the weekly ads all together and see where an item is the cheapest at the tap of a button.

Near or Far

Up Beet lets you choose where you shop and only recommends sales and items based on these decisions.

We’ve Got Your Back

Not only does Up Beet notify you when an item on your list has a price drop, but it also alerts you when you’re nearby an item you haven’t picked up yet. You’ll never miss out on a sale again!

How We Got There

Personalizing Grocery Shopping

Existing grocery ads aren’t reflective of what the average shopper actually purchases. Instead of relying on ads to shop smartly, shoppers are going in blindly and walking by deals without even seeing them. We knew we had to:

• Give shoppers deals they want to see.

• Show shoppers an accurate picture of how much they’re actually saving.

• Reduce the time spent shopping.

Visualizing the Flow

With our findings we knew that our content had to prioritize money saving deals. We also knew that weekly ads are already a familiar tool for shoppers to browse for content, so we combined these two concepts to design the information architecture and overall experience for our users.

From Frustrating to Organized

The Design Direction

We identified 6 individuals that fit the profile of our target audience to test our paper and high fidelity prototype with. To narrow the focus of our usability testing, we had each of our users perform the same 4 tasks:

• Create an account and choose favorite stores.

• Create a new grocery list.

• View an item’s details.

• Add an item to a grocery list from the weekly ads.

Personalized Favorites

To truly improve the shopping experience, the first thing we needed to know was our shoppers favorite stores. We knew we had to eliminate deals from the stores that our shoppers weren’t interested.

We agreed upon sign up that asking shoppers to pick their favorite stores to shop at signaled to them that Up Beet is a personalized experience. This is also advantageous in providing our shoppers with accurate prices and useful aisle numbers so they can be prepared before shopping.

Customized Grocery Lists for You

Cluttered newspaper ads and unorganized shopping lists only further increased the frustrations experienced while shopping. To mitigate these problems, we understood we had to give our users more control over organization.

This made our users feel like they had more control over whether or not they had a pleasant shopping experience and they felt like they could find all of their grocery items easier than ever before.

Save Time Shopping

The goal of these designs was to remove the guessing out of where to find an item at the best price. For shoppers to be confident that Up Beet is saving them time, they need to see where they will be shopping and where to find their items once they’re at the store.

One critical issue our users brought up was that there was no way to keep track of what items they had already picked up. They didn’t want to delete the item off their list, so we introduced a check off system for these items so shoppers will know exactly what they need.

Inspiring Confidence

If Up Beet’s new shopping experience was to do the hard work to find the best deals, the grocery list needed to inspire confidence and show the shopper where they’re saving money.

Our testers let us know that individual item pages were overwhelming due to the overuse of numbers to display pricing information. Instead of displaying all of this information at once, we separated the content into tabs. This way shoppers have full control over what details they see during shopping to make the best informed decisions.

Reflection

What I Learned

Up Beet had a positive impact on the grocery shopping experience. Shoppers enjoyed the convenience of browsing through ads from their favorite stores with only one application instead of sorting through messy paper ads.

The design process taught me that testing with users and understanding their thoughts is critical in understanding how my designs are actually making an impact on their experience. User insights were also helpful in brainstorming new ideas I wouldn’t have thought of my self.

If there was additional time we would have liked to:

• Test our high fidelity prototype with shoppers to gauge if any changes should be made to improve the experience.

• Use our prototype in an actual grocery store to see how Up Beet functions on the go while someone is actively shopping.

As of this time there are no plans to further develop Up Beet, but it would be exciting to see how an application such as this one would make shopping easier.