EMPLOYER
Hatched Labs
TEAM
Product Manager, Myself
CONTRIBUTION
Competitive Research, Wireframes, High Fidelity
DURATION
2 weeks February 2020
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.
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.
BACKGROUND
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. 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. We were happy to be able to make some significant improvements to their shopping experience.
THE CHALLENGE
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.
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.
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 I referenced to inform the user flow and integration with our custom Arrival Detection feature.
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.
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.
Legal:
-
Copy & Links to Privacy Policy & Terms of Use
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.
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.
Customer Notifications:
-
Customers can notify the store that they are "on their way" to the store, and that "they have arrived".
INSPIRATION
I referenced the Lyft Driver's app as an analogous experience to Arrival Detection. Customers are driving to a destination within a designated timeframe and must alert another party of their arrival.
I referenced illustrations that were informative and approachable for the tutorial portion of the feature. We already had illustrations from the marketing and branding team that we can 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 cannot 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. My second proposal placed the "Location Access" permission modal after the confirmation screen after customers indicate they are "On the way".
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.
EXPLORATIONS
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.
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.
TUTORIAL EXPLORATIONS
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.
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.
CONCLUSION
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.
RETROSPECTIVE
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.