More projects

SmartShop – Scan, Bag & Go

"THE SMARTER WAY TO SHOP"

 

Role: Lead Product/Service Designer. Platforms: iOS, Android, Handset, Responsive Web, Checkouts.

The biggest frustration customers have when shopping in-store are the queues. SmartShop was born to help solve that problem by allowing customers to scan, pack and pay at a dedicated checkout. As a product designer I worked within the scrum team to help refine the vision, focus on the customer problem of 'avoiding the queues', increase retention and conversion, and roll out from 2 to over 200 stores (as of March '19).  The role was incredibly varied, doing full service design across the entire journey, from the apps, website and checkouts, to in-store marketing, signage and formats. What's more, customers who use SmartShop spend 18% more than those who do not.

Promo video: https://vimeo.com/143152220

Desktop HD Copy 43 (1)Desktop HD Copy 43 (1)
Smartshop-038 2Smartshop-038 2
Desktop HD Copy 103Desktop HD Copy 103
iphoneX-perspectiveiphoneX-perspective

My contribution to SmartShop

Desktop HD Copy 81 (1)Desktop HD Copy 81 (1)

Mapping the entire experience

The first thing I did when working on the project was to get a really in-depth understanding of the customer problem. I ran workshops with the team and our customers to create this experience map, which helped us understand what our customers wanted, and where there were opportunities to deliver value. This ranged from feedback on the digital interface, to the ergonomics of holding the handset while shopping, marketing comms around the store, colleague interactions and navigation to the checkout area.

There were also many additional services and colleague touchpoints that enabled the service to run smoothly, give stores an overview of how well SmartShop was performing (peak times, handset usage etc), and allow colleagues to assist customers in the best way possible. Therefore it was important for us to document all of these on a service blueprint.

GroupGroup
ArtboardArtboard

Looking at the bigger picture

As there were so many different customer and colleague touchpoints, it was important that we looked at the bigger picture. I created an adoption funnel so we could identify where in the journey we could deliver the most value, from adoption, to acquisition, monetisation or retention.

We ran a survey that indicated that a lot of our in-store customers still weren't aware of the service, so I worked with marketing to increase awareness in-store by creating cut through assets, take home leaflets, and social advertising.

Data also showed us that we weren't retaining our mobile customers particullary well after their first shop. The table below shows that only 30% of users are retained after their first shop, but they do then become sticky, so this was also something we wanted to research with our customers.

funnelfunnel

The 'a-ha' moment

To start driving organic growth, I wanted to get customers to the 'a-ha' moment as quickly as possible so that they would realise the benefit SmartShop offers. We intercepted users in-store to better understand where the 'a-ha' moment was, and quickly found that it happens when they breeze through the checkouts. Therefore, we removed as much friction from the users first shop as possible, such as account creation and re-scans, aiming to increase retention and word-of-mouth referrals.

retentionretention

Next... creating the vision

Something that would engage the wider team was creating a compelling customer focused vision and strategy. I carried out research with the team to help understand the future of in-store shopping, and asked customers what they wanted from SmartShop. We then created a lean canvas to capture all of the product requirements, and produced a series of storyboards to help convey our vision to other teams and stakeholders.

Desktop-HD-Copy-47 2Desktop-HD-Copy-47 2

And it was important for me and the team to understand what we're trying to achieve, our goals and KPIs, and also the purpose of each feature within the app, for example what's the goal of shopping lists? What are the metrics and risks? I mapped all of this data in to something that could be displayed on the wall and easily digested by all of the team.

Screen Shot 2018-07-23 at 8.23.24 AMScreen Shot 2018-07-23 at 8.23.24 AM

Early adopters

It was important for us to consider who our early adopters would be, what their primary needs were, and how we could leverage their insight and feedback as much as possible to refine the proposition before going to a wider audience. We found that these customers were typically busy mums, with iPhones, between 35-44, who shop with their children. We found that their primary need was speed of shop, just wanting to get in and out quickly, so these are the customers we targetted for our user testing, upcoming features and future marketing campaigns.

Screen Shot 2018-07-23 at 8.23.41 AMScreen Shot 2018-07-23 at 8.23.41 AM
Screen Shot 2018-07-23 at 8.24.56 AMScreen Shot 2018-07-23 at 8.24.56 AM

Rapid ideation

I carried out quant and qual research to see where we could optimise the experience, and then designed and validated many aspects of the SmartShop journey, from the iOS and Android apps, to the in-store handset, checkouts and the reporting dashboard. These varied from sketches when paired with a developer, to detailed flows and prototypes. Quite often we’d have a ‘design studio’ session where team members came together to help solve a customer problem, or we'd pair with developers to come up with a solution.

GroupA (1)GroupA (1)
Group (1)Group (1)

New User Experience (NUX)

With the mobile app live for a number of months, we noticed that our promising initial adoption levels had started to level off. More interestingly, we saw that a lot of users who downloaded the app, and started a shop, didn't actually scan any items at all. This was intriguing, so, we interviewed our customers to find out why this was. We discovered that they didn't know what to do next, and how to actually scan an item, especially loose items that you find at the start of your shop. Therefore, we introduced a 'Top tips' introduction screen for new users, and saw our acquisition rate increase dramatically.

iPhone-X-mockup-hover-seperatediPhone-X-mockup-hover-seperated

After making this small change, we could see the positive impact this had on getting customers to scan items, as shown by the funnel below. You'll see that now, over 90% of those who start a shop scan an item.

normal shop funnelnormal shop funnel

Accompanied shops

We carried out a range of testing with our customers, from accompanied shops around the store to online diary studies over a longer period of time to monitor how often they use SmartShop, why they did or didn't use it, and what could be improved.

Screen Shot 2018-07-23 at 8.08.03 AMScreen Shot 2018-07-23 at 8.08.03 AM
Screen Shot 2018-07-23 at 8.10.42 AMScreen Shot 2018-07-23 at 8.10.42 AM

Understanding our personas

Being Sainsbury’s, we have such a broad range of customers enter our stores, and that changes from region to region, store to store. We analysed customer data and studied our personas to help us understand thier borader needs when shopping, from being inspired to saving money and time. We used tools such as the UXI matrix to help us focus on persona needs, from converting more of a specific persona (early adopters) to broadening our reach to new demographics.

high_level_user_journeyshigh_level_user_journeys

Making the shopping list work harder

Customers told us that they found it frustrating having to keep jumping between the shopping list on their phone, and the items in their basket. These pieces of functionality were situated on different pages, so we ran a number of design studios to come up with alternate designs. One design that tested well was displaying the upcoming items in the users list within the basket itself so they didn't need to go back to their list to see what's next. We also built a prototype where items in the users list were automatically crossed off after being scanned.

iPhone-Xr-mockup (1)iPhone-Xr-mockup (1)

Service design

The part of SmartShop that I found the most interesting is how broad and varied the entire service is, from digital to physical, customer and colleague tools, both in-store and at home. It was important that we aligned any messaging across the entire experience, so I worked closely with our marketing and formats teams to refine and create various assets for our brand new, redesigned app!

SmartShop_Uxbridge_FB_Post-2SmartShop_Uxbridge_FB_Post-2
Screen Shot 2018-07-23 at 8.20.33 AMScreen Shot 2018-07-23 at 8.20.33 AM
Screen Shot 2018-07-23 at 8.20.45 AMScreen Shot 2018-07-23 at 8.20.45 AM

Hand-off from phone to till

One of the most complicated parts of the SmartShop journey was transferring your shop from your device, to the till. This was the 'moment of truth', where all of your hard work would pay off. We observed customers during this phase, noticing the confusion on their faces, not knowing which screen to look at or what buttons to press, and if it had even worked.

Therefore, we redesigned the till interface to offer more affordance of what to do, and what's currently happening. We A/B tested different concepts with customers in-store (we would stick our designs over the till screen and see what customers would do next, as it was impossible to iterate using our 3rd party till software). Through this, we found that using an animated GIF worked well in communicating what was happening to users, showing their items move from their phone, to the till.

SCO animationSCO animation
Hybrid_Checkout (2)Hybrid_Checkout (2)

Working with the format design team

This also involved working with the formats and store implementation teams to make sure the entire checkout area, beyond just the digital interface, was optimised for our customers. For example, making sure they have enough space for their trolley, that there's a place to return their handset and that they can easily find the QR code to scan.

Screen Shot 2018-07-23 at 8.27.13 AMScreen Shot 2018-07-23 at 8.27.13 AM
Screen Shot 2018-07-23 at 8.28.10 AMScreen Shot 2018-07-23 at 8.28.10 AM
Group (2)Group (2)

Colleague tools

I also had to create a range of tools for our colleagues to use in-store, allowing customers to have a seamless experience, but also stores to maintain a watchful eye over the service. We worked closely with store colleagues to understand their needs, ran codesign sessions, observed them in-store and tested various prototypes too. The tools we created included a 'Toolbox' dashboard, giving an overview of service performance, peak times, customer accounts and so on, and a 'rescan' app, allowing colleagues to carry out random security checks in-store. This was a tricky situation to design for, making sure colleagues understood exactly what they had to do and how many items they needed to scan.

Desktop HD Copy 103Desktop HD Copy 103

Next steps

We frequently visit store to speak to our customers and colleagues, gathering ever insightful data about the service and what our customers want. We iterate quickly, and log all of our customer feature requests and improvements on a 2x2 matrix in the office to help us identify where we can deliver the most value. We're currently looking at what will deliver the most value, to the most customers, as quickly as possible.

We also just released an amazing new feature in one of our stores; Mobile Pay! Customers in Clapham North can now scan their items and pay in the app using Apple Pay without even going to the checkouts! Read the story here.

20180723_11093920180723_110939

Building a habit forming product

Our next big challenge is to turn SmartShop into a habit forming product, something customers just open on their phone as they walk into store and simply cannot shop without. To do this, we'll be testing various different concepts, from Nectar rewards based on shop frequency and recipe suggestions, to gamifying the experience in a more creative way such as shopper leaderboards for customers who have shopped the most that month. Keep your eyes peeled for some of these tests going live over the coming months!

Simple-Mockup-Free-SceneSimple-Mockup-Free-Scene