Publix Grocery App & Website
Designing a seamless digital grocery experience for mobile & desktop
Role
UX/UI Designer
Tools
Figma, FigJam
Platform
iOS Mobile App + Responsive Web
Project Overview
The Challenge
Publix is beloved for its in-store shopping customer service. However, the existing digital ordering system lacked polish, resulting in a fragmented mobile and web experience that caused drop-offs during core browsing and checkout flows.
The Goal
Design a fully unified, intuitive shopping ecosystem. The goal was to build a simplified and visually consistent browsing experience, a smart shopping cart, and a transparent checkout flow across both native iOS and web platforms.
My Role
As the sole designer, I owned end-to-end UX/UI design. This included user research, persona creation, site mapping, wireframing, high-fidelity mockups, building the core design system components, and prototyping flows.
Research & Discovery
Stephanie Ramos
34 • Busy Working Mother
"I just want to stock my kitchen with quality fresh produce for my family without wasting hours in long checkout lines."
Goals
• Buy organic & fresh produce efficiently
• Easily reorder weekly family essentials
Frustrations
• Inability to easily verify produce weights online
• Cluttered checkout screen with hidden delivery fees
Key Research Findings
1. Navigation Confusion
72% of users surveyed found the categories page cluttered. They expected a quick way to filter between local fresh items and non-perishable goods.
2. Cart Weight Adjustments
Users were anxious about purchasing items sold 'by the pound' online. They requested intuitive increment tools directly inside the cart view to avoid overcharging.
3. Delivery Transparency
Surprise platform service fees displayed only on the final step resulted in an average cart abandonment rate of 35%. Clarity on pricing is a key trust driver.
User Journey Map
01 / Awareness
User Action
Discovers app promos
User Thought
"Can I get organic food fast?"
Emotion
02 / Browse
User Action
Searches for mangoes
User Thought
"Hope they look fresh today."
Emotion
03 / Select
User Action
Adds items to shopping cart
User Thought
"Let me adjust the lb weight."
Emotion
04 / Cart
User Action
Reviews cart totals
User Thought
"Are there any hidden fees?"
Emotion
05 / Checkout
User Action
Pays using Apple Pay
User Thought
"Simple and secure process."
Emotion
06 / Delivery
User Action
Receives fresh goods
User Thought
"These mangoes are beautiful!"
Emotion
Information Architecture
Publix Home
Browse / Categories
Fruits & Vegetables
Dry Goods & Bakery
Weekly Promos
Product Detail
Weight Customizer
Reviews & Stars
Local Farms Info
My Shopping Cart
Quantity Switcher
Item Removal
Subtotal Calculator
Favorites
Quick Add to Cart
Saved Lists
Account / Profile
Orders History
Delivery Addresses
Payment Methods
User Flow
Login Screen
Browse Products
View Product Detail
Add To Cart
View Cart
Checkout
Order Success
Low-Fidelity Wireframes
iOS Mobile App Wireframes - Add To Cart Flow
Desktop Wireframes - Add To Cart Flow
High-Fidelity Designs
Publix
Browse
Favorites
Weekly Deals
Recipes
Search
Favorites
5
Stephanie
WEEKLY HIGHLIGHT
Fresh summer produce up to 30% off
Stock up on organic mangoes, ripe bananas, sweet oranges and delicious grapefruit today.
Shop Fresh Produce
Popular Fruits & Produce
Fruits
Vegetables
Dry Goods
Bakery
Fresh Jubilee Mango
$4.00 / lb
Add to Cart
Organic Cavendish Bananas
$0.69 / lb
Add to Cart
Fresh Organic Grapefruit
$2.00 / lb
Add to Cart
Sweet Florida Oranges
$2.00 / lb
Add to Cart
Organic Green Broccoli
$2.00 / lb
Add to Cart
Fresh Gold Pineapple
$4.00 / lb
Add to Cart
Organic Kiwi Pack
$1.25 / ea
Add to Cart
Lay's Classic Family Pack
$5.99 / ea
Add to Cart
Publix
Organic, locally-sourced fresh groceries delivered straight to your doorstep. Experience next-level grocery shopping.
Company
About Us
Careers
Press
Support
Help Center
Safety Information
Cancellation Options
Legal
Privacy Policy
Terms of Service
Cookie Settings
© 2026 Publix Inc. All rights reserved.
5678 NW 50th ave, NY 22350, United States
Publix
Browse
Favorites
Weekly Deals
Recipes
Search
Favorites
5
Stephanie
Order Confirmed!
Thank you for shopping with us, Stephanie. Your order #FC-98246 has been placed successfully and is being prepared.
Fulfillment Mode
Standard Delivery
Estimated Arrival
Today, 5:00 PM - 6:00 PM
Delivery Address
1234 SW 22nd Lane, NY 22350
Continue Shopping
Publix
Organic, locally-sourced fresh groceries delivered straight to your doorstep. Experience next-level grocery shopping.
Company
About Us
Careers
Press
Support
Help Center
Safety Information
Cancellation Options
Legal
Privacy Policy
Terms of Service
Cookie Settings
© 2026 Publix Inc. All rights reserved.
5678 NW 50th ave, NY 22350, United States
Mobile Native iOS Experience
Design System Specifications
Color Tokens & Radii
Publix Green
#377E22
Green Dark
#1B5E0C
Orange Accent
#FF6B35
Charcoal Dark
#2D2D2D
Light Surface
#F5F5F5
Pure White
#FFFFFF
Small
4px
Medium
8px
Large
12px
Full Pill
999px
Typography Scale & Components
Heading 1 (Hero)
40px • Bold • Weight 800
Heading 2 (Section)
24px • Bold • Weight 800
Body Copy
16px • Regular • Weight 400
Interactive Components
Primary Green Button
Secondary Outlined
Reflection & Next Steps
What I Learned
Omnichannel experiences require absolute consistency. Designing for mobile and web simultaneously taught me the value of responsive layouts and maintaining high brand continuity.
What I'd Do Differently
Given more time, I would expand my user testing pool to include elderly supermarket shoppers. This would help me gather direct usability feedback regarding text sizes and voice input controls.
Next Steps
The next steps involve handing the Figma component spec files off to the development team, tracking performance metrics after deployment, and introducing a loyalty rewards module.
