Giant Eagle: New Customer Service Feature
I was a product designer for a think tank designing for Giant Eagle (a grocery chain) just as COVID required everyone to shelter in place.
I turned the Arrival Detection project around in 2 weeks to allow for efficient and prompt grocery pickup after the rise of COVID 19.
The Goal
How might we optimize customer arrival detection to help store staff proactively prepare orders and minimize customer wait times, especially during peak curbside pickup periods?
Our team was able to create an intuitive experience that also had a few moments of delight with friendly illustrations and satisfying checkmarks marking the customer journey. Ultimately, we reduced the wait time for curbside pickup customers from an average of about 6 minutes and 44 seconds to an average of 1 minute and 50 seconds in just the first week post launch.
The Industry
Hatched Labs is a think tank designing and developing digital experiences for Giant Eagle, an American supermarket chain with stores in Pennsylvania, Ohio, West Virginia, Indiana, and Maryland.
1
My Role
I designed for both iOS and Android, working with a product manager and feedback from the extended design team. I conducted competitive research, created user flows, and low fidelity to high fidelity wireframes.
2
The Team
The core product team consisted of the Product Manager, the Stakeholder representing Hatched Labs to Giant Eagle, and myself. I also collaborated with other Hatched Labs designers to align on the new aesthetic for the new Hatched Labs version of the Giant Eagle grocery app.
3
The Product
Arrival Detection is a feature which notifies Giant Eagle store staff that a customer is on their way to pick up their groceries and allows them to prepare the order for pickup and payment if necessary. This notification would ultimately reduce customers’ wait time (an average of 6 minutes and 44 seconds) once they arrive on the premises.
2
Duration
It took 2 weeks to complete the new design.
Challenges
We had an accelerated timeline because Arrival Detection became even more valuable as a feature during the pandemic in 2020 when customers were grocery shopping online and using the curbside pickup service more than ever for a low contact shopping experience.
1
Analytics and Business Goals
Customers currently arrive at the store for pickup, park in a designated curbside pickup parking spot, call the store to let them know they arrived, then wait for their order to be ready and brought out to their car. Our goal is to reduce the customers' wait time during curbside pickup.
2
Limitations of the FlyBuy SDK
This was a service design challenge where we were limited by the capabilities of the FlyBuy Software Development Kit (SDK) and their API as it communicates with our retail fulfillment software.
3
Customer Privacy Concerns
Our messaging for the customer had to address the reasons we are asking for sensitive personal information, the customer's phone number for text messages, their vehicle color, make and model, as well as location permissions and push notification permissions.
Requirements
The FlyBuy App experience shows the Software Development Kit (SDK) we were adapting for our custom Arrival Detection feature. We used it to inform the user flow and integration.
1
Entry Points
Customers can enter the feature experience through a deep link in a text message, or the landing page of the Giant Eagle grocery app.
2
Forms
Customers must onboard with their name, phone number, car make and car color in order for Giant Eagle staff to identify them and bring them their groceries.
3
Legal
Copy & Links to Privacy Policy & Terms of Use
4
Permissions
Asking customers for location permissions and push notification permissions. Customers may deny those requests and they can still use the app to alert the store of where they are in their pickup process.
5
Tutorial
The arrival detection experience includes a tutorial to educate the customer on the different steps of the process. Arrival detection ideally works if the customer alerts the store that they are on their way. Upon arriving at the store, customers must park in a designated curbside pickup parking spot and let the store know they have arrived. Finally, Giant Eagle staff will bring the order to the customer's car.
6
Customer Notifications
Customers can notify the store that they are "on their way" to the store, and that "they have arrived".
References
I looked for inspiration and common UX/UI patterns in analogous experiences to Arrival Detection.
1
Analogous Experience: Lyft
I referenced the Lyft Driver's app. Customers are driving to a destination within a designated timeframe and must alert another party of their arrival.
2
Illustration Layouts
I referenced illustrations that were informative and approachable for the tutorial portion of the feature. For the sake of speed, we used existing illustrations from the marketing and branding team that we could adapt and incorporate into new designs for our purposes.
User Flows
We initially explored flows for both new users and returning users. Returning users would not need to give permissions for location and notification, and ideally have their contact information and car information saved from their previous experience. The returning user flow was eventually dropped due to technical limitations where customer information entered could not be stored.
Wireframes
We had requirements for "Location Access" and "Allow Notification" permissions. In laying out the user flow and screens I was concerned that multiple permissions modals would appear like a glitch or be overwhelming to customers.
1
Prioritize Surfacing Information
My second proposal placed the "Location Access" permission modal after the confirmation screen after customers indicate they are "On the way".
The returning user flow was eventually dropped due to technical limitations where customer information entered could not be stored.
2
Final Permissions Flow
Here are the final designs for permissions. This sequence of permissions also made a better contextual case for allowing location access since users are in the frame of mind that their location in orientation to the store matters.
3
Entry Points
I created a few proposals for different user flows which ultimately did not make it to the final designs due to technical limitations with the third party SDK.
Due to concerns that customers may want to access the grocery app experience to shop while in the arrival detection flow, this proposal keeps the arrival detection experience in the landing screen, where the entry point CTA changes into the notification CTAs "On My Way" or "I'm Here" based on where the customer is in the pickup flow.
To integrate further with the familiar shopping experience, customers may also access the flow from their upcoming order screen, which also was ultimately not feasible due to technical limitations.
This flow changes the entry point CTAs based on where the user is in the pickup flow. This flow still navigated the customer into the Arrival Detection flow while allowing the customer a shortcut to notify the Grocery staff that they are on the way or have arrived.
4
Entry Points Final
This proposal is the closest to what was implemented. We were not able to have CTAs on the landing or the orders page, but we could have toast notifications taking the customer to where they left off in the pickup flow. I also proposed a "Return to Shopping" CTA on the last confirmation screen to create an easy transition for customers out of the app and back to browsing, which did make it to the final designs.
5
Tutorial
I explored a version of the tutorial with photographs more similar to the style of the FlyBuy app, and another with illustrations from the marketing/branding team and myself. The illustrations were favored as they were friendlier and more engaging.
6
Tutorial Final
After considerations that customers may not swipe through the carousel for the tutorial, I proposed a timeline version which displayed a tip at each notification the customer sent in.
In these final designs above, when customers enter the experience they see their order is placed, they indicate they are "On My Way" then the corresponding checkmark is filled, with the final step being "I'm Here". The hierarchy places the communication with the customer at the top, the timeline/checklist near the controls and the CTAs at the very bottom.
Final Designs
Mobile clickable prototypes showing entry points to the Arrival Detection user flow with permissions and tutorial Illustrations.
Next Steps
Ultimately we were able to reduce the wait time for curbside pickup customers from an average of about 6 minutes and 44 seconds to an average of 1 minute and 50 seconds in just the first week.
Arrival detection provided a significant improvement to the customer and staff experience for such an essential service as grocery shopping during a pandemic. It is rewarding to think that this feature has added more certainty to a customer's pickup experience and reduced stress for customers who are sheltering in place.
Given the constraints of the SDK we worked with, our team was able to design an intuitive experience that also had a few moments of delight with friendly illustrations and satisfying checkmarks marking the customer journey. I incorporated familiar design patterns like the one above. The sheet with store information slides up to reveal customer information.
In future iterations, if there are improvements to the SDK or if the feature can be built from scratch without a third party integration, we may be able to show the Arrival Detection CTA within specific orders, and allow customers to view a summary of their order once they are in the Arrival Detection flow. We would also be able to save customer information and create a personalized experience for returning users.