A technology and invention for retail, 2018 – 2019
Creating a frictionless experience for “retail and connected stores”
We’re all too familiar with the frustrating experience of going to a checkout today and hearing “Unexpected items in the bagging area”. This is not only frustrating for the customer, but also as the store owner, who is managing the fast forming queue and sorting the inventory which relies on manual laborious work.
IBM’s invention gives customers the fastest way to checkout and empowers retailers to manage the in-store experience and supply chain. The long-term vision of this is to reduce waste globally and empower more ethical consumerism worldwide.
We created an accelerator phase of testing in a Shell Holloway Road store in London, and then eventually a Shell Thorley in East England. We also implemented a test phase with a YO! sushi store at St Pauls in London.
The main challenge for this was to redesign the experience in a way which is utilizing the mental modals of how people pay for items today (oyster, tap and pay) and combining this with unfamiliar ways of checking out (just dropping on a kiosk table shelf to detect the items). We had to rigorously test the visual communication throughout – from animation, signage to UI, all of which was produced by myself with creative guidance from stakeholders.
Our main question for the first phase was :
Does the concept work with real users in a real retail environment?
Our second question in the next phase was :
How do we integrate the technology further, and make the design better for both the user and store owner?
My role and deliverables
I was responsible for the production of all visual assets on this project. I was involved from the infancy of the project, more often than not being the only creator of visual communication, from the prototype phase to a fully designed pilots launched in multiple stores (for Shell, and eventually YO! Sushi). I used feedback from senior directors, client and stakeholders to create a white label design language that applied across numerous deliverables that spanned UI design and animations for tablet and mobile, UX research and testing, motion editing for client pitches and retail environment design for the stores.
My involvement in the project process
UX and Service Design
- Guerilla testing
- Situational user testing
- UI design and animation for tablet and mobile
- Retail signage and environment design
- Print material for pitches and clients
- Video editing and motion graphics
- Mock ups and 3D prototypes
- Design reviews with developers
- Constant testing with users
Phase 1 :
Does the concept work at all with real users in a retail environment?
Testing on real users with a testing device in Shell Holloway North London Store
We had to ask questions that bought us right back to the basics of human and machine interaction – what makes a symbol recognisable? what are the first thing people see and notice when presented with new information? from initial guerilla testing our aims were clear. The signage, reader, and UI needed to communicate the same actions. They must also be made in a modular manner, so that it can be easy to switch out certain aspects quickly in order to run different tests based on new hypothesis’s.
We wanted to make the design flexible, memorable and easy to trust.
We were constrained on budget as it was still at a proof of concept stage. Hence creativity and accuracy was needed in order to make designs work with the boards and signage that was printed and cut in-house in the budget.
A white label approach was used, this meant a minimal colour pallete of black and white and a key colour depending on the brand. For shell the colours and key colour were tailored for Shell’s colour pallete. We were also testing varying levels of how the users responded to if something was more IBM branded vs Shell branded when approaching the kiosk.
Over a 100 users were interviewed in the Shell Holloway Road, store in North London, over the period of 3 weeks.
The video below illustrates the iterations from the very beginning of the project to near the end of this phase.
As part of a developement handover document I also created a style guide that dictated the several elements and how they were broken up. In the image below you can see a dark version, light version, and a version with colour for another brand such as a WHSmith.
“I was drawn to animation on screen so tapped phone there”
“Dyslexic and didn’t even read the text…I was tapping on the phone”
- Several versions of the signage board was tried to inform the user about how to use the technology. We at first had several “steps” illustrated above the kiosk, we found nobody read this and additionally removed everything else nobody seemed to read. Adding shorter labels helped the user identify what something was far quickly, such as “reader” was used as a label.
- We also stripped the animation from the phone completely in testing during tap phase which helped with the usability, this was a quick fix but we do think a simpler animation would work.
“It feels like magic”
- Users loved the idea and did find it very easy and quick overall
- Lights and voice when added to the design really improved the functionality dramatically, however we should also be focusing on getting it right without these
- For the next phase we wanted to revive the look and feel and even though inventory images were a barrier we wanted an option where the images were utilised dominantly as users favoured this (versus a version where there were no images)
- We wanted to introduce playfulness in the overall design and UI which was lacking as we tried to get positive functional tests
- I wanted to simplify the overuse of messaging and had an idea to keep all the messaging outside the screen and use the screen fully for the purpose of showing items. This would be the biggest change to visual communication.
Phase 2 :
Adding more features, and making the experience better for users and store owners
Below you can see sketches and brainstorming we did as a team to solve through some of the challenges. Which were then solidified into UX wireframes by the UX designer at the time.
Armed with new knowledge and an even greater support from Shell, we decided to go back to the drawing board. Our team did many design thinking sessions and were trying to solve the following problems.
- How do we make the user recognise items they might have picked up by mistake? many customers did not spot this in the test scenario
- How do we make the payment start process clearer? when the light and the voice were not present customers were still making incorrect actions
- We wanted to bring back the feeling of excitement in the design, many users also displayed an interest in features in our backlog
“If there is a larger number of items would want it categorised by type”
- Customers liked images, hence we wanted to get past this technical constraint and make versions where images were prominent
- How do we incorporate a bagging area for stores beyond just convenience stores?
I also felt that there was an overload of messages in the kiosk itself and wanted to strip to the fundamentals of each piece of medium
I worked to make concepts and we rapidly iterated ideas on it as a team.
I went to the beginning of identifying the core purpose of each medium. Using the screen for only detecting and displaying items, with all other messaging off screen. A sleeker design was possible and we were more confident in our approach having tested users already.
We wanted to apply the motion animation style of games and wanted to bring excitement to the design by applying a key colour to the white label version.
I started doing more image based layouts and animation tests to really enhance the visuals. I was pleased with the vertical layout and through concepting found it naturally allowed for the reader to be exposed, this layout which would have been a disadvantage in the text based layout before was proving well here.
There were a lot of new features to try out and I tried various examples of how the user can remove an item once they spot a mistake, how to verify age restricted items, and how the kiosk would look like if it had 1 item on the checkout verses 10 or 20.
We looked at different ways to communicate tapping the physical reader and tried to mimic how it might look in the physical space. We also wanted to convey the excitement often presented in gaming by adding moving elements such as flashing sparks. Here you can see two versions, the white label IBM version, and the Shell version with the animation tests I made.
Throughout the project signage was also tested with users, for the kiosk, POS and store environment (and also client conventions and marketing) in both Shell and white label designs. I was in charge of producing and getting vast amount of print material ready, working with Shell team more closely in Phase 2.
A selection of screens to display the various deliverables. UI design for Kiosk screen, mobile screens, media pack and kiosk design.
The invention was showcased globally and got coverage from BBC world, BBC click, The Evening Standard and various other media outlets.
We also got a chance to test out the product in a busy YO! Sushi store (as well as designing other concepts such as project mapped menus, interactive screens and ordering systems) for YO! Sushi.