Creating a web platform for an awarded non-profit

Role

Principal Designer at Koha Tree

Responsibilities

Research • UX/UI design • Information architecture • Design system • Identity

Tools

Figma • Sketch• Invision • Miro • Asana

Define
The background
Koha Tree is the evolution of Shoebox Christmas.

Shoebox Christmas is a volunteer led organization that started in Wellington, New Zealand and over the last 9 years, has grown to cover all of New Zealand.

Shoebox Christmas delivers donated Christmas presents, wrapped in a shoebox, to kids who could do with an extra smile on Christmas Day.

They do this by working alongside low decile schools, pre-schools, Women's Refuge, and community organizations. Volunteer gifters can sign up on the Shoebox Christmas website, once their profile is created, they are matched with a child and given the important dates and the drop off information for their gift.

Until now, founder Pera, with a small group of volunteers around the country, has run and organized the annual round of Shoebox Christmas. This involves correspondence with the schools to gather children’s information and correspondence with gifters who have signed up.

There is a large amount of manual processing required as schools will contact Pera and the team to action specific details they can’t manage themselves.
A diagram of the current process that Shoebox Christmas follows
The challenge
Pera wanted to develop a new platform where people could create accounts and self manage their Shoebox Christmas experience. This platform would also allow the processors of gifts (schools) to create their own accounts and organize their own Shoebox Christmas ‘project’ to be able to manage the correspondence between themselves and the matched gifters.

This new platform would also open the opportunity for wider thinking in allowing people to sign up for other community projects in their area (winter coat drives, food drives, stationary starter packs etc.) and the flip-side of that would allow those same people to be able to organize their own projects on the platform for people to sign up to as gifters.

This would ultimately create a scalable user-generated ecosystem (Koha Tree) that offered more opportunities for community empowerment.
A diagram of the process Shoebox Christmas could follow to improve and scale the product into Koha Tree
The team
The complete Koha Tree team was made up of myself, 5 developers, a PO/BA (Pera) and an illustrator/animator.

We decided for the pilot to design and build for web using React. In time mobile native apps could be developed if required, but this decision gave us a strong responsive foundation, and we knew web was widely used by the majority of our initial users (schools).

As we were all working on this outside of our normal day jobs, the timeframe was set for a pilot in 2 years at the end of 2022.
Initial research
I began my research through conversations with Pera and two of the other existing volunteers on the process of Shoebox Christmas today. Identifying assumptions early and documenting their pain points gave me the initial understanding I required.

The restrictions on the current process of managing Shoebox Christmas led me to start researching examples of comparative platforms that scale.

Uber and airbnb stood out to me as obvious examples. Both required the need to allow users to join and book a service as well as allowing users to be able offer their service in return. This was the flipside I mentioned earlier.
Screenshot of uber website
Screenshot of airbnb website
The fact they were both location and time-based gave me further inspiration when thinking about possible solutions.


The pain point of manually managing correspondence at particular times in a Shoebox Christmas project led me to check out how Mailchimp handles emailing, filtering and scheduling.
Screenshot of mailchimp website
Gofundme provided inspiration in the way they represented a cause, displayed a call to action and represented the people involved.
Screenshot of gofundme website
The customer journey
Pera and I discussed a customer journey map and the assumptions on the screens and tasks that may be required as an organizer to manage a Shoebox Christmas project end to end.
Screenshot of a Koha Tree customer journey
Design
Information architecture
With the requirements gathered I began thinking about an initial IA for the platform.

It was clear we required an unauthenticated front door to the authenticated experience. Allowing users to be able to explore existing projects in their area would be crucial in getting them onto the platform.
A diagram of the information architecture Koha Tree could follow
Wireframing
Focussing on some of the key user flows, I began wireframing for usability.
Screenshot of a Koha Tree wireframesScreenshot of a Koha Tree wireframesScreenshot of  Koha Tree wireframes
Usability
We conducted usability sessions remotely over Microsoft Teams with the existing Shoebox Christmas team.

Key learnings:
Identity
The color green, with its links to growth and renewal, was chosen as the primary color for Koha Tree.

I designed the logo to be capable of retaining identification at a small scale. The form is deliberately simple and could be interpreted as a leaf or a tree.
Screenshot of a Koha Tree logoScreenshot of a Koha Tree illustration
Design system
The design system is still in progress, but given the priorities of the project, enough was developed to get the devs started.
Screenshot of a Koha Tree design system elements
Screenshot of a Koha Tree fonts from design system
Final UI
After some further rounds of usability and sense-making, the wireframes could start to be fleshed out with final UI.
Screenshot of a Koha Tree screen design
Screenshot of Koha Tree register screen design
Image of a Koha Tree interface design
Image of a Koha Tree interface design
Screenshot of Koha Tree login screen design
Image of a Koha Tree interface design
Number of projects encouraging signups and donations on the platform nationally
85
Flood relief projects
75
Shoebox Christmas projects
VIEW KOHA TREE SITE