Peter Settle
Product Designer
Home
Portfolio
About
Contact
KrogerFundriseElevate MoneyJasper
Experience 1
Kroger: end-to-end optimization
With a complete redesign of Order Ahead, we transformed every step of the experience—from product discovery to checkout. This overhaul optimized ordering, improved search functionality, and enhanced fulfillment options, enabling customers to skip grocery store lines and seamlessly pick up freshly sliced deli meats, custom cakes, and more.
My Role: Product Designer II
Company: Kroger
Project Type: Web, Native, Kiosk
Explore KrogerNext project
WHAT IS KROGER?
With nearly 3,000 grocery stores nationwide, Kroger is a leader in the grocery industry. What sets Kroger apart? A commitment to innovation. In recent years, Kroger has invested millions in cutting-edge, customer-focused technology to enhance the shopping experience.
ORDER AHEAD?
Order Ahead is one of Kroger’s latest innovations, allowing customers to conveniently order complex meals, platters, and cakes with just a few clicks. Customers can quickly pick up their orders at a nearby Kroger or opt for home delivery.
WHAT IS THE GOAL?
Our goal is to seamlessly integrate digital solutions into the shopping experience through a comprehensive overhaul of Order Ahead. By modernizing the platform end-to-end, we’re enhancing product discovery, personalization, and fulfillment options. Whether customers shop in-store or plan their trip from home, Kroger ensures a frictionless and convenient experience tailored to their needs.
ORDER AHEAD - HOME
The Order Ahead homepage is designed to enhance personalization and product discovery through dynamic content and intuitive navigation. With department-based categorization and curated selections, users can effortlessly find new products tailored to their shopping habits, while still being able to locate their go-to products with ease. The updated component-driven interface offers a frictionless experience that optimizes new product engagement while maintaining accessibility and usability best practices.
Personalization
Order Ahead leverages user data to recommend products tailored to individual preferences. Using AMP content generation, we can dynamically show relevant seasonal offerings—such as a Thanksgiving turkey dinner—ensuring a curated shopping experience that anticipates customer needs.
Product Discovery
Order Ahead offers a browsing experience that allows users to explore products that are related to their interests. Dynamic content prioritization ensure that each interaction is both engaging and efficient, driving higher conversion rates and larger cart sizes.
Store Offerings
A new store selection sheet (mobile) / modal (web) provides real-time visibility into product availability, helping customers make informed purchase decisions. By dynamically updating in-stock and out-of-stock items by location, it reduces friction in the shopping experience.
ORDER AHEAD - PRODUCT DISPLAY
As part of the end-to-end overhaul, the team enhanced the product list with updated product cards, improved search optimization, and a refined filtering panel. Newly introduced product tags enable more accurate categorization, ensuring customers quickly find relevant items while enhancing overall discoverability and engagement.
Targeted Results
Implemented new product tags and user-driven sorting algorithms to enhance product discoverability. By leveraging user data and reviews, the system dynamically ranks products, ensuring customers see the most relevant options first.
Dynamic Product Customization
Redesigned the product card experience to enable on-the-go customization of deli products. Customers can now personalize orders in real time, selecting preferred cuts, portion sizes, or modifications for a seamless ordering experience.
Advanced Filters
Introduced an enhanced filter panel, allowing users to refine searches by brand, flavor profile, and dietary restrictions. This feature streamlines product selection, making it easier for customers to find exactly what they need.
PINNACLE DELI
Did you know that 83% of customers abandon the deli line if four or more people are ahead of them? Pinnacle Deli is a next-generation digital deli designed to eliminate long lines and wait times. Customers can place custom deli meat and cheese orders via in-store kiosks or mobile 'kiosks' on their phones, ensuring a faster, frictionless shopping experience—all while maintaining the same high-quality, fresh selections they expect.
Pinnacle Deli
Customers can skip the lines by placing their order at a kiosk, shop while their order is prepared, and return for quick and easy pickup. The self-service kiosks streamlined the ordering process and reduced deli wait times. Our innovative tech led to a 73% increase in sales at participating locations.
Queue Board
An order queue board keeps customers informed about order status in real time. Optimized for visibility from multiple locations within the store, it enhances the experience by reducing uncertainty, ensuring customers know exactly when to pick up their orders.
Mobile 'Kiosk'
Products are now equipped with QR codes, allowing customers to scan and build their cart directly from their phones. The mobile kiosk experience mimics in-store kiosks, enabling users to place deli orders, browse options, and check out with minimal friction.
THE DESIGN PROCESS
The end-to-end design process follows a human-centered, data-driven approach to create an intuitive, scalable solution. Each phase ensures a balance between user needs, business goals, and technical feasibility.
Research and Discovery
Conducted user research, competitor analysis, and stakeholder interviews to uncover pain points and opportunities. Used qualitative and quantitative data to inform early-stage decisions, ensuring the design was grounded in real user needs and business objectives.
User Types and Journeys
Mapped user personas and key workflows to define how different customer segments interact with the product. Created detailed journey maps to visualize pain points, motivations, and opportunities, aligning design decisions with user expectations.
Product Mapping
Defined product architecture, feature relationships, and interaction flows to ensure seamless navigation and task completion. Used information hierarchy and service design principles to simplify complex processes, optimizing for both usability and scalability.
Wireframing
Developed low-fidelity wireframes to establish content layout, structure, and interaction patterns. Iterated based on usability feedback and stakeholder alignment, ensuring a strong foundation before moving to high-fidelity design.
Low Fidelity
Designed low fidelity prototypes to test core functionalities and user interactions. Balanced visual hierarchy and interaction flows, validating early design concepts before developing further.
High Fidelity and Handoff
Created high fidelity designs and interactive prototypes, incorporating branding, accessibility, and responsive behavior. Worked closely with engineers to ensure smooth design-to-development handoff using Figma specs, design tokens, and component documentation.