Layla Soileau | UX Designer

H-E-B / Service Design

Transforming digital coupons with a service design blueprint

Building a service blueprint reveals how digital coupons work at a 115-year-old grocery store, helping executives imagine a strategy for the future.

Challenge: Understand the H-E-B digital coupon lifecycle and the teams and partners involved so that we can create company-wide transparency and identity opportunities for improvement and efficiency.

Final desktop and mobile designs of the Savings page on the Lubbock website. Users clip the weekly coupon and return to the website the next week to clip a new coupon.

My Role

I stepped in as a researcher to lead, plan, and run this project with our team's Content Designer.

Why a Service Blueprint?

When my squad first became responsible for digital coupons at H-E-B, we were constantly pinged about broken coupons in the web and mobile shopping experiences.

For example, a coupon offering a free air fryer with the purchase of jalapeno poppers was mistakenly published, and our squad was charged with fixing it.

We wanted to understand why these scenarios occur so frequently, so we took a step back to really understand the digital coupon lifecycle and the teams and partners involved.

When my squad first became responsible for digital coupons at H-E-B, we were constantly pinged about broken coupons in the web and mobile shopping experiences.

For example, a coupon offering a free air fryer with the purchase of jalapeno poppers was mistakenly published, and our squad was charged with fixing it.

We wanted to understand why these scenarios occur so frequently, so we took a step back to really understand the digital coupon lifecycle and the teams and partners involved.

Process

Conduct partner interviews
We started by interviewing 21 H-E-B Partners who work with and/or are affected by digital coupons so that we could understand the roles and workflow behind the scenes.

Conduct partner interviews
We started by interviewing 21 H-E-B Partners who work with and/or are affected by digital coupons so that we could understand the roles and workflow behind the scenes.

Mural board where we synthesized all of the data collected from the Partner interviews. Sticky notes organized by interviewees and themes.

Run a concurrent customer usability study
While the interviews were underway, we had help from our Research Coordinator, who ran a customer usability study on digital coupons on the web and native apps.

Run a concurrent customer usability study
While the interviews were underway, we had help from our Research Coordinator, who ran a customer usability study on digital coupons on the web and native apps.

Draft the blueprint
Using all of the data we gathered from the Partner interviews and customer usability study, we mapped out the complete digital coupon journey, including pain points and opportunities.

Draft the blueprint
Using all of the data we gathered from the Partner interviews and customer usability study, we mapped out the complete digital coupon journey, including pain points and opportunities.

Document roles and map them to steps
As we created the blueprint, we also documented partner roles and associated them with steps in the digital coupon lifecycle. This allowed us to communicate who was involved at each step.

Document roles and map them to steps
As we created the blueprint, we also documented partner roles and associated them with steps in the digital coupon lifecycle. This allowed us to communicate who was involved at each step.

Illustrations using Open Peeps to represent each partner role: Business Development Manager (BDM), Business Development Assistant (BDA), Digital Coupon Team, Digital Editor, Digital Marketing Team, Promotions Team, Contact Center Supervisor, and Store Partner.

Validate the draft service blueprint
Then we ran workshops with the partners we interviewed and presented a draft of the blueprint to them for feedback.

Validate the draft service blueprint
Then we ran workshops with the partners we interviewed and presented a draft of the blueprint to them for feedback.

Mural board with empathy activities used during partner workshop.

Create the final service blueprint and present opportunities
After talking to Partners and going through all the various workshops and activities, we built the final service blueprint in Figma. It’s interactive — clicking on a pain point or role pops up detailed information.

Create the final service blueprint and present opportunities
After talking to Partners and going through all the various workshops and activities, we built the final service blueprint in Figma. It’s interactive — clicking on a pain point or role pops up detailed information.

Video demo of the interactive service blueprint. Users can pan around the page and zoom in and out. Each step is associated with roles, which are represented by people icons. Pain points are marked with sad emojis. Selecting a people icon or pain point emoji reveals more information in a popover.

Lessons Learned

By bringing unrelated teams together, sharing challenges, and brainstorming opportunities together, we brought H-E-B employees together, creating transparency, trust, and empathy.