0_GeagleAward.png
0_GeagleIcon.png

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
1_Greeting - Geagle.gif

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

1_KeyScreens.png

Experiences designed for Mobile & Kiosk

1_Greeting - Geagle.gif

Greeting

2_Idle - Geagle.gif

Idle

4_Speaking - Geagle.gif

Speaking

3.1_Ready to Listen - Geagle.gif

Ready to Listen

3.2_Listening - Geagle.gif

Listening

3.3_Listening - Got it - Geagle.gif

Got it

3.4_Listening - Didn't get it - Geagle.gif

Didn't get it

5_Thinking - Geagle.gif

Thinking

6_Confirmation - Geagle.gif

Confirmation

7_Error - Geagle.gif

Error

8_Reminder - Geagle.gif

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.

2_WhyGiantEagle.png

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.

3_Values.png

Giant Eagle's Values

The values also reflected well in its identity. It’s vibrant & approachable with breathy, circular, & clean visual style.

4_Identity.png

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.

5_ExistingSystem.png

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.

7_LofiStoryboard.png

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.

8_FigJamBoard.png

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.

9_PrimaryResearch.png

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.

10_Personas.png

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.

11_JourneyMap.png

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.

12_1_Moodboard.png
1_1_cortana.gif
1_2_siri.gif
12_3_EarlyExplorations.png

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.

13_MidExplorations.png

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:

14_FineTuning.png

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.

15_FinalVisualForm_Geagle.png

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.

We identified a total of 8 primary states & 4 sub-states under Listening:

Geagle’s key Interaction States:

👋 Greet: First instance, when the app is opened

📢 Speaking: When Geagle is talking to the shopper

🔔 Notification: When Geagle has something to remind

🎉 Confirmation: When task is completed successfully

🧘‍♀️Idle: Default state, when Geagle is not engaged

👂Listening: When shopper says something to Geagle

💬Thinking: When Geagle is processing a major task

⁉️Error: When something goess off with the task

Sub-states for Listening:

🎙Ready to Listen: When shopper invokes Geagle or Geagle expects a reply (transition from Idle to Listening)

👍 Got it: When Geagle recognizes what the shopper said
(transition from Listening to Idle)

👂Listening: When shopper starts speaking to Geagle after the invocation

 👎 Didn't get it: When Geagle doesn’t understand shopper’s response (transition from Listening to Idle)

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.

16_MotionExplorations.png

Motion explorations for each state

After multiple rounds of feedback & refinement, this is how geagle’s final interaction states looked like.

Motion matrix of Geagle's final interaction states

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.

17_VoiceOptions.png

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.

1 - Monotonous & Dull
3 - Adequate but not Vibrant
2 - Adequate pauses but higher Pitch
4 - Vibrant with adequate modulations

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.

18_ExistingInconsistencies.png

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.

19_NewDesignSystem.png

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.

20_UIExplorations.png

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.

21_UI_Iteration1.png

Initial high-fi designs for mobile & kiosk

We integrated the feedback & validated again through peer reviews. This is how the final structure looked like:

22_FinalStructure_Mobile.png

Finalized structure for Mobile App

23_FinalStructure_Kiosk.png

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