In-store Shopper App
🍏

In-store Shopper App

Tags
UX
DesignOps
UI
Property
 

About the Project

 
Timeline: 2 months
Roles: Design Ops, UX research, Interaction and Visual design
Worked with: Product manager, UX Designer
Tools: Figma, Notion
Deliverables: user insights from research, components library, userflows, user expectation requirements

Background

  • EatStreet wanted to pursue grocery delivery and penetrate existing markets
  • Given that we don't have grocery capabilities to allow in-store shoppers to shop for customers, I collaborated with another UX designer to analyze the newer version of Driver app to see if we can leverage its components to create a shopping experience. The result was that the Driver app flow will not fit well and will require more technical workarounds
  • I was tasked with designing a Shopper app, where an in-store shoppers receive orders, pick the items, checkout, and then hand off orders to a driver(s)
 

Problem

  • How to shorten time to market with having shopping capabilities in order to
    • Allow in-store shopper to do their job
    • Allow EatStreet to enter and scale grocery delivery
    •  

Solution Statement

  • Create an app that allow our shoppers to perform grocery shopping in behalf fo customers with speed and accuracy
 

Challenge

  • Providing an experience where shoppers interact with 3 different people: Customer with question about substitution, dispatch for submitting item substitution, drivers for hand-off
  • Ability to handle multiple order requests while performing an active order
  • Ability to communicate with drivers for hand-off
  • How to expedite building a new app in short period of time

Approach

Research and Requirements Gathering

  • In this stage, I worked closely with another UX Designer. We interviewed few shoppers to learn more about their current workflow
  • We identified that Shoppers
    • Consider item location, item availability, customer communication, and item substitution as the top challenges for them
    • Can have an active shopping task while also having the ability to acknowledge new assigned shopping tasks.
    • Need to communicate with dispatch to handle substitutions
  • We shared our research findings with the product manager in order to update the project requirements

Setup and Collaboration

  • I made the decision to adopt Figma for this project because
    • I wanted to have direct line of communication with Product Manager and developers
    • I also wanted a collaborative tool where I can work with the other UX designer on certain parts or just receive feedback on my direction

Deliverables

Components & Userflows

  • I took a component-first approach where I start with thinking about and designing the components that will be used to eventually to create screens
  • I frequently shared userflows and components to help developers know how the app will work so they could start architecting and coding in parallel with the design work
  • I mapped product requirements to each userflow to make it easy for the product manager and developers to follow along
  • Once I had library of components I started linking them and weaving the screens out of them and adding them to a shared Figma file with developers along with the userflow
 
Part of the user flow
Part of the user flow
 
Example of linked components
Example of linked components

User Journey

  • One of the tools I used to communicate project progress is user journey. I created it to
    • Breakdown main activities of the shopper job
    • Communicate progress and reach better team alignment
    •  
Section of the user journey
Section of the user journey
 

Design System

  • I also added more components that have not been part of the driver design system
notion image
notion image

Final Prototype