For this exercise you will design the interactive touchscreen interface for a self-serve store or restaurant checkout.
Identify any local shops and restaurants that have SCOs, visit these shops and see what you can find out about the terminals used. Explore the visual design as well as the function. What does each screen look like? How easy is it to navigate? What happens when there is an error or store personnel needs to be called to help?
Based on the research, identify the problems that you might be able to solve with better design. Then explore a number of possible solutions.
Mind-mapping

Research
Features of a good SCO interface
A good Self-Checkout (SCO) interface should balance speed, clarity, accessibility, and error recovery. As these systems are often used by a wide range of people in busy environments, a well-designed SCO interface needs to guide users through tasks smoothly and with minimal friction. Below are the key features of an effective SCO interface, supported by relevant academic and professional sources.
1. Clear and Consistent Navigation
Users should always know where they are in the process. A good interface includes clear progress indicators (e.g. Scan → Bag → Pay → Receipt) and consistent layout and terminology across screens. This helps reduce cognitive load and prevents user confusion (Nielsen, 1995).
2. Accessibility Features
SCO interfaces should support users with visual, motor, or cognitive impairments. Features like text-to-speech, adjustable font sizes, high-contrast modes, and tactile feedback are essential. According to the Web Content Accessibility Guidelines (WCAG), ensuring at least a 4.5:1 contrast ratio and offering keyboard/touch navigation alternatives are crucial for inclusive design (W3C, 2018).
3. Large, Readable Touch Targets
Buttons and interactive elements must be large enough for users to tap accurately, ideally around 9–12mm in size. This helps reduce user error and improves speed, especially for those with limited dexterity (Norman, 2013).
4. Simple and Familiar Language
Text should be easy to understand, avoiding technical jargon. Using familiar phrases like “Place item in bag” or “Insert card” ensures users don’t get lost in complex instructions (Krug, 2014).
5. Effective Error Handling and Recovery
Good interfaces provide helpful feedback when something goes wrong, such as “Unexpected item in the bagging area.” Importantly, they should offer clear options to resolve the issue, like a visible “Call for help” button. Unclear or generic error messages can increase frustration and slow down the checkout process (Dix et al., 2004).
6. Fast and Responsive Performance
Interfaces should be fast to respond to touch inputs and display changes immediately. Delays can frustrate users and slow down queues. Real-time feedback (visual or audio) helps reassure users that their input has been registered (Rogers, Sharp & Preece, 2011).
7. Multilingual Support
In multicultural environments, providing language options at the very beginning of the process ensures that non-native speakers can navigate the interface with confidence (Tidwell, 2020).
8. Brand Alignment with Functional Simplicity
While aesthetics matter, the interface should never sacrifice usability for appearance. A design that reflects brand identity, such as colour schemes or tone, can build trust, as long as it doesn’t overwhelm or confuse the user (Cooper et al., 2014).
Local shops and restaurants
1. Sainsbury’s Water Lane
Interface: Standard Sainsbury SCO: flat colour scheme, small on‑screen buttons, limited contrast. Flow: Scan → Bag → Pay → Receipt. Pain points: Small targets make it hard for users with motor/Dexterity issues. Error screens show terse messages “Unexpected item in bagging area” with no clear help instructions. Staff nearby but “Get assistance” button is subtle and not spoken aloud.



2. Waitrose (The Hart)
Inference from role description: Staff help customers with SCO systems: indicates their presence. Likely issues: Similar to other mid‑range supermarkets, accessibility features are minimal (e.g., no text-to-speech, height-adjustable screens).



3. McDonald’s
Interface: Large icons, rich visuals for meal customisation. Flow: Select meal→ customise → upsell prompts → review → pay. Pain points: Touch sensitivity varies, causing mis-taps. Users report laggy animation, confusing upsells, and lack of explicit cash-payment support. Error recovery isn’t friendly, e.g. failed payment shows “Transaction not completed” with only back/exit options.

Key UX & Accessibility Issues Identified
Tiny touch targets & poor contrast; difficult for users with vision or dexterity impairments. Sparse error messaging; vague phrasing, no next-step guidance, unclear path to help. Hidden accessibility and language options, buried in menus, not available upfront. No audible guidance; those with visual impairments or literacy challenges struggle. Uncertain payment options, cash or card choice isn’t clear; some users unsure if cash is accepted.
Design Recommendations
To make these self-checkout systems easier and more inclusive for everyone, a few simple design changes could make a big difference. First, the screen should start with a friendly welcome and clear buttons for choosing a language, turning on accessibility features, or just getting started. If someone needs extra help, an accessibility mode could switch on things like bigger text, high-contrast colour, voice instructions, or even the option to speak instead of touch. The whole process should be broken down into easy steps, like Scan, Bag, Pay, and Receipt, with a progress bar to show where you are. If something goes wrong, the error messages should be clear, helpful, and easy to understand, with both text and sound, plus a big, easy-to-find button to call for help. When it’s time to pay, the screen should clearly show all the payment options, like card, cash, or contactless, and guide you to a staff checkout if needed. These changes would make the experience smoother and less stressful for everyone, especially those who might find the current systems confusing or hard to use.
Proposed screen flow

I chose Waitrose for my self-checkout (SCO) redesign because it’s known for being a high-quality supermarket that cares about customer experience. However, during my visits to the store, I noticed that their self-checkout system felt a bit outdated. While the design matches their clean and simple brand style, the interface lacked important features like clear navigation, helpful feedback, and accessibility options. This can make things harder for first-time users, older customers, or anyone with visual or mobility challenges. By focusing on Waitrose, I saw a great opportunity to improve an already trusted shopping experience by making it easier, more inclusive and more user-friendly for everyone.
Sketches

Colour palette

Typeface
I chose Roboto as the typeface for my self-checkout (SCO) interface redesign because it’s modern, highly legible and designed specifically for digital screens. Its clean, geometric structure makes text easy to read at various sizes, which is essential for users who may be standing at a distance or using the interface in a busy environment. Roboto also has a friendly, neutral tone that fits well with Waitrose’s calm and professional brand identity. It supports a wide range of weights and styles, allowing for clear visual hierarchy and consistency throughout the interface. Most importantly, it’s accessible and screen-optimised ensuring that all users, including those with visual impairments can navigate the system with ease.
Design process

Final designs






Mock-up

Self-reflection
Working on the redesign of Waitrose’s self-checkout interface was an interesting experience. For this exercise, I knew I wanted to focus on making the system more accessible, clearer to use, and friendly for a wide range of people, whether that’s older customers, first-time users or anyone with different abilities. I also wanted to keep the look and feel true to the Waitrose brand, while making the whole experience more inclusive and intuitive.
Looking at my final designs, I feel like I’ve created a visual language that’s clean, consistent, and easy to follow. I chose Roboto as the typeface because it’s modern and super readable, which really helps with accessibility. I paired it with calming green tones to reflect Waitrose’s trusted and natural vibe.
I made sure the journey through the interface is broken down into simple, logical steps: starting with a welcoming screen, followed by options for accessibility, language, scanning, payment and error messages. I also kept the layout clean, with clear spacing and simple icons so it doesn’t feel cluttered or overwhelming.
If I were to keep developing this, I’d want to explore how the interface could adapt to individual needs more dynamically for example, offering voice input or scaling text automatically based on user settings. I’d also love to test it with real users, especially those who face accessibility challenges, to learn more about what works well and what could be improved.
Overall, this project really taught me that good design isn’t just about how something looks, it’s about how it works for real people. It made me think more deeply about everyday usability and how small design decisions can have a big impact on someone’s experience.
References
- Cooper, A., Reimann, R., Cronin, D., Noessel, C. & Csizmadi, J., 2014. About Face: The Essentials of Interaction Design. 4th ed. Wiley. Available at: https://www.wiley.com/en-gb About+Face%3A+The+Essentials+of+Interaction+Design%2C+4th+Edition-p-9781118766576 (Accessed: 21 June 2025)
- Dix, A., Finlay, J., Abowd, G.D. & Beale, R., 2004. Human-Computer Interaction. 3rd ed. Pearson Education.
Available at: https://www.pearson.com/en-gb/subject-catalog/p/human-computer-interaction/P200000002294 (Accessed: 21 June 2025) - Krug, S., 2014. Don’t Make Me Think, Revisited: A Common Sense Approach to Web Usability. 3rd ed. New Riders.
Available at: https://www.peachpit.com/store/dont-make-me-think-revisited-a-common-sense-approach-9780321965516 (Accessed: 21 June 2025) - Nielsen, J., 1995. 10 Usability Heuristics for User Interface Design. Nielsen Norman Group. Available at: https://www.nngroup.com/articles/ten-usability-heuristics/ (Accessed: 21 June 2025)
- Norman, D.A., 2013. The Design of Everyday Things. Revised and expanded ed. Basic Books. Available at: https: http://www.basicbooks.com/titles/don-norman/the-design-of-everyday-things/9780465050659/ (Accessed: 21 June 2025)
- Rogers, Y., Sharp, H. & Preece, J., 2011. Interaction Design: Beyond Human-Computer Interaction. 3rd ed. Wiley. Available at: https://www.wiley.com/en-gb Interaction+Design%3A+Beyond+Human+Computer+Interaction%2C+3rd+Edition-p-9780470665763 (Accessed: 21 June 2025)
- Shroff, J., 2021. ITSU self-checkout UI/UX case study. Available at: https://janineshroff.co.uk/portfolio/itsu-self-checkout-ui-ux-case-study/ (Accessed: 21 June 2025)
- Tidwell, J., 2020. Designing Interfaces. 3rd ed. O’Reilly Media.
Available at: https://www.oreilly.com/library/view/designing-interfaces-3rd/9781492051954/ (Accessed: 21 June 2025) - World Wide Web Consortium (W3C), 2018. Web Content Accessibility Guidelines (WCAG) 2.1. Available at: https://www.w3.org/TR/WCAG21/ (Accessed: 21 June 2025)
































