Raley's E-commerce Website
I was part of a five-member design team tasked with revamping the entire retail e-commerce experience for the Raley's brand. Our project had a six-month initial design phase deadline, with the dual objectives of increasing company revenue and creating a white-label solution for two newly acquired brands, Food City and AJ's Fine Foods.
To inform our design decisions, I collaborated weekly with customer service representatives to understand customer pain points and conducted numerous rounds of customer surveys and interviews. Additionally, I conducted a comprehensive competitor analysis within the grocery retail e-commerce industry, gaining valuable insights into online grocery shoppers' needs.
To validate my designs, I created low and high-fidelity prototypes using Figma, which were then tested with active users and our customer service team. Throughout this project, I deepened my understanding of customer needs and honed my skills in solving complex problems as part of a design team while balancing various stakeholder interests.
Defining the problems with Raley's old e-commerce experience
• The previous Raley's website was very clunky and did not provide a great user experience overall. This includes the design and branding of the website not being consistent.
• The website did not provide a great user experience at selecting coupons and offers, which is the heart and engine of the retail grocery industry.
• Limited capability of tracking users purchase history, which would effect reordering capabilities in the future.
• Limited capability of tracking users purchase history, which would effect reordering capabilities in the future.
• Users complained about the checkout process being broken and fact that it did not provide basic features that were standard across the industry.
We used the Triple Diamond UX Process for this Project
Reimagining the Digital Coupon Experience
The redesigned coupon selection experience offers customers more personalized deals tailored to their individual shopping patterns. It integrates Weekly Exclusive Deals and features an enhanced dashboard that provides detailed tracking of Something Extra Points.
Strategic placement of coupons throughout the customer journey reminds shoppers of available savings they can redeem at their convenience.
Recent user testing, conducted with active customers and our Customer Service Representative team, demonstrated that these enhancements significantly improved usability compared to our legacy coupon system.
Enhancing Purchase History for Seamless Reordering
Revitalizing the Purchase History section of the website was essential to improve both customer experience and internal business operations.
A common customer complaint centered on the cumbersome process of reordering previously purchased items. The legacy system could only display purchase history for the most recent three months, forcing customers to spend additional time searching for products they had purchased outside this window.
This limited functionality not only frustrated customers but also hindered the company's ability to analyze long-term purchasing patterns and track frequently bought products throughout the year.
The enhanced Purchase History feature has delivered dual benefits: improved customer satisfaction and increased revenue for Raley's.
Streamlining The Checkout Process
The checkout process is crucial for any e-commerce platform, including Raley's online shopping experience. Through user interviews, we identified two critical pain points in our existing system.
First, customers highlighted the limited product substitution options for deliveries and pickup orders. While users could indicate their general willingness to accept substitutions, they couldn't specify their preferred alternative products—a standard feature in the industry.
Second, disorganized coupon placement made it difficult for customers to find and apply relevant offers during checkout.
To address these challenges, we conducted extensive user research and iterative design, creating multiple low-fidelity and high-fidelity mockups and prototypes in Figma. The resulting improvements to the checkout process have significantly enhanced customer satisfaction.
Developer Handoff Documentation
At the conclusion of our bi-weekly sprints, our design team created comprehensive Figma files containing detailed developer handoff documentation for specific design components. These documents served as the critical bridge between design vision and technical implementation.
At the conclusion of our bi-weekly sprints, our design team created comprehensive Figma files containing detailed developer handoff documentation for specific design components. These documents served as the critical bridge between design vision and technical implementation.
Handoff Components
The example below demonstrates our approach to documenting how each screen section should be constructed. Our process involved:
Custom Component Design: Creating tailored components specific to our product needs
Tailwind UI Foundation: Utilizing Tailwind UI Components as the underlying architecture
Implementation Guidance: Providing clear documentation on which Tailwind UI components to use and how to modify them for our specific use cases
Responsive Design Specifications
Each handoff file included detailed design breakdowns across all three responsive layouts:
Desktop - 1440px
Tablet - 768px
Mobile - 375px
User Flow Visualization
At the developers' request, we also incorporated comprehensive user flows demonstrating how interactions and layouts would adapt across different screen sizes, ensuring a consistent user experience regardless of device.
This structured approach to documentation streamlined the development process, reduced implementation questions, and maintained design integrity throughout the product development lifecycle.
Cohesive and Consistent Identity Across Multiple Brands
Following the successful redesign of the Raley's website, our team expanded the design strategy to encompass the company's recently acquired brands: AJ's Fine Foods and Food City.
We implemented a strategic approach that leveraged our established design system and foundational architecture while thoughtfully adapting visual elements to honor each brand's unique market positioning and customer base. This methodology delivered several key advantages:
Brand Ecosystem Cohesion: Created a unified visual language that maintained consistent user experience patterns while preserving each brand's distinct identity
Design Efficiency: Dramatically reduced design and development time by building upon our existing component library and patterns
Technical Consistency: Ensured all three brands operated on the same technical framework, simplifying maintenance and future enhancements
Cost Optimization: Generated significant cost savings by eliminating redundant design and development work across brands
This approach demonstrated how thoughtful systems-level design thinking can balance brand individuality with operational efficiency, creating a scalable foundation that supports both current needs and future brand acquisitions.
