case study

Open Table: Free meals for
those in need.

Smiling Open Table volunteers.

Overview

Open Table is a Charity and Certified B-Corp based in Melbourne; they provide free food to marginalised groups in the community by running weekly lunches across Melbourne, redirecting would-be food waste into yummy and nutritious meals.

They recently received a grant to build a custom volunteer-management and impact tracking system, to free up time spent doing tasks manually and to better track key metrics.

Key points about this project

🚀

Goals: Design a simple volunteer-management system and create an analytics panel that collates important metrics.

🎨

My role: I was responsible for architecting and designing the system.

⏱️

Timeline: The finished designs were delivered in 6 weeks.

📊

Results: Tangible outcomes are TBC: the system is still in development.

Challenges

  • The biggest challenge was coming up with a modular system to deal with different user types. In essence, creating a single view / layout with elements that can be simply added or subtracted based on the type of user that is logged in.
  • The other challenge was understanding the most important metrics from a high level. This involved reviewing grant applications and identifying the information they value, as well as key metrics the board wants to know — then, translating it all into a simple dashboard.
the problem

Inefficient systems and
tedious data collection.

Open Table used a system that required a lot of repetitive work, due to lack of automation. Similarly, all their data collection and reporting had to be done manually.

Key insights

Time consuming: The time it takes to manage volunteers per-location is such that expanding to new areas would not be possible with their current staff.

💻

Poor UX: Their prior system used Signup.com to book and manage volunteers, which has a very dated and bloated interface.

💰

Grant funding roadblocks: By automating the collection of key metrics and allowing the data to be exported as a CSV, it will be much easier to apply for new grant applications and generally track how things are trending.

the solution

Volunteer management system.
Automated data collection.

Above is a look at the final product, which spans across a desktop volunteer booking system and dashboard, to a mobile volunteer and event management checklist. Check out the visual design section for a full look).

Outcomes

Bespoke system: A full system to easily manage volunteers as well as a frontend that makes it easy for volunteers to book and view shifts.

📊

Dashboard with key metrics: A simple dashboard for the general manager to view key metrics.

Dashboard with key metrics: Lots of time and headache saved via automation.

😀

Improved UX: A far better user experience than their current system.

🔮

Modular design system: A developer-friendly styleguide that not only makes development more streamlined but sets the product up for future additions.

process

How we got from idea
to working product.

Here's a full walkthrough from the initial proposal through to responsive designs of the Open Table Volunteer application.

#1

Outline project objectives

One of the first steps in any project is getting clarity on the product vision, the specific problem / opportunity and the solution; likewise, outlying the key objectives that we want to achieve.

Back
Next

#2

Outline key functionality

Once the problem is identified and the current process is deconstructed, a new solution is created. Behind the scenes, this involves coming up with a more efficient process — on paper — user-testing it, revising and locking it it. After this exercise, the new overall solution is put into words as well as the core functionality that needs to be built.

#3

Sitemap & User Journeys

Below are the initial concepts for what screens would be required to meet the product objectives, as well as how different user types will move through the application.

Back
Next

#4

User Stories

After all the screens were outlined, User Stories were created. These stories describe what users can do on each screen, which feeds directly into what elements need to be designed later down the track.

Back
Next

#5

Map out Key Metrics

Researching non-vanity metrics and understanding a product's KPIs is an exercise I always find interesting. In this case, I had to read through several grant applications that were provided by OpenTable, as well as research specific council goals to understand what they are measuring.

This resulted in outlining all the possible metrics that we could track, then refining them down into the important ones. It also revealed the need to put more of an emphasis on the analytics side of things, to tangibly track the impact Open Table are having per-location.

#6

Basic Wireframes

The bare bones of various page layouts.

Back
Next

#7

Simple web-styleguide

OpenTable provided me a great styleguide to work with. I converted it into a simple web-styleguide for Desktop, Tablet and Mobile breakpoints. This styleguide also included some basic components from my design system, for buttons, form fields, form states and hover effects.

Back
Next

#8

Responsive Interface Design

During the last three projects I worked on prior to OpenTable, I built a comprehensive design system in Sketch; this system brings together common design components which I've used many times over, based on design patterns with proven efficacy. I was finally able to apply this modular system for the first time working on OpenTable. It allowed me to draw from a pool of layouts and components I've used before then add the Open Table flavour on top.

#9

Standardise design components

During the design process, I created components out of every group in Sketch. This is a simple way for software engineers to tally up the various components they need to build. It makes things very clean on my end, too, especially when re-using elements across pages and having the ability to change once and update everywhere.

Back
Next

#10

Prepare assets for development

Once all the designs were done, I exported everything into Zeplin. This great tool makes it easy to hand off designs and assets to developers. Annotations were added to each page — where necessary — explaining how layouts and functions should work. Furthermore, a web-friendly styleguide is generated to ensure there's a single source of truth.

Back
Next

#11

Dev handoff!

And that's all from my end!

conclusion

Closing thoughts
& takeaways.

Working with a Charity was a great first experience for me. It gave me insight into the different objectives NFPs have, how they get funding and what sorts of metrics they track vs a traditional private enterprise.

Having gone to one of their lunches in Fitzroy, I was able to see first hand the big smiles on people’s faces and the community-connection these events create. That’s priceless.

Furthermore, getting insight into their model of waste-redistribution was very interesting. It’s a real eye opener how much food goes to waste, for no good reason; likewise, given the current waste processing methods (or lack thereof), it’s pretty shocking to see all the emissions that are created from bin-waste, absent of proper composting.

As for the system itself, I hope it helps Open Table free up some time to work on growing their reach and enables them to land more grant funding with the reporting.

You can learn more about Open Table on their website.

That’s all from me! Peace ✌️

Get in touch

A little about me, outside
the office

Interested in working together?

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Please view on Desktop for the best experience