Geagle
Smart & thoughtful shopping companion for a
seamless grocery shopping experience with Giant Eagle
OVERVIEW
As part of our IxD Studio, we were challenged to conceptualize and integrate an intelligent voice assistant in a Pittsburgh-based organization’s existing product ecosystem, specifically their mobile app & kiosk.
Our team designed Geagle, a smart & thoughtful conversational assistant for Giant Eagle grocery store. We conceived plausible scenarios where a smart assistant could intervene to provide personalized, seamless & assistive experience, specifically for millennial & senior shoppers, & designed an end-to-end experience around that.
ROLE
Design Grad Student @CMU
Research, conceptualization, visual design, motion design, conversation design, prototyping, project management
TEAM
5 designers
Interaction Design Studio
Chen Yu Chiu, Elaine Lu,
Ivar Dameron, Juwon Lee, Lokesh Fulfagar
TIMELINE
7 weeks
Sep - Oct 2021
TOOLS
Figma, FigJam, After Effects, Voiceflow, Premiere Pro, Notion
OUTCOME
Geagle [JEE-gull]
A smart & thoughtful conversational assistant for Giant Eagle to provide a personalized, seamless, & assistive grocery shopping experience from home to the store.
Concept Video demonstrating key scenarios with Geagle
Experiences designed for Mobile & Kiosk
Greeting
Idle
Speaking
Ready to Listen
Listening
Got it
Didn't get it
Thinking
Confirmation
Error
Reminder
Interaction States designed for Geagle
Understanding the Client
| DURATION: 3-4 DAYS
Why Giant Eagle?
We researched different organizations in Pittsburgh that had an app & kiosk ecosystem & could benefit from an intelligent assistant. As a team, we wanted to explore a problem space that catered to a wider audience & formed a regular part of their life. Giant Eagle met those criteria & more. Its uplifting brand values, homely relationship with users, innovative technological infrastructure, & easy accessibility for field visits & research added to the list.
Potential clients that we researched
After finalizing the client, we did desk research & field visit to get to know the client better & absorb its values to later translate in our assistant’s design. We also studied its existing technologies & user journeys in detail to understand the current landscape & areas to intervene.
Brand Values & Identity
Founded in 1918 in Pittsburgh itself, Giant Eagle has grown to become the largest food retailer in the region. It enjoys the status of a homely neighborhood supermarket amongst Pittsburghers & this is integrated well in its values too. It focuses highly on community empowerment, along with innovation, & sustainability.
Giant Eagle's Values
The values also reflected well in its identity. It’s vibrant & approachable with breathy, circular, & clean visual style.
Giant Eagle's visual identity
Analyzing existing ecosystem
We did a field visit to study Giant Eagle’s existing shopping ecosystem. We experienced it first-hand by going through the entire shopping experience in teams of 2. 1 person documented & took notes while the other executed it.
The most interesting find was Scan, Pay & Go launched recently that allowed customers to self-scan & checkout items on the go using a mobile app or a handheld device. Also, we discovered how in-store & off-store experiences were disconnected visually as well as experientially.
Giant Eagle's existing technologies
Existing user journey for self-checkout kiosk
Existing user journey for scan, pay & go
Research & Ideation
| DURATION: 7-8 DAYS
Parking the initial ideas
As we began to grasp the context, potential solutions started to pop in our heads. We didn’t want to jump to the solution as it would bias the research that we had planned, nor we wanted to lose those ideas.
We planned a quick 2-hour session, in the first hour of which we put out our initial thoughts & ideas using lo-fi storyboards.
Some snapshots from the lo-fi storyboards
Then in the second half, we discussed them in open whiteboard sessions & finally collated our takeaways in FigJam mapped under common categories, in a way similar to affinity mapping.
Collated takeaways from the discussion
All of this was then parked to be referenced later. The process helped us confront those ideas & get it out of our systems, so that we could stop holding onto them, allowing us to move into user research with a fresh mind. It also helped us see some gaps in our understanding that we could uncover in the research.
Primary Research
Our primary research was based on interviews with 4 senior & 4 millennial shoppers and 1 staff. We also made notes of our observations at the store.
We thought we would get better responses if people were already in their shopper shoes, hence we decided to conduct our interviews at Giant Eagle store, targeting shoppers who already had something in their cart. We drafted an interview protocol to guide the informal conversation during the interview.
Snapshot from the interview (left); Interview Protocol (right)
Literature Research
None of us had designed experiences for elderly before. We weren’t sure if interviewing just 4 seniors would do justice to understanding their pain points. Since we had limited time, we thought of turning to those who had already done that. We referred to existing research around how elderly shop for groceries and use digital technologies & self-service kiosks.
Pain Points
Based on the insights from this research & the problems identified initially in the existing user journeys, we collated the following key pain points:
🤔 I don’t know what to buy..
Grocery shopping starts not from shopping list but what to cook which many millennials struggled with
🥜 Is this good for me..
Shoppers faced issues validating products for their dietary restrictions, fine print added to the problem
☝️ I don’t need help, but..
Senior shoppers don’t like asking for help but happily accept assistance when staff reaches out
👀️ I can’t find what I’m looking for..
One of the biggest reported issues by shoppers of all ages was finding a particular product in the store
⚖️ I can’t decide which of these to buy..
Shoppers of all ages spent a long time examining similar items & even sought family or friend’s advice
😨 Self-checkout is scary..
Shoppers, especially the elderly, found self-checkout to be overwhelming, they also feared delaying the queue
Personas & Scenarios
Based on the insights from research, we developed our personas for senior & millennial shoppers. With these personas & research insights in place, we started conceptualizing scenarios where assistant could intervene to tackle these pain points. We also revisited our parked ideas from before to include the ones that still made sense.
One of the whiteboard sessions during conceptualization
We iterated on our low-fi storyboards to demonstrate these scenarios and then translated it in a journey map to enrich it further with the shopper’s context, actions, & emotions at each step. This helped us identify exactly where & how would the virtual assistant step in to address the opportunity areas. We conceptualized assistant’s each interaction with the user using dummy dialogues & mapped the associated interaction modalities.
Journey Map
Defining Geagle
| DURATION: 8-9 DAYS
Values
We named our virtual assistant “Geagle” [pronounced JEE-gull], a nickname used by native Pittsburghers to affectionately refer to Giant Eagle. Further, with an aim to personify Giant Eagle’s spirit & values, we envisioned Geagle to be:
🎯 Empowering
Inspiring confidence to accomplish more
😊️ Affable
Portraying friendly, easy to talk to demeanor
🌟 Vibrant
Representing smart yet approachable personality
Visual Form
With the same intent of personifying Giant Eagle through Geagle, we set out the following principles, derived from our study of Giant Eagle’s brand identity, to guide Geagle’s visual form:
colors: green, red
shape: rounded, organic, soft
style: breathy, crisp, modern
feel: friendly, empowering, vibrant, approachable
We put together quick moodboards based on these characteristics while also looking at existing virtual assistants. We explored rough ideas playing with relevant forms like shopping cart, leaves from giant eagle’s logo, its letter form, etc.
Snapshot from the moodboard (top left); existing virtual assistants (bottom left); early rough explorations (right)
We refined those directions further & then placed them on Giant Eagle’s existing app to evaluate how well they integrate visually. We analyzed those options internally & did peer reviews to choose the final direction.
We decided to avoid red as the primary color since the UI was already too heavy with red elements. We chose Option 3 as the final direction since it portrayed a fine balance between playful & formal, visually complemented the UI, & seemed to have good chemistry between the ball & the leaves that could be interesting to explore via motion.
Refined explorations (left); testing on Giant Eagle app (right)
We were not completely satisfied with the color & form of our chosen option & felt it required some fine-tuning. The current green looked warmer than the rest of the UI & the gap between the two leaves looked distracting. So we explored some options and finally landed on the following form:
Fine tuning the final direction
Though the form was organic & continuous, we built it from geometric shapes to facilitate smoother animation in the next step. We envisioned the red dot to be the central actor to communicate geagle’s state & the leaves below to be the support.
Geagle's final visual form
Motion Design
At each step of the user journey, we studied Geagle’s interactions with the shopper & identified what states do the system transitions through which would be meaningful for the shopper to know. Through the process, we ensured to keep the number of states minimum to avoid additional cognitive load on the shopper.
For each state, we did multiple explorations. To be quick, we decided to use static versions communicating the motion through keyframes of the sequence. We wanted to keep our motions based on already set mental models of people to make it easy to grasp, like three alternating dots for waiting, waveform for audio etc. We used this criterion to select our final picks.
We also considered how different states would transition between one another & designed the motions & flow for those.
Geagle's transition across states
Voice & Conversation
With Giant Eagle’s homey & friendly reputation already established amongst its shoppers, it was critical for Geagle to resonate that in its voice. We looked for a non-robotic voice that sounded upbeat, vibrant, & humane. We opted for an AI voice instead of a human actor as we wanted to test extensively while writing the script for which TTS was the best option.
Different voices explored for Geagle
As we tested different voices with shoppers, we discovered voices with natural modulations & pauses, and in a slightly high-pitched area aligned well with the vibrant, humane, and upbeat characteristics we were looking for. Following are some voice samples from the test, we went ahead with Option 4.
Different voices explored for Geagle
For designing conversations, we referred to the guidelines from Google’s Conversation Design & Amazon Alexa’s Voice Design Guide. Building on Geagle’s values, we started iterating the dummy dialogues we had written as part of the user journey.
While writing the script, we tested each dialogue with TTS (text-to-speech) using Geagle’s voice to make sure it sounded like a spoken conversation instead of a written text. Once done, we did multiple rounds of iteration by roleplaying the scenarios with each other to make the conversation as natural as possible.
😇 Contextual & mindful choice of words
Contextual phrasing: “Yum! That’s a great pick.”
Mindful phrasing: “this is a healthy choice for you” over “this is good for diabetes”.
🧠 Remember details like a companion
Geagle was envisioned to be a companion. Companions know your choices from previous experiences & suggest accordingly, so should Geagle.
🤌 Reveal information in biteable chunks
Some dialogues can go long - like suggestions or info about products. We broke down those to smaller meaningful steps.
👆Optimize for voice but cover touch too
Voice is a great modality but can be unnecessarily slow at times. We introduced touch-based interactions with chips, carousels, etc. wherever warranted.
Designing Interfaces
| DURATION: 13-14 DAYS
Tackling existing inconsistencies
Scan, Pay & Go app & Self-checkout Kiosks didn’t align with Giant Eagle’s brand guidelines at all. We decided to make the experiences consistent by redesigning the kiosk experience & integrating Scan, Pay & Go within the existing grocery app.
Inconsistencies in existing system
Based on Giant Eagle’s existing design system, we defined our design system to be used for harmonizing the new kiosk and scan, pay & go experience.
Collated takeaways from the discussion
Integrating Geagle
This was a tricky one. We had to make several design decisions here - Should the assistant be visible the whole time? Where should it be positioned? Should we show the entire conversation, just the running one, or the last dialogue? Should it have its own page or open in the bottom sheet? And many more. We decided to approach these, one by one - we created lo-fi explorations for each step, analyzed pros & cons for each, resolved, & moved ahead.
Early explorations for Geagle’s positioning
Designing interface
After sorting these initial challenges, we quickly moved to high-fi designs & testing with peers & shoppers that helped us gain some good feedback. Overall, shoppers found the ux pretty intuitive, the major feedback was around visuals.
The kiosk screens looked a little inconsistent with the mobile experience. The secondary actions on the right took huge part of the interface even though they had little usage. The positioning of Geagle looked a little off & disconnected from the dialogue. In mobile, the use of red came out too strong, especially in the conversation.
Initial high-fi designs for mobile & kiosk
We integrated the feedback & validated again through peer reviews. This is how the final structure looked like:
Finalized structure for Mobile App
Finalized structure for Mobile App
Prototyping Scenarios
After finalizing the key screens & scenarios, we went ahead with prototyping the screens based on the scenarios from user journey & compiled them to create a concept video for explanation.
🔴 I don’t know what to buy..
Smart planning for shopping list
✅ SOLUTION:
-
Get recipe recommendations based on your food preferences
-
Extract ingredients from the recipes you like & add to your shopping list
-
Deduct items that you might already have in your inventory
🤔️ HOW?
-
Expanding on Giant Eagle’s existing rich repository of recipes & mapping ingredients with products in the repository
🔴 I can’t find what I’m looking for..
Navigation & item-finding
✅ SOLUTION:
-
Find all your shopping list items with the shortest route through interactive map
-
Locate any other product you need by simply asking geagle
🤔️ HOW?
-
If permissioned, geagle can detect your position inside the store through wifi-based indoor positioning system
-
Integrated with Giant Eagle’s stock repository, it can extract a product’s aisle location
🔴 Is this good for me..
Suggestions based on dietary preferences
✅ SOLUTION:
-
Get advice on products based on your dietary preferences including GE pharmacy history
-
Check detailed product information including nutrition, diet-type, and ingredients
🤔️ HOW?
-
If permissioned, Geagle can link shopper’s diet type, allergies & relevant health concerns
-
With datafied product repository, Geagle can extract product ingredients & nutrition values
🔴 I can’t decide which of these to buy..
Progressive guidance for
choosing products
✅ SOLUTION:
-
Guides you progressively through a series of questions towards a decision
-
Loops in your previous experiences & preferences for aiding decision making
-
Connects you with your friends or family for expert advice if still not sure
🤔️ HOW?
-
Breaks down decision making in relevant steps. Eg: context > cost > history/categories
🔴 Is this good for me..
Label Reading
✅ SOLUTION:
-
Ask Geagle or scan the product to get relevant details
-
Get clear bite-sized clear information about price, nutrition, ingredients, diet-type, and relevant recipes
🤔️ HOW?
-
Scanning the bar code links to datafied product repository for extracting detailed information
🔴 I don’t need help, but..
Proactive Assistance
✅ SOLUTION:
🤔️ HOW?
-
Proactively offers help to seniors whenever they’re stuck somewhere
-
Discount suggestions, out-of-stock alternatives, items forgot to pick, etc based on your shopping list
-
Detects a senior profile & uses cues like: pacing an area back & forth; long time since a product scanned at kiosk during checkout
-
Syncs shopping list with running offers, availability, and cart items
🔴 Self-checkout is scary..
Step-by-step guidance
✅ SOLUTION:
-
Using conversation to break down the complex experience in small guided steps
-
Slow checkout lanes dedicated for seniors
-
Video tutorials to show where & how to use other parts of the kiosk for weighing, scanning, adding coupons, & payment
