Joyce Pang Vargas
Product Designer and Certified Scrum Master
kehe_thumbnail+copy.png

Connect: Order

Transforming how grocery stores order inventory

 
 

Overview

Connect: Order is an iOS app that enables grocery stores to order inventory directly from the aisle floor, by scanning product barcodes. Before the development of the app, KeHE had a number of cumbersome ordering solutions including pen and paper, phone, email, and even fax machines! KeHE needed a unified, modern ordering solution in order to remain competitive in the marketplace.

Our newly formed team immersed ourselves in the grocery distribution business, releasing multiple versions of the app within 9 months. We started with small corner stores, gathering user feedback every step of the way, and eventually rolled out robust features to national chains like Albertson's, Publix, and Meijer. Our most recent release includes features for internal KeHE Sales Reps who can order on a store's behalf or issue credits. 

Client

KeHE Distributors, LLC

Timeline

9 months (Jun 2015 - Feb 2016)

Releases

Proof of concept
Version 1.0.0 (MVP)
Version 2.0.0
Version 2.1.0
Version 2.2.0

My Role

User Experience Designer

Team Members

Product Owner: Scott Cousins, Agile Coach: Gretchen Goodrich, Scrum Master: Krista Chacko, Business Analyst: Anthony Diorio, Architect: Danny Cohn, Tech Lead: Reid Conner, Backend Developer: Rich Hosek, Frontend Developer: Andrew Sutherland, Frontend Developer: Joe Nicotra, User Experience Researcher: Emily Ryou, QA Engineer: Asad Muhammed, QA Analyst: Asha Aluru

 Our product team on a KeHE warehouse visit.

Our product team on a KeHE warehouse visit.

Approach

Process

My design thinking process is directly integrated with the Scrum framework.

 
 
process_graphic.png
 
 

 

Tools & Methods

User interviews, SME interviews, Personas, Contextual inquiries, Innovation sessions, User journey mapping, User story mapping, Whiteboarding sessions, Wireframing and prototyping (Proto.io, InVision), Usability testing, UI design (Photoshop), UI reviews (Avocode), Lean, Kanban, Behavior Driven Development.

Discover

Understanding the problem space

Kehe's B2B business model involves buying products from vendors and selling them to retailers. 

 The Connect:Order app focuses on the relationship between KeHE and retailers.

The Connect:Order app focuses on the relationship between KeHE and retailers.

In addition to manual solutions, KeHE offered their retailers a number of outdated ruggedized devices for ordering. Every store used a different solution, making support efforts difficult and inconsistent.

 Some of KeHE's existing ordering solutions, before the KeHE Connect Order app. The most "modern" solution here is the Telxon device, pictured in the top right.

Some of KeHE's existing ordering solutions, before the KeHE Connect Order app. The most "modern" solution here is the Telxon device, pictured in the top right.

Contextual Inquiries

We visited grocery stores and shadowed store clerks (our primary users) on a number of occasions. Below are photos from two such visits. The visit to Martin's was in the early stages of the project, prior to building out our MVP. The visit to New Seasons was in the later stages of the project, as we sought to build out a POC of a strategic feature that would allow stores to order from smaller vendors like a corner bakery.

 Shadowing Nate, a store clerk at Martin's in South Bend, Indiana.

Shadowing Nate, a store clerk at Martin's in South Bend, Indiana.

 To order inventory, Nate has to input each 12 digit UPC barcode manually.

To order inventory, Nate has to input each 12 digit UPC barcode manually.

The submit and confirm process 😱.

 An small vendor order guide for New Seasons, a natural and specialty grocery store in Portland, OR.

An small vendor order guide for New Seasons, a natural and specialty grocery store in Portland, OR.

 A makeshift way to keep track of ordered inventory.

A makeshift way to keep track of ordered inventory.

Synthesize

Innovation session

In order to learn as much as we could from the business, we invited stakeholders from across the country to participate in innovation sessions. Stakeholders included KeHE Sales Reps and Regional Directors that represented different market segments, as well as representatives from KeHE's Retail Tech Support department.

 
 
 Running an innovation session with stakeholders to review research findings and uncover key business goals and insights.

Running an innovation session with stakeholders to review research findings and uncover key business goals and insights.

 Setting some ground rules to keep our innovation session productive.

Setting some ground rules to keep our innovation session productive.

 We used our product mission statement as a guiding light. If a feature did not align with the mission statement, it moved lower in priority, according to business value.

We used our product mission statement as a guiding light. If a feature did not align with the mission statement, it moved lower in priority, according to business value.

 Conducting an exercise to determine which item details are essential and their order of significance.  

Conducting an exercise to determine which item details are essential and their order of significance.  

 
 

User story mapping

 As a team we created a high level user story map, prioritizing epics by release and ordering them by task flow.

As a team we created a high level user story map, prioritizing epics by release and ordering them by task flow.

 
 
 Another iteration of user story mapping. This one is zoomed in on Version 1. 

Another iteration of user story mapping. This one is zoomed in on Version 1. 

 
 

Prototype and Iterate

Whiteboarding

Whenever epics or stories got prioritized, I would usually begin my design process by facilitating a team whiteboarding session. Including the entire cross-functional team was important, in order to identify business constraints, technical constraints, and open questions. 

 
 
 
 

Wireframes

 A wireframe task flow from the early stages of the project.

A wireframe task flow from the early stages of the project.

In order to eliminate waste and create business value, wireframes for the initial proof of concept were as minimal as possible, and the UI was actually developed as wireframes. The main purpose of the POC was to prove that order data could be sent from the iOS app to KeHE's backend order processing system. We successfully learned how to send data to the backend as well as how the basic task flow could work.

 Minimal wireframes for the initial POC.

Minimal wireframes for the initial POC.

While there were many more iterations within the course of 9 months, below is a sample of the evolution of four key screens. These screens evolved as we continued validation testing during each sprint.

 Sample wireframes showing the evolution of uncertainty to definition for four key screens.

Sample wireframes showing the evolution of uncertainty to definition for four key screens.

define

Just as most agile teams use a sprint kanban board, I used a design kanban board to track the design iteration process. The board allowed me to prioritize my work, identify blockers, and provide transparency to the entire team. Breaking down epics, creating using stories, and writing acceptance criteria were an integral part of my design process.

 The design kanban board flowed directly into the sprint kanban board. During daily stand ups, our team looked at both boards to track our progress.

The design kanban board flowed directly into the sprint kanban board. During daily stand ups, our team looked at both boards to track our progress.

Designs

 App icon iterations.

App icon iterations.

 
 
 Sign in screen iterations.

Sign in screen iterations.

 
 
 
 
 

We developed three ways for users to scan product barcodes. Large national  chains could purchase and use the (more expensive) Linea Pro sled scanner. For smaller mom and pop shops, the built in iPhone camera might suffice. Other mid-sized stores could use a Socket Mobile bluetooth scanner, which sits at a medium price point. 

 
 
 
 

Demos

After every sprint (2 weeks), our team would demo new features to KeHE business stakeholders. The purpose was to gather stakeholder feedback and also to keep the business involved in the evolution of the product. We did a total of 20 demos. Sometimes we recorded demos in case stakeholders could not make it in person. Here are our sprint 4 and sprint 5 demo recordings, from the earlier stages of the project.

Outcomes

Product

 A high level view of versions that were released during my involvement in the project.  

A high level view of versions that were released during my involvement in the project.  

About a year after our first release, the amount of revenue generated by the Connect: Order app was over $1 billion in sales

Our team relied on stakeholder and user feedback for the success of the product. We consistently received good and bad feedback, which directly informed our product backlog. Ultimately, users were delighted with a single, modern ordering solution that made their jobs exponentially easier, and stakeholders expressed how rewarding it was to be part of the development process. 

 

Team

Over the course of 9 months our team (the Hangry Nomads) certainly formed, stormed, normed, and performed. We experienced continuous improvement and our sprint velocity steadily increased from the 60s to the 90s. Our healthy, high performing team no doubt informed the success of the product.  

 

Personal Development

This project allowed me to grow tremendously as a design practitioner. Based on our many team failures and successes, I shared my learnings both internally at my company, as well as externally with the greater design and tech community, through the following channels:


 
 
The biggest highlight of Joyce’s accomplishments so far is the successful delivery of a phenomenal ordering app that blew all of KeHE’s expectations out of the water. This was a hugely complex undertaking. KeHE went into the project with a conservative forecast. However, largely due to Joyce’s diligence in ironing out the business understanding for complex features, iterating quickly and efficiently on designs, and mediating the processes between design and development, the team was able to accomplish considerably more than had initially been planned. Joyce even traveled with KeHE out to Portland to design, from the ground up, an entirely new business offering that KeHE had a very limited understanding of going in. She was able to help them fully understand the customer needs and from that, design a POC that we were able to implement and present to stakeholders, much to their excitement. This project could not have gone better than it did, and that is largely thanks to Joyce’s efforts.
— Product team member