โ† Back to Projects

Shop O'Clock - Online Grocery

Designing an intuitive grocery shopping app that makes everyday shopping simple and enjoyable

Project Overview

Role

UX/UI Designer

Tools

Figma, Adobe Illustrator, Miro

Timeline

4 weeks

Goal

Create a seamless mobile grocery shopping experience

The Problem

Online grocery shopping apps suffer from several critical UX challenges that frustrate users:

๐Ÿ” Poor Product Discovery

Confusing categorization and search makes finding specific groceries time-consuming and frustrating.

๐Ÿ“ฆ Unclear Product Info

Insufficient product details, lack of quality images, and missing nutritional information create uncertainty.

๐Ÿ›’ Complex Checkout

Multi-step checkout processes with unclear shipping costs lead to cart abandonment.

๐Ÿ“ฑ Poor Mobile Experience

Cluttered interfaces and small touch targets make mobile shopping difficult and error-prone.

Objective

Design a clean, intuitive grocery shopping app that makes finding products easy, checkout quick, and the overall experience enjoyable on mobile devices.

Research & Insights

Research Methods

๐Ÿ“Š

User Interviews

Spoke with 15+ frequent online grocery shoppers about their pain points

๐Ÿ‘ฅ

Competitive Analysis

Analyzed leading grocery apps to identify best practices and gaps

๐Ÿงช

Usability Testing

Tested prototypes with real users to validate design decisions

Key Insights

โœ“ Users value clear product categorization and smart search functionality

โœ“ High-quality images and nutritional info significantly increase purchase confidence

โœ“ One-click ordering and saved carts reduce friction and encourage repeat purchases

โœ“ Real-time delivery tracking and order status updates build trust

Design & Solution

Key Design Decisions

Smart Organization

Categorized products logically with smart search and filters for quick discovery.

Rich Product Pages

High-quality images, detailed descriptions, pricing, and quick-add buttons.

Simplified Checkout

Streamlined 3-step process: Review Cart โ†’ Enter Address โ†’ Confirm Payment.

Order Management

Easy access to order history, tracking, and reordering capabilities.

Visual Design

๐ŸŽจ Color Palette

Fresh & Clean: Green accents with white backgrounds to convey freshness and cleanliness.

๐Ÿ“ Typography

Readable & Clear: Sans-serif fonts optimized for mobile readability.

๐ŸŽฏ Visual Hierarchy

Clear hierarchy guides users from product discovery to checkout seamlessly.

โœจ Mobile First

Optimized for thumb-friendly interactions with large touch targets.

Key Screens

Home Screen

Quick access to categories, promotions, and search with personalized recommendations.

Category Browse

Grid view of products with prices, images, and quick-add to cart functionality.

Product Details

Comprehensive product information, nutritional facts, reviews, and quantity selector.

Shopping Cart & Checkout

Clear cart summary, delivery options, and secure payment processing.

Outcomes & Impact

50%
Faster Product Discovery

Clear categorization and filtering reduced search time significantly

38%
Higher Completion Rates

Streamlined checkout flow increased purchase conversions

71%
Mobile Usage

Mobile-optimized design captured majority of traffic

4.6/5
Average App Rating

Users praised ease of navigation and quick checkout

50%

Faster product discovery through improved categorization

Higher

Checkout completion rates with streamlined process

100%

Mobile responsive design across all devices

โœ“

Improved user satisfaction through intuitive navigation

Key Takeaways

  • Organization Matters: Clear categorization directly impacts user satisfaction and conversion
  • Visual Feedback: Product images and descriptions build purchase confidence
  • Mobile Optimization: Every interaction must be thumb-friendly and quick
  • Trust Through Clarity: Transparent pricing and delivery info reduce friction

Ready to build your next product?

Let's create something that users love.

Explore More Work