Peter Settle
Product Designer
Home
Portfolio
About
Resume
Contact
KrogerFundriseElevate MoneyJasper
Experience 1
Kroger: redefining the deli experience
In a partnership with Boar's Head and Private Selection, my team was tasked with redefining the traditional deli experience. Introducing the all new Pinnacle Deli experience.
My Role: Product Designer II
Company: Kroger
Project Type: Kiosk, Webapp, iOS App, Android App
Explore KrogerNext project
WHAT IS KROGER?
Operating almost 3,000 grocery stores across the US, Kroger is one of the leading grocery store chains in the country. What makes Kroger different? Its bet on technology. In recent years, Kroger has invested millions into cutting edge, customer friendly technology.
ORDER AHEAD?
Order Ahead is one of the leading technologies that Kroger is developing. Order ahead allows customers to order complex meals, platters, and cakes with a few clicks. After 15-20 minutes, the customer can quickly pickup their order at their local Kroger, or have it delivered to their home.
PINNACLE DELI?
Did you know that 83% of customers will skip the deli line if it is four people or longer? Pinnacle Deli is an all new digital deli that removes the worst parts about the deli experience: the long lines and the long prep time. With Pinnacle Deli, customers can use in store kiosks, or "mobile kiosks" on their phones, to place custom deli meat and cheese orders.
THE KIOSK 
The customer facing kiosk is a key component to a successful Pinnacle Deli launch. It's the screen that all in-store customers see, and interact with. Having designed this from scratch, I leaned heavily on user research and testing to make sure we're putting out an intuitive, elegant product.
The filters
As design fidelity grew, filters were iterated on the most. Filters are key to finding specific products efficiently. Static brand & category filters tested the best, and had great compatibility with our large-touch-format codebase, so they were chosen to be the final refinement method.
The Flavor of the Month
As a specific requirement from Boar's Head, Flavor of the Month required a few creative design solutions. It needed to be prominent enough to catch the attention of the user, but subtle enough that it doesn't distract motivated users from finding what they want.
The sticky footer
Though it may seem simple, a lot of testing and design thought went into the layout of this footer. It's imperative that our shoppers can get a brief cart summary at a glance.
THE MOBILE "KIOSK"
See something in the refrigerated showcase that looks good? Our customers can easily scan one of our 133 QR codes attached to each individual item, and quickly order that item with custom specifications on their phone. Once a user scans an item, a user will be brought to that specific item within the mobile "kiosk".
Web
The Pinnacle experience was designed with modularity in mind. The Pinnacle experience on kiosk is easily ported over to mobile web.
Native
On iOS and Android, converting the Pinnacle experience over was not as simple. In order to meat deadlines and launch on time, we made some clever design decisions that optimized out engineering sprints.
THE DESIGN PROCESS
Let's talk about the design process. For the Pinnacle experience, I leaned on user testing to help define certain functionality. Generally, my process is as follows:
Define MVP requirements
The Pinnacle Deli initiative has several layers of complexity. With several different groups of stakeholders (Kroger, Boar's Head, Private Selection, Kahn's, etc.), it's imperative that break pieces of work into nows, nexts, and laters.
Product map
Using mural, I started roughly laying out all the pieces of this complex puzzle. Frequent meetings with stakeholders, project members, and PMs, helped me plan out the customer facing flows.
Product map, round 2
Once the base product map had been finalized, it was time to think about the product at a more granular level. At this point, I expanded the product map to include niche flows such as QR code scanning, notifications, etc.
Wireframing
Time to start bringing these product maps to life. Using rough wireframes, I started to define locations for all the different pieces of content & CTAs.
Low fidelity
Building off the previous wireframes, it was time to start bringing in Kroger components, and modifying layouts to fit the portrait orientation better.
High fidelity
Once I have a high level of confidence in my low fidelity designs, it's time to develop my high fidelity designs and make everything pixel perfect. I'll also prepare specific documentation for handoff.