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.
9 months (Jun 2015 - Feb 2016)
Proof of concept
Version 1.0.0 (MVP)
User Experience Designer
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
My design thinking process is directly integrated with the Scrum framework.
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.
Understanding the problem space
Kehe's B2B business model involves buying products from vendors and selling them to 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.
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.
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.
User story mapping
Prototype and Iterate
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.
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.
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.
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.
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.
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.
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.
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.
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:
- Lean UI Reviews - Internal Solstice company workshop
- Rally for UXers - Internal Solstice company workshop
- Giving and Receiving Feedback - KeHE client workshop
- The Designer Developer Duo: From WTF to BFF - Internal Solstice company course, Chicago IxD Meetup talk, Chicago Coder Conference talk
- Maintaining UI Integrity Within the Agile Framework - InVision Blog article
- Integrate Design Thinking Into Agile Development - Forrester Report Interviewee