UX/UI - MOBILE APP DESIGN
CART OUT
A proposal was required for a mobile application that would aid users in their daily lives. The proposal needed to include all UX/UI design steps, as well establish a brand identity for the proposed mobile app.
Cart Out is a mobile application that functions in conjunction with the user’s grocery store visit that revolutionizes the user’s shopping experience. The app provides an innovative solution that enables customers to scan their products and make a payment through their smartphones without having to line up at the grocery store check-out lines.
Branding Identity Design
Logo Design
UX/UI Design
Mobile Application Design
Deliverables:
Toronto Film School - Academic Project
Client:
User Needs
The user requires a tailored mobile solution that supports efficient grocery shopping from start to finish. This includes the ability to create and manage shopping lists, navigate stores using layout maps, and scan items as they are added to the cart. Enabling in-app checkout allows the user to bypass long lines, saving time and providing greater control over their shopping experience.
Problem Statement
A young professional experiences inefficiencies during grocery shopping, primarily due to long checkout lines and time-consuming in-store navigation. These challenges lead to increased frustration, extended shopping times, and a lack of control over an otherwise routine task.
User Needs
The user requires a tailored mobile solution that supports efficient grocery shopping from start to finish. This includes the ability to create and manage shopping lists, navigate stores using
layout maps, and scan items as they are added to the cart. Enabling in-app checkout allows the user to bypass long lines, saving time and providing greater control over their shopping experience.
Proposed Solution
Introduce a comprehensive mobile application designed to streamline the grocery shopping experience across stores.
The app leverages barcode scanning technology to allow users to scan items in real time and complete purchases directly through their smartphones, eliminating the need for traditional checkout lines.
Additional features—such as shopping lists, weekly flyer browsing, store maps, and digital receipts—enhance convenience, support in-store decision-making, and improve overall efficiency.
Proposed Solution
Introduce a comprehensive mobile application designed to streamline the grocery shopping experience across stores.
The app leverages barcode scanning technology to allow users to scan items in real time and complete purchases directly through their
smartphones, eliminating the need for traditional checkout lines.
Additional features—such as shopping lists, weekly flyer browsing, store maps, and digital receipts—enhance convenience, support in-store decision-making, and improve overall efficiency.
Research & Discovery
Empathy Map
An empathy map was developed to better understand the user’s behaviors, needs, and pain points.
Key insights included:
Thinks/Feels: Frustrated by wasted time and inefficiency
Says/Does: Wants to “get in and out quickly”
Pain Points: Long checkout lines, difficulty locating items
Needs: Speed, convenience, and control
User Flow Map - was mapped to visualize the end-to-end journey, from app entry to checkout completion. This helped identify friction points and opportunities to:
Reduce unnecessary steps
Simplify navigation
Improve task completion speed
User Testing
User testing further validated and refined the experience, uncovering usability issues and improving the overall user journey. Insights from testing informed iterative updates, resulting in a more intuitive and efficient flow.
Seamless User Flow
The final user flow for Cart Out was optimized to minimize cognitive load and streamline task completion.
Clear navigation patterns and logical pathways allow users to move efficiently through the app—from onboarding to checkout—without confusion.
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, and visually engaging experience throughout the in-store journey. The interface prioritizes clear navigation, strong visual hierarchy, and ease of use, enabling users to quickly access key features and complete tasks with minimal friction.
Registration & Onboarding
The onboarding experience was designed with a low barrier to entry, using a simple, step-by-step process. This supports quick account setup while allowing users to personalize key features such as payment methods and notifications.
Profile Screens
The profile section acts as a central hub for managing user preferences such as payment methods, favourite stores, and notifications. By consolidating key information in one place, it reduces friction and repetitive input, enabling a faster and more personalized in-store experience. Key areas include: Account details, Payment methods, Notifications, Favourite stores, Settings, & Help
Shopping & Discovery Features
Features such as shopping lists, weekly flyers, and store maps were designed to support pre-shopping planning and in-store decision-making. These tools help users locate items faster, reduce uncertainty, and improve overall efficiency.
Barcode Scanning
The barcode scanning feature enables real-time item tracking and self-checkout functionality, reducing reliance on traditional checkout systems. Error prevention is supported through a manual entry option, ensuring usability even when scanning fails.
Checkout Experience
The checkout flow was designed to be fast, frictionless, and fully mobile, allowing users to complete transactions without waiting in line. Smart notifications help prevent missed items, improving task completion and reducing the need for repeat visits.
Results & Impacts
The final design significantly improved the efficiency and usability of the grocery shopping experience by addressing key user pain points identified during research.
User testing indicated improved ease of use, with participants able to complete core tasks more quickly and with less confusion. Overall, the solution enhances user control, reduces friction, and creates a faster, more convenient shopping experience.
By enabling in-app checkout and real-time barcode scanning, the solution reduces time spent waiting in checkout lines and streamlines the overall shopping journey. Features such as store maps and shopping lists improve in-store navigation and task completion, helping users locate items faster and stay organized throughout their trip.