Menu

SmartCart

Cutting-edge contactless shopping tech made friendly through clever UX
SmartCart – Cutting-edge contactless shopping tech made friendly through clever UX // Benek
Date
2019
Client
Imagr
Responsibilities
  • Art Direction
  • Product Development
  • Branding & Identity
  • UX Design
  • Mobile App Design
  • Interaction Design
Product Owner
Stephanie O'Brien
Illustrations
Latham Arnott
App Development
Imagr

Imagr's technology is an ambitious retail shopping solution aiming to turn any supermarket into an automated, no-queue, one-click checkout experience. They’ve recently raised NZ$14M in Series A funding led by Toshiba TEC. Using advanced camera imaging inside the cart, IA and machine learning, Imagr's SmartCart detects every product added or removed from the trolly and keeps its companion mobile app synced with a digital cart list.

The technology is world-class, but their app’s user experience was lacking. They engaged me to lead a ground-up UX design process to deliver the top-notch mobile app experience their tech deserves.

Stephanie O'Brien - Product Owner @ Imagr

"Benek’s high standards of professionalism and organisation put him a cut above his competition. The level of attention to detail he displayed in taking the time to thoroughly understand our product’s landscape and user’s experience was reassuring."

Stephanie O'Brien - Product Owner @ Imagr

SmartCart – Cutting-edge contactless shopping tech made friendly through clever UX // Benek

Every path, not just happy path

I started off our design process with a collaborative group workshop to define the short and long-term goals of SmartCart, and how the mobile app fits into the customer experience. We explored not only the ideal “happy path” experience – all the way from pairing with cart to checking out – but also what happens when things go wrong. Some challenges we faced included:

  • How do we make using complex and unfamiliar new technology feel friendly and intuitive?
  • How might we teach people to use this new experience in a delightful way?
  • How can we make fallbacks and failure states as seamless and enjoyable as the happy path?
  • How might we leverage new mobile technology to make traditional user pain points quicker and easier?
SmartCart – Cutting-edge contactless shopping tech made friendly through clever UX // Benek

Pushing new tech

Through info architecture, comprehensive users flows, and low-fi wireframe prototypes, we outlined a user experience that made a complex process feel simple. I advocated use of the latest technology to give the app experience the same magical quality that the hardware and software create. NFC tags instead of QR codes for tap and go phone+cart pairing, passwordless sign up and login with SMS codes instead of emails for authentication, and credit card scanning to replace payment info data entry. 

The result is an experience that’s not overly demanding on first-time shoppers and nearly effortless for repeat users.

SmartCart – Cutting-edge contactless shopping tech made friendly through clever UX // Benek
SmartCart – Cutting-edge contactless shopping tech made friendly through clever UX // Benek
Stephanie O'Brien - Product Owner @ Imagr

"I was continuously impressed and thankful for his work ethic. Benek drove the project from the outside by challenging our original thinking and driving us to pursue customised animations to push our application’s interface to the next level."

Stephanie O'Brien - Product Owner @ Imagr

Branding & art direction

Imagr's goal was to feel calm and friendly, easy and supportive, innovative and secure. I led their team through a SmartCart branding process resulting in a logo, colour scheme, font pairing, and imagery guidelines that would put their best foot forward no matter the context: in-app, in-store, or on product.

These brand goals guided our visual design language, type and colour use, custom icon style (thanks Matt Skiles for the product category icon set), and in-app imagery. The result is an effortless clean design system – a touch a fun balanced with trusted seriousness.

SmartCart – Cutting-edge contactless shopping tech made friendly through clever UX // Benek

How-to, built-in

Visuals also played an important role in the app’s need to educate. We decided on illustrations over live-action videos for this purpose, but were challenged by the constraints of a cart form-factor that was due to change. We had to keep depictions abstract yet highly informative, and also work for a multi-lingual environment.

I supplied art direction and concepting to the very talented Latham Arnott who created a series of illustrations and animations that introduce people to the SmartCart concepts and guide them along the way.

We also found ways to integrate help FAQ content contextually where it was needed so we could alleviate user concerns without forcing them to hunt down answers.

SmartCart – Cutting-edge contactless shopping tech made friendly through clever UX // Benek

Imagr’s young and growing team was a pleasure to work with and I wish them huge success as they expand internationally over the coming years. SmartCart is currently being trialled in Japan and New Zealand.

More Work