An east-coast grocery store chain needed a feature-complete app, designed and completed in seven months. As the only designer on the project, my responsibility was the full end-to-end design of the app. I overcame procedural obstacles to deliver on-time and launch an app with a fantastic launch.
• $4,500,000 in revenue 4 months after launch
• 8,500 users
• healthy and consistently growing basket size
When I arrived to the project, the app was just a few months into development. The UX/UI of the app consisted of a task list and a single page of 165,000 endlessly scrolling products.
To move fast, I needed the trust and support of every member on my team. I scheduled weekly 1:1s and established a weekly design discussion, including design, product, and development. Anyone could provide feedback on future design concepts, voice ideas, and raise concerns.
I enjoyed getting to know everyone through the 1:1 meetings, and it gave my teammates space to privately voice design thoughts.
I inherited a Sketch/Invision/Abstract workflow but found myself wishing for better tools.
I researched new tools (Affinity Designer, Adobe XD, Invision Studio, to name a few). I looked for features that I believed would encourage feedback and simplify future design system functions (version control, cloud-based, and continuously syncing libraries). I found Figma and received approval from executive leadership to use it for my work. I helped the web team switch their workflow and trained junior designers on critical features like shared libraries, auto-layout, and efficient workflow best practices.
I drew inspiration for the app architecture from two places, in-store grocery layouts, and competitor app designs.
Grocery delivery through a mobile app was not a novel idea at this time, and we found that many customers of the grocery store chain already used competitor platform shopping experiences. Because of this, I began by designing a Home Feed.
Replicating the in-store shopping model
Grocery store merchandising, as I found out, is a fascinating topic with many roots in psychology. Most stores encourage a counter-clockwise flow starting in produce, then meat/deli, followed by dairy and bread. If you look at the order data, it matches what consumers buy.
To replicate this in the mobile app I set the architecture in this way: