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.
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.
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 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!