In Part 1, I explored how restaurants and retailers help customers submit a purchase to claim missing loyalty points, after running into the issue at my local grocer. Here I’ll dive into my grocery store’s existing app and my first attempts to design a solution.
Disclaimer: I am not affiliated with Star Market or Albertsons stores in any capacity.
Reviewing Existing Functionality
Note: The UX/UI for the Star Market app was recently updated, so images below include old screenshots I saved, and some modifications I made to existing screens to mirror the UI that existed when I began designing. Seeing a new version released, underscored the importance of documenting your starting point whether it be personal projects or work-related ones, so you can show what you’ve implemented and don’t need to spend time recreating what’s no longer in existence!
When I first opening the Star Market app, I was taken to the Deals screen where I could clip digital coupons to be used at checkout. This screen and the bottom navigation have been updated since I began my project, but when I first started out I was curious about the purpose of the various navigation items.
I took a bit of detour researching the differences between Deals and Weekly Ads and how other companies handled them. As you’ll see below, I experimented with consolidating these navigation items in my sketches and wireframes, but (spoiler alert!) I was reminded of the importance of focusing on the key problem you’re trying to solve versus getting caught up in other areas to explore.
The Rewards section of the app provides users with a summary of the status of their rewards (how many are available, expiring, etc) and allows users to apply their available rewards to particular offers.
There is also an information button to learn about the details of the rewards program, and if a user closes the Offers accordions, they can access an FAQs button which brings them to a separate page. Neither of these pages currently provide information on what to do if you fail to enter your phone number at checkout.
The My Store section of the app contains information on the users primary store and is the place to access My Account, Settings, and a few other tools.
When I first explored this portion of the app, I was surprised to see that this was where to access My Account and Settings, and as I played out some design options their placement became a point of greater focus.
In the recent release, the My Store section was relabeled Home and was migrated to the beginning of the navigation, perhaps because the activities and information contained in it are more central to users use of the app.
My Account, My Purchases and My Receipts
Once a user clicks into My Account they are presented with their account information and the option to view My Purchases or My Receipts. In looking for a place to add a form to submit missing transactions, I explored both these screens, quickly learning the My Purchases was focused more on the items I’d purchased, whereas My Receipts showed information on each transaction.
Goals for Initial Wireframes
I had two primary goals for my initial sketches and wireframes:
- Elevate “My Account” to be more accessible to users
- Introduce a missing transactions form in the My Receipts section
Elevating “My Account”
My first thinking was to make My Account part of the bottom navigation, but that would mean introducing a sixth option in the nav which felt heavy. I wondered if I could pull out My Store and place it somewhere else in the UI, so I turned to other apps to see how they handled the placement of My Store and My Account.
Some showed users their store only on key screens, others hid it behind a hamburger menu, and some made the user enter it when they wanted to complete certain actions, like review a Weekly Ad. The solution I ended up emulating was that of Publix, which makes the store available at all times in the header.
Publix’s user account screens can be accessed through a hamburger menu in the upper left which I also considered implementing in my design, but worried would leave My Account too hidden in the case of the Star Market app.
In sketching out my revision to the app navigation, I tried consolidating Deals and the Weekly Ad into a Savings tab and rethought some of the structure of the Rewards page. However, exploring these other areas diverted attention away from my primary goals and ended up affecting usability testing which I’ll discuss in Part 3.
Adding a Missing Transaction Form
I had already explored forms to emulate in Part 1 and used those as a base for mine.
Side note: I’ve often struggled to provide appropriate space in my sketches and often want to jump into Adobe XD, but I’m trying to embrace sketching as a greater part my process because I know it saves time in the long run.
Wireframes and Prototype #1
After reviewing the app and preparing my sketches, I went into Adobe XD and designed my screens, using the sizes of elements in the actual app as reference. Then I set up my prototype! If you’d like to test out the prototype for yourself, go here.
Stay tuned for Part 3 where I go through usability testing and revisions to my wireframes.