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 Problem
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.
The Process
Inital Discovery
Firstly, we had to understand the current product. To do this, we conducted a quick heuristic evaluation and mapped out all the relevant journeys for the product. Finally, we were able to join a driver on this daily drive to understand their environment and how they use the current product.
We then worked with the user researchers to understand the main pain points of the users, including their thoughts and feelings, as well as the data displayed on the screen. We also created a user story map to get an understanding of what features and elements are needed on the page for each journey.
We were then ready to develop concepts to better understand the core user journey. The page included features such as products currently on sale, previously and frequently purchased items, and pre-orders. The final step in the journey involved adding the required products to the basket and completing the checkout process.
To explore as many ideas as possible, we initially worked individually using pen and paper. This allowed us to experiment with different interaction patterns and potential information architecture approaches. We also focused on specific elements such as basket placement, product discovery and selection, as well as payment layout and available payment methods.
Afterward, we regrouped to review our ideas and narrowed down the options. By consolidating and refining the strongest concepts, we streamlined the solutions to make them easier to prototype and test.
Concept testing
We created three initial concept flows, each exploring different interaction patterns and approaches.
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.
Finalisation of UI
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.
