World Central Kitchen

End-to-end product design for a non-profit that is frontline in providing meals to people during disaster.

Year
2021
Client
https://wck.org
Project
Internal App, Product Design
TEAM
2 UX Designers, 2 Engineers, 1 PM

View Prototype

About

World Central Kitchen is an amazing non-profit that is frontline in providing meals to people during disaster. From the Earthquake in Haiti to the war in Ukraine. They've served over 12 million meals across 8 countries in response to these types of crises.

In addition to feeding the world, they also feed families who are food insecure. This is done through WCK Direct, a program they created in response to the Pandemic. It’s like Door Dash, but free. Families can text a number, order a meal(s), and either pick up or have the order delivered to their door at no cost.

Overview

World Central came to SmartLogic, a development agency, for 2 things.

  1. They needed to scale their WCK Direct product which at the time ran on Airtable. due to data overload and limited functions
  2. They needed to use the data they were getting to better communicate with kitchens

SmartLogic focuses heavily on building, so we proposed creating an internal tool that would mimic Airtables functions with some extra bells + whistles. WCK was ecstatic

Role

Since my role was end-to-end on this project my process entailed:

  • Conducting stakeholder interviews
  • Synthesis
  • Requirements gathering
  • Ideation
  • Information Architecture
  • Visual Design
  • Handoff

This case study was created with these steps in mind. Let’s dive in!

Research

I started with a Product Requirements Document for project intake to learn about the project in terms of features, functions and pain points. I then conducted 3 separate sessions with each stakeholder from the World Central Kitchen team.

The role of the first stakeholder was Financial Operations. His day-to-day included:

  • Reviewing and setting up partnerships with suppliers (kitchens)
  • Viewing data across different kitchen locations (not just WCK Direct)
  • Reviewing orders so that restaurants are accurately paid
  • Managing the tools that support the operation e.g. Postmates and other couriers

The role of the second stakeholder was Head of World Central Kitchen Direct. Her day-to-day included:

  • Tracking, managing, and troubleshooting orders via Airtable
  • Directly communicating with families and individuals via text using Twilio
  • Communicating with kitchen employees via WhatsApp

Both stakeholders were essentially feeding thousands of people per month using 3 apps. It was impressive to say the least.

Information Architecture

During the remote interviews each stakeholder would share their screen and walk me through their process. From that, I was able to create a user flow that supported the existing path, as well as capture wants and needs for a happier path.

I categorized the flows by story to view them in terms of a user task. It helped us think about what to prioritize for design and development. The flows supported primary needs such as:

  • User onboarding (Local admins, Restaurants, Recipients)
  • Admin permissions
  • In-app communication

I also isolated flows that would highlight any existing process issues. e.g. SMS, Failed order, Supplier eligibility.

Below you can see at a high level how the two flows connect.

World Central Kitchen

Zooming in...

The restaurant app had to support kitchen staff in these ways:

  • iPad Landscape and Portrait mode
  • Live data that feeds into the Admin experience
  • Order status and updates (Being prepared, Ready for delivery, Failed order)
  • Order details e.g. protein, veggie, name, address
  • Notification of an incoming order — this was interesting because we were thinking of unique ways to get the attention of busy kitchen employees. Although neither were in scope, we explored notification sounds and an interactive notification take-over screen.

I framed the stories behind the user flows as epics. I would hand this off to the PM so that she could write user stories to effectively communicate with Developers.

Wireframes

The UI for the admins would be totally different from the UI for the restaurants. Firstly, visual design wasn’t priority for the admins. Also, although the data would be consistent, the functions would not. Admins required reporting functions, admin permissioning, multi-location management, and multi-user onboarding. Super Admins were effectively supporting 4 different user types.

  • Restaurants i.e. owners, kitchen staff
  • Activations i.e. cities/areas where kitchens are active
  • Local Admins i.e. WCK volunteers and employees who help manage activations
  • Recipients i.e. families and individuals who need support

Initially we explored various ways to capture the busy kitchen staff’s attention when an order was incoming. We settled on default Apple Notifications but stayed mindful of the little cues which could signal to kitchen staff that their attention was required.

The core pages for this experience were.

  • Incoming order
  • Open order
  • Failed order
  • Past order
  • Menu

Any other task could be completed by navigating to one of these pages.

Design

After wireframing it became easier to translate the IA into hi-fidelity designs. Another designer had set up a design system which became null when we had to use Flutter UI, an Android based UI kit, on an Apple product. The devs could build more quickly with this framework so we had to use it. It was such a unique task because Material Design and Apple are two fundamentally different UI’s. Just from simple flat vs material. Switching to this framework would cancel our initial design system. I found myself digging through Tailwind Components to put together the design.

While pulling in new components some of my considerations for the layout and UI were:

  • Landscape mode to better support how kitchens would orient the tablets
  • Swiping between pages for seamless use
  • Notifications, Pop-ups, and Modals for action
  • Iconography, Color, and Progress Bars to be used as indicators

Conclusion

As a Product Designer at a Software Development Agency, the design process felt complete because we worked so closely with Engineers. Both sides felt happy with the first version and minimal feedback was given as far as design and function.

The team over at World Central Kitchen is thriving not only due to their internal product but they recently received $100 Million from Jeff Bezos.

It comes well deserved.

World Central Kitchen