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.
🚀
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.
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.
⌛
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.
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).
⌛
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.
Here's a full walkthrough from the initial proposal through to responsive designs of the Open Table Volunteer application.
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.
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.
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.
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.
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.
The bare bones of various page layouts.
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.
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.
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.
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.
And that's all from my end!
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 ✌️
