CART OUT
UX/UI | MOBILE APPLICATION
CASE STUDY
Cart Out is a mobile application designed to streamline the grocery shopping experience by integrating real-time barcode scanning, digital cart management, and in-app checkout functionality. The application is intended to reduce inefficiencies associated with traditional grocery shopping, particularly long queue times and fragmented in-store navigation.
The concept was developed in response to the need for a more controlled and time-efficient shopping experience, where users can manage their entire journey—from product selection to payment—within a single digital system. By removing reliance on physical checkout processes, Cart Out repositions grocery shopping as a continuous, self-directed workflow supported by mobile interaction.
Toronto Film School (Academic Project)
Client:
Brand Identity
Logo Design
UX/UI Design
Mobile Application
Deliverables:
Solution
Cart Out introduces a mobile-first system that allows users to scan products in-store and track purchases in real time. Payments are completed directly through the app, removing the need for traditional checkout lines.
Additional features such as shopping lists, store maps, weekly flyers, and digital receipts support planning, navigation, and decision-making throughout the shopping journey.
Problem Statement
A young professional experiences inefficiencies during grocery shopping, primarily due to long checkout lines and time-consuming in-store navigation. These challenges result in frustration, increased time spent in-store, and reduced control over a routine task.
User Needs
The user requires a streamlined mobile solution that supports efficient grocery shopping from start to finish. This includes:
Managing and organizing shopping lists
Navigating stores more efficiently
Scanning items in real time
Completing checkout without physical queues
Solution
Cart Out introduces a mobile-first system that allows users to scan products in-store and track purchases in real time. Payments are completed directly through the app, removing the need for traditional checkout lines.
Additional features such as shopping lists, store maps, weekly flyers, and digital receipts support planning, navigation, and decision-making throughout the shopping journey.
Research & Discovery
Empathy Map & Persona
Empathy Map
The empathy map helped clarify user frustrations around time loss, inefficiency, and lack of control during grocery shopping, reinforcing the need for a faster and more streamlined checkout experience.
User Flow Map
User Flow Map
The end-to-end journey, from onboarding to checkout, was mapped to identify friction points and reduce unnecessary steps in the process.
User Testing
Testing revealed usability issues in navigation and scanning flow, which informed iterative refinements to improve clarity and task completion speed.
Seamless User Flow
The final user flow for Cart Out was designed to reduce friction and support efficient task completion across the shopping journey. Clear navigation patterns allow users to move from onboarding through to checkout in a structured and intuitive way.
U/I Foundations - Visual Identity
Logo Design
Colour Palette & Typography
Design Solutions
Core Screens
Cart Out’s core screens are designed to deliver a clean, intuitive experience throughout the in-store journey. The interface prioritizes clear navigation, strong visual hierarchy, and ease of use, enabling users to access key features and complete tasks with minimal friction.
Registration & Onboarding
The onboarding experience is designed with a low barrier to entry, using a simple step-by-step flow. This allows for quick account setup while enabling users to personalize key features such as payment methods and notifications.
Profile Screens
The profile section functions as a central hub for managing user preferences, including payment methods, favourite stores, notifications, and settings. By consolidating key information, it reduces friction and repetitive input, supporting a faster and more personalized shopping experience.
Shopping & Discovery Features
Shopping lists, weekly flyers, and store maps support pre-shopping planning and in-store decision-making. These features help users locate items more efficiently, reduce uncertainty, and improve overall task completion.
Barcode Scanning
The barcode scanning feature enables real-time item tracking and supports a self-checkout experience, reducing reliance on traditional checkout systems. A manual entry option is included to maintain usability when scanning fails.
Checkout Experience
The checkout flow is designed to be fast, frictionless, and fully mobile, allowing users to complete transactions without queueing. Smart notifications help ensure accuracy and reduce missed items, improving overall task completion.
Results & Impacts
The final design improved efficiency and usability across the grocery shopping experience by addressing key user pain points identified during research.
User testing showed faster task completion and reduced confusion throughout the journey. Overall, the solution increases user control, reduces friction, and creates a more streamlined shopping experience.
By combining in-app checkout with real-time barcode scanning, Cart Out reduces time spent in-store and simplifies the transition from selection to payment. Supporting features such as store maps and shopping lists further enhance navigation and organisation during shopping trips.
The final design improved efficiency and usability across the grocery shopping experience by addressing key user pain points identified during research.
User testing showed faster task completion and reduced confusion throughout the journey. Overall, the solution increases user control, reduces friction, and creates a more streamlined shopping experience.
By combining in-app checkout with real-time barcode scanning, Cart Out reduces time spent in-store and simplifies the transition from selection to payment. Supporting features such as store maps and shopping lists further enhance navigation and organisation during shopping trips.
