ScreenVend is a new technology in store, opening a new world in retail dynamics where customers can browse and shop as they would online. This smarter way of retailing offers a new delivery way through a bespoke robotic system. In fact, shops needs less space for physical shelves. ScreenVend enhances customer experience by reinventing a new and easy way to buy products. It allows limitless cross selling and up-selling opportunities on screen.
Screenvend Offers instant fulfilment of purchase and product emerges from a chute next to screens in seconds. it gives the option to pay using card terminal, or print QR code and pay at self-services checkouts. Screenvend allows retailers and brands to enable digital retail strategies through omni-channel platforms and instore instant micro fulfilment through the use of robotics.
My role at ScreenVend was to offer a smooth customer experience both for the front end of the product and the back end administration solution. I started by gathering multiple examples of kiosk interfaces and analysing them. I also observed customers interacting with large touch screens in popular retail outlets such as Mc Donald’s, and I highlighted the pain points and the best practices that can be emulated for our ScreenVend. I started by conducting my research, gathered multiple examples of kiosks interfaces. I have also analysed the users behaviours and the different human heights, positions and postures toward the large screen. I have also observed people using the Mc Donald’s self service touch screen and highlighted the pain points and the good parts that can be reused for our ScreenVend interface. After making a plan and making my sketches, I started to digitalise my wireframes and that helped me and the team to understand the main full flow and iterate the flow easily. Once we agreed on the features and the style, I was asked to customise the same generic flow to a different brands interfaces for demo purposes. I also got involved in designing back-office system interfaces for web and EPOS.
Identifying competitor apps and evaluating them is the first step to understand how best the competitors are approaching the solution, identify best practices, and areas of improvements. On horizontal screen (DUFRY), the main navigation bar is consistent on the right-hand side throughout the customer journey. The system interacts with the user through a chatbot with text and voice commands. The control bar and the search bar are also consistent but in the bottom part of the interface.
On Vertical screens (McDonald’s), the interface is reached at extended arm's length. The user has the flexibility to move very close or step back to look at the screen. We can also see that the header is used to display some advertisement. The menu bar (a carousel style) is persistent on the left side to accomodate the top level categories. The bottom part is used as a shopping basket, it contains the buttons and it is consistent throughout the journey. The wheelchair option is always available in any screen to shrink the interface down and make it more accessible. The interface acts like a human using a friendly dialogue with the user (Example: Where will you be eating today.., Enjoy your meal etc…).
.
After deep observation of real users on site, I gained a robust understanding of practices and behaviours. In fact, multiple scenarios and use-cases must be considered. I found out that some people won’t have big issues if they are ordering 1 item at once because it just flows through. I noticed that the problem arises when they wanted to order multiple items and sometimes finding it hard to go back to the previous step which was what we were facing when ordering. Some people still chose “Pay at counter” option but in the end they need to line up to wait for the cashier to arrive (yes, the cashier wasn’t even there to wait for you to come and pay).
Customer Empathy map helped me to make better design decisions. It shows the users goals, what they think, do, feel and say. In fact what people say isn't always what they do. This graph allowed me to empathise further with the user and get a better understanding of the users contextual behaviour and thinking.
What to consider when designing for a large touch screen?
After having been inspired by customer challenges, needs and problems through gathering data and insights, brainstorming was the next step to generate as many ideas as possible. The main task of these sessions was to think about potentials Design solutions.
Information Architecture is one of the most important step before sketching any screen. It determines where the content lives and how the flow is structured. An example of Information Architecture I have been working on for ordering a car on Tesla app on large screen.
Getting the interface right was a big challenge for me in terms of layout. Because sometimes it is hard to make a decision and people often feel confused and overwhelmed, I placed the main controls to the right, and the departments in a vertical swappable way in the right side. These elements are place in the easy reach area of the screen. All the departments, in other hand were placed in the center to allow a quick decision.
Providing a visual understanding of the screens early in the project was crucial to get the team approval before the creative phase gets under way.
After wire-framing my screens, I used them as a blue print to design my high fidelity prototype.
Running a multiple usability tests at different stages of the process was crucial to test or improve some features at later stage.