discovering coupons
major us grocery retailer
my role
Senior Product Designer for mobile shopping experience team.
my team
Collaborated with 1 product manager & 2 tech leads & 12 developer pairs. Development team was both onsite & offshore in Chennai, India. Regularly collaborated with larger mobile design team & web shopping team.
skills & tools
Facilitation
Research
Prototyping
Usability Testing
Interaction Design
Sketch
InVision
UserZoom
timeline
2018-2019 (9 months)
tl;dr
Kroger is one of the United State’s largest grocery retailers. Kroger’s mobile app launched in 2012 with a primary focus on their in-store customers. Over the years, they slowly introduced grocery pickup & delivery options to develop an e-commerce customer base. In 2018, Kroger’s mobile app serviced 5.6M monthly average users & was in need of major design changes in order to prioritize e-commerce goals & maximize revenue gains. ThoughtWorks was brought in to help champion the path forward.
In 9 months, my product team was able to pave the way for iterative & data driven design by tackling major design problems & embracing business revenue goals for the mobile shopping experience. We accomplished the following:
Increased coupon loads by 1% & increased coupon views by ~8.5%.
Increased mobile app revenue from $44,763 to $7,459,106 in 1 quarter (Q2).
Introduced categories of products resulting in 1,472,455 views of categories per week with our search view numbers intact & unharmed.
This case study focuses on how my team increased the visibility of coupons by 8.5% & gave our customers a new experience for saving money.
my process
discovery
Understand & learn from the people using my experiences. Uncover the problems they face & determine which are most important to solve. Find opportunities for how we can make our experiences better for people.
design exploration
Explore design ideas & hypotheses to solve identified problems. Experiment & test ideas to find the best direction forward. Understand the use cases & learnings of ideas to iterate even further.
deliver & measure
Work with the team to build it the right way. Iterate on designs to further consider delivery scenarios & constraints. Refine the details to create meaningful experiences. Release & measure designs continuously.
discovery
problem spaceunderstanding the why
Customers who love to save expressed major pains while trying to find coupons during their mobile app shopping experience. They often described the process as ‘tedious’ and expressed a lack of confidence in their ability to quickly skim through all of their coupons. They were overwhelmed with the number of coupons to search through.
journey mapping
understanding our customers
We started by spending our time looking at daily customer feedback surveys. From there we started to understand our customer personas and developed a problem statement to explore. We spent time mapping out the customer journey to align on where we believed pains & opportunities existed today.
the goalsturning pains into opportunities
As a team we decided on specific pains to target & explore as an opportunity hypothesis. We noticed a gap in the customer’s shopping experience. Instead of spending time searching for coupons after shopping in the app, we wanted to explore a way to have the coupon & product searching experience to be an all- in-one seamless experience. Customers were wasting so much time and effort searching for products & coupons separately.
“How might we make the process of couponing less time-consuming?”
“How might we allow coupons to be more discoverable to customers?”
design exploration
gather ideasbrainstorming & ideation
After we decided on a hypothesis direction, we began sketching new ideas for how customers could better access coupons while they shopped. After the team shared design ideas & feedback, we dot voted to move forward with an idea in which coupons were accessible from product cards.
initial sketches of coupons accessible on the product card
prioritizationfinal concepts & defining success
We decided to test 2 variations of coupons on product cards with customers via UserZoom. We wanted to test our hypothesis to see if customers could more easily find coupons as they shopped when coupons were accessible via the product cards.
We were trying to assess the following in our tests:
When we asked customers to find the best deal for a product, they would notice coupons as they shopped on a product card instead of stopping their shopping flow to navigate to the coupons area.
How did customers feel about having coupons accessible from a product card? Would they understand they could tap to view & load a coupon?
Would customers instead expect coupons to be in a product details page instead? Would they expect this & ignore coupons on a product card?
Did customers feel like this improved their current shopping experience?
coupons on product cards v1
coupons on product cards v2
evaluateusability testing
We tested 2 variations of coupons on product cards with customers via UserZoom. We wanted to test our hypothesis:
Could customers more easily find coupons as they shopped when coupons were accessible via the product cards?
Both designs tested very positively, & almost all customers we tested with were quick to notice the coupons & load them. Many were super excited to get a taste of our new designs & even asked when the feature would be live. The customers’ excitement was contagious & we couldn’t wait to deliver a better saving experience for them.
deliver & measure
delivery prepexploring scenarios & visual updates
Despite both designs testing very well, we chose to move forward with V2 because we felt like it made for a smoother interaction & a superior visual design that provided more space for some of our longer coupon descriptions. We also decided to show specific coupon information instead of a generic “Show Coupons” to further entice our customers & give them information about the coupon as soon as possible.
The product card was a heavily shared component across several areas & we needed to socialize our new design with other teams to ensure we were considering each of their unique scenarios. We were careful to assess where & when coupons should show on a product card & how to handle multiple coupons available for a product as well.
Scenarios & States we considered:
Multiple coupons available
Coupon loaded state
Long coupon descriptions & special offer coupons (visually distinguished)
How & if coupons should appear on card in designated areas: past purchases, cart, shopping list, substitutions & our smaller product cards used in carousels.
Coupon service loading errors
deliver & measureby the numbers
After some refinement with the team, we settled on a path forward for our coupon designs. I supported the development team as they worked on the design updates when any new considerations were needed.
After we released coupons on product cards, we saw the following numbers increase in the first few months in production and remained steady over time:
Coupon loads increased by 1% (896,479 monthly increase)
Coupon views increased by ~8.5% (2,619,906 monthly increase)
iOS final designs
android final designs
learnings
collaboration is key
The product card component was shared across multiple product spaces in the mobile app. Being responsible for a component that impacts so many teams requires a great deal of communication & collaboration. We had to think about our design decisions from many different perspectives & ensure they did not negatively impact others. Our most important learning from this is proactive collaboration and inclusivity is so important. If you lead with inclusivity, people will respect your decisions!
no performance left behind
The coupon service that our experience depended on was very slow and relied on data from 3rd party coupon providers. We worked very strategically with the service team to ensure our coupon work passed many rounds of performance testing. This took an extra month but we decided prioritizing performance was critical to the user experience.
conclusion
We were able to come together across multiple teams (marketing, coupon service team, our product team) and provide customers an integrated and seamless couponing experience as they shopped. Customers no longer had to coupon as a second step after shopping for all of their products. We accomplished:
increased coupon loads by 1% (896,479 monthly increase)
increased coupon views by ~8.5% (2,619,906 monthly increase).
This set the stage for the grocery business to appeal to more coupon vendors and sell valuable coupon monetization spots which you can hear more about in the Monetizing Products case study.