Farm to (lunch) Table.

Organic school lunches made easy. A look into creating a flexible ordering system, built for busy adults (and kids!).

 

Role

User Research, UX/UI Design, Prototyping

Tools

Figma

Timeline

2 Months

Team

Tess Weinberg, JT Williams


TL;DR

OKLA users loved the organic lunches at their schools but had trouble when it came to ordering (and all the things that came along with ordering - canceling, managing their account, keeping track of their previously ordered lunches). In taking a full look at OKLA’s ordering flow, there were many pain points that prevented users from ordering consistently through a service they loved but couldn't take full advantage of. OKLA connected with us to build a streamlined ordering and account management flow to better retain their clients, provide a better service for their clients overall, and free up OKLA’s time managing customer service requests.

Play with the prototype to see how a user moves through the improved sign-up and ordering flows. And keep reading below to see how I came to find these solutions.

 

 

Context

Objectives: 

  • Identify users’ pain points with the current usability of the website

  • Understand stakeholder’s and current users’ expectations for a new ordering system

  • Create a scalable and buildable design system

  • Collaborate with development

 
 

Research

Usability Testing & Data Collection

 

Before: The existing site lacked a central base for users to find, view, and edit their account information.

Design Update: Users needed an easy-to-find Homebase where they can find their order history, manage their account, and view their lunch money funds.

 

We started by talking to current users of OKLA to identify the pain points in their journeys. Current users expressed frustration with not being able to see the kinds of meals offered before signing up for the service and once they did sign up, they experienced issues with knowing when and how they would be billed. They reported that they desired an easy way to re-order meals for multiple kids and wanted a way to be able to change their order manually versus reaching out to customer service.

 

We also spoke to prospective users and took them through the existing OKLA product. We listened to users and gathered their questions and hopes for their potential OKLA experience.


 

Personas

After collecting feedback from our OKLA users, we created a main persona that captured the most common and potentially complicated use cases. Meet Lynn!

Lynn is a busy parent and heard about OKLA through fellow parents at her kids’ schools. She wasn’t thrilled with the options in the lunch room and doesn’t have time to pack a lunch every day so she likes using OKLA and her kids like the food too. With one picky eater and one more adventurous eater, Lynn needs an easier way to schedule recurring meals based on her kids preferences and manage her payments in one easy hub.

 
 

Journey Map:

Lynn’s experience with using OKLA for the first time:

 

User Flow

With our primary persona’s goals set and the main features to include in mind, we were able to map out Lynn’’s prospective user flow while using the new site from beginning to end and the important decision points along the way. With this guide, we were able to move on to sketching the wireframes of our flow with these touch points.


 

Design

Sketches

I started sketching out the main functions of the site with the new ordering flow based on our collected research.

The sketches contained clear CTAs to better guide the current and prospective users to guide their ordering and sign-up processes.

Given the prospective users’ concerns about wanting to see the menu before signing up, I sketched out the possibility of a sample menu CTA on the “See if OKLA is available in your area” page. The menu changes based on your school’s availability so we thought this could be the most accurate way to allow users to see the menu items currently available at their school but this ultimately was too much work on the backend. We decided to have a stagnant sample menu that lives in the navigation to allow users to get a gist of what types of meals are offered by OKLA.

 

 

Branding and UI Design

 
 
 

Inspired by bright and minimal California brands, I created a moodboard to inspire our high fidelity designs and to fit OKLA’s healthy, fresh, and modern take on school lunches.

 
 
 

 

Develop

Solution

The solution: As the users pointed out, they needed to be able to order their lunches and manage their accounts easily without interruption and reaching out to customer service. Now when users go to OKLA, they are able to preview the meals that OKLA offers, they can order and re-order for multiple children at different schools, and manage their account without interruption.

The user now has a way to preview the menu before signing up for OKLA.

The new design offers a clear center for all of their account management needs.

We created a responsive design at multiple breakpoints. Our new design streamlines the ordering process for users and allows them to order for multiple kids at once, addressing a main pain point we pinpointed from existing users.

 

Next Steps:

We have been working with the dev team on QA and thoroughly address any UI and interaction discrepancies.

Example of our QA process.


 

Summary

We took an in-depth look at OKLA’s existing service and were able to identify the user’s pain points with their experience. Too many inconsistencies in their ordering flow lead to users often being confused and frustrated, resulting in too many customer service calls which was a negative experience for users but also hindered the small yet mighty team at OKLA headquarters.

The biggest thing I took away from building OKLA’s new site was that you can have a really great service (adults and kids love the lunches!) but without a trust-building ordering experience and account manager, user’s won’t be able to use the service as they’d like and OKLA was at risk of losing potential customers. We were able to build an experience for users that accomplished their goals of easy ordering and account management but also design a visually beautiful site that builds confidence in OKLA as a service. Now adults (and kids) can enjoy OKLA lunches, seamlessly.


Update: OKLA has not received any customer complaints since we launched the new site over 2 months ago! This is greatly relieved OLKA’s small customer service team and they have been able to focus on growth and product development. Additionally, we were just asked to come back and build out their internal administration site. I’m looking forward to continue working with OKLA and help the owners and their customers have the best experience possible and reach their goals.