SmartBasket
Improving an experience during a pandemic
With the pandemic, the grocery store experience has turned into a bit of a mission. From waiting in line to get into the store to queueing up for what seems like forever to checkout, being able to pop in and out was no longer possible. So, using data I’ve collected from observing shoppers at a few grocery stores, I designed the SmartBasket which allows shoppers to start the checkout process as they shop, helping them zip in and out of the stores quickly and safely.
My Role
Research, Analysis & Ideation, UX & UI Design, Prototyping
Process
Ethnographic Research, Data Visualization, ERAF System, Wireframe, Prototype, Iteration, Style Tile
Tools
Illustrator, Figma
Timeline
13 Weeks
DISCOVER
Ethnographic Research & Pain Points
I started this project by conducting ethnographic research, observing grocery shoppers in different stores, during different days and times to identify pain points and bottlenecks.
What I found was that basket shoppers, while they make up the smaller percentage of shoppers, they might actually be having the more frustrating experience.
Basket Shoppers
Basket Shoppers made up 14% of all shoppers observed.
Average Time to Shop (in minutes)
Even though basket shoppers spent 50% less time shopping for items and checking-out than cart shoppers, they spent just as long lining up to checkout because they were lining up with all the other shoppers, as well (i.e., cart shoppers).
Shopper Emotions
The most prevalent emotions in cart shoppers during the line up for checkout was boredom and resignation. For basket shoppers? Frustration and impatience.
Checkout Bottlenecks
The most challenging bottleneck experienced by self-checkout shoppers was weighing produce. Having to find the sticker to scan the item and then waiting for it to be weighed was taking too long.
DEFINE
People Problem
How can we make the grocery shopping experience quicker, easier, and safer
during a pandemic?
User Story
As a grocery shopper, I want to use a basket, so I can shop for what I need and
leave the store quickly.
ERAF* Systems
To better understand the user journey and the grocery store ecosystem, I developed an ERAF system diagram. With my SmartBasket intervention, I revised my ERAF system to assess how the ecosystem will be affected and highlight areas that may have been overlooked during ideation.
*Entities, Relations, Attributes, Flows
Before
ERAF (Before) Legend
After
ERAF (After) Legend
Tech support staff
One of the things that the ERAF system highlighted was the need for more tech-savvy staff. Currently, grocery store staff are available help customers with any challenges, from locating items within the store, offering price checks, or helping to remove self-checkout errors.
However, tech-savvy staff will be needed to offer tech support when required to customers using the SmartBasket. Also, as is with all digital products, regular updates and maintenance will be needed for the SmartBasket to keeping working smoothly. This may also be the responsibility of the tech-savvy store staff.
DEVELOP
Sketches & Wireframes
Sketches V1
Sketches V2
Wireframes V1
Wireframes V2
Orientation Changes
Initially, I sketched and designed the solution in portrait orientation. However, taking into account how the user will use the product and the distance they would be viewing the screen at, I changed it to a landscape orientation since more content can be read especially considering how large the text needs to be.
A Design Challenge
A challenge I had during design was identifying the right screen size for the interface. The user’s posture played a huge role in deciding the screen size. Since shoppers are carrying their SmartBasket either on the crook of their elbow on in their hand, the screen (and the text) must be big enough for easy readability, but small enough to not add significant weight.
Since there weren’t screen sizes that worked for what I needed, I created a custom screen size by starting with an iPhone 11 Max screen size, and then increased the width by 50% to allow for more information to be included. If you have any tips on sizing screens, please send me a note - I’d love to learn more about this!
SMARTBASKET DESIGN
Product Mockup
Legend:
Digital Display (Horizontal)
Barcode Scanner
Produce Scale
Counter-weight for added comfort
Expandable section for shopping flexibility (up to 3”)
Product Features
Barcode Scanner
With a built-in barcode scanner, shoppers can scan their grocery items as they shop, greatly reducing the checkout time since most of their checkout experience is occurring as they shop.
Built-In Scale
The scale helps shoppers weigh produce on the go, eliminating self-checkout bottlenecks from slow produce scanning and weighing. The scale also detects when an unscanned item is placed in the basket.
Information Transfer
To help accelerate checkout time, the shopping trip information transfers from the SmartBasket to the self-checkout kiosk. All the shopper would do from there is pay and go!
Product Experience
Before SmartBasket
Enter store and pick up a basket
Collect products in basket
Get a plastic produce bag and collect product
Line up in checkout line
Go to self-checkout when turn comes up
Scan products
Scan and weigh produce
Pack items in bags
Pay and leave
After SmartBasket
Enter store and pick up a SmartBasket
Optional: place reusable bag in SmartBasket and pack your items in your bags as you shop
Scan products and collect in SmartBasket
Scan produce and collect in SmartBasket
Line up in self-checkout line
Place SmartBasket on self-checkout kiosk
Pay and leave store
Try it yourself!
For optimal viewing experience, click the full screen icon in the top right corner > click “Options” in the top right corner > “Fit - Scale Down to Fit”.
Final Thoughts
This was my second Product Design, UX/UI project I’ve ever done and it was exciting! Not only was I still learning how to use Figma, it was also my very first crack at prototyping and I would say it went pretty well.
Not only did my technical skills get a workout, but so did my critical thinking skills; from trying to strike the right balance with the screen size to assessing the pros and cons of landscape versus portrait orientation.
Considering the environment was my biggest learning from the project. Keeping the user in mind - how they’re standing, how they’ll be using the product, the environment they will be using the product in - was a huge factor in designing my digital product and its ‘analog’ counterparts.