Wegmans
Wegmans is an American supermarket chain known for offering high-quality groceries, fresh produce, and prepared foods.
My Role
UI Designer
Team
Solo Project
Duration
9 weeks
Tools
Figma
Wegmans
Focusing on customer service and health-conscious options, Wegmans provides a top-tier shopping experience with the digital platform
Problem
The website's disorganized visuals, limited filtering, and lack of Favorites and Cart customization create a confusing and unsatisfactory shopping experience.
Solution
The redesigned website introduces an accessible filter, consistent visuals with a clear hierarchy, and an organized Cart to streamline the shopping and checkout experience.
Taskflow
Low Fidelity Wireframe
UI Design
Citrus Garden
Inspired by the vibrant and inviting ambiance, the new design radiates warmth and growth in the shop and celebrates the diversity and freshness of Wegmans.
Light Mode
Category Page
Designed a hero image to elaborate brand style and added design elements to provide a visual aesthetic.
Mobile
Search and Filter
A unified filter with various options and sorting allows the users to find the products efficiently.
Light Mode
Product Detail Page
Organized layout to improve visual hierarchy and visualized simplified Nutrition Facts for user readability and
Mobile
Product Detail Page
The users can add photos and rate the taste, value, and quality of purchased products to share their experience
Mobile
Shopping Cart
Added item categories for each product to organize the shopping cart structure. To engage with the user, the available offer shows before purchasing the order.
Mobile
Dark Mode
Changed high saturated colors to low saturated colors to avoid having high contrast while seeking to preserve brand identity.
Mobile and Desktop
Design System
Result
Key Takeaway
A clean and organized design system was created to enhance the user’s shopping experience. New Wegman’s online and mobile design reflects the warmth and engagement that align with their brand personality.