Ringtons Sales People App
Interaction Design Project
The Client
Ringtons is a UK-based tea and coffee company that has been in operation since 1907. One of the company's unique offerings is its door-to-door delivery service, which allows customers to have their tea and coffee delivered directly to their homes by a friendly and knowledgeable salesperson. The door-to-door service is a cherished part of Ringtons' heritage, with its distinctive horse-drawn vans and smartly dressed salespeople becoming an iconic image of the company.
The Ringtons door-to-door service operates in several regions throughout the UK, with a dedicated team of salespeople covering local neighbourhoods and communities. Those salespeople use a tablet that helps them to log their sales and save other customer information.
Our mission was to create a design for a smaller device that is better than the old one. I and a team of 2 junior interaction designers started off the project by mapping all the current flows and interactions on the tablet to get an understanding of their current patterns and ways of working.
After the initial review, which also included a heuristic evaluation, we started to create concepts to understand the core journey. This involved viewing current products on sales, previous and regularly purchased products, and preorders. The final step was to add the required products to the basket and check out. The following initial 3 concept flows were created, exploring completely different interactions and working methods.
The Problem
The Process
Those were then tested with salespeople during various face-to-face paper-prototype testing. We narrowed down the options from those findings and added new ones. After multiple rounds of testing the final concept was transformed into a digital prototype using Axure.
To be able to create a backlog for the Development Team with detailed User stories we created quick and easy prototypes using Axure to be able to test on a device size that was suggested and adjust the design quickly. The prototype below tested how the salesperson would add multiple items to a basket and whether they would be able to find the checkout screen.
After we were happy with the final design, we were able to create the initial UI. Due to internal rebrands we used a very basic UI that could be changed later in the project. The way final UI are documented includes a userflow with all elements displayed and a detailed UI underneath.
In order to make the development of the app as smooth as possible each component was separately documented in a component library file within Figma. There, each state of the components could be viewed, as well as details on spacing, interaction target area, elements within the component and placement on the screen.
