Defining a new mobile experience for Kaipatiki Project
8 min read
At-a-Glance
I got the chance to develop a mobile app for Kaipātiki Project, a non-profit environmental charity organization based in Auckland, as part of a module in my master of IT program.
This was carried out over a period of 3 weeks in August 2023. I worked to design a new mobile app for the organization to tailor the user experience for volunteers and environmental enthusiasts through three rounds of wireframing, prototyping and testing.
In 3 weeks, I led a team of 5 and delivered a complete mobile app design and a detailed style guide through collaboration with end-users and stakeholders.
Timeline
3 weeks
My Role
UX Designer
5 team members 2 staff members
Collaboration
Platform
Figma
Impact
Streamlined communication and better volunteer management
Sneak peek of Kaipatiki Project’s mobile designs
📄
The client needed to streamline event registration process for volunteers, promote events and workshops
In doing so, Kaipātiki Project wanted to increase turnover and engagement for events. Furthermore, the organization wanted to better promote their events, workshops and activities among the community, and educate the youth about protecting the environment, home gardening and zero waste.
🤔
What were the problems?
After interviewing users and also analysing the data, we identified 3 problems with the current way the website handles events and workshops.
Unable to add events to calendar - users could not add an event that they registered to onto their calendar. This often led to users forgetting about the events and not turning up.
Cannot view events within a specific location or area - in the current website, users are presented with all the events and cannot filter them. Often times, users want to be able to attend events closer to them.
Unable to personalized event recommendations - users cannot receive personalized event recommendations currently
Problem statement
Volunteers are the lifeblood of non-profits, particularly environmental organizations. Volunteers often are not aware of events in their local community and find it difficult to locate where to register for these events. Because the organization only has event registrations via the website, there is less conversion rates. This situation causes frustrations for both volunteers and organization staff and leads to event cancellations as a result of less turnover.
😎
How can we create a mobile strategy for Kaipatiki Project that is modern, accurate and relevant?
💡
What is the opportunity here?
The solution that I created included event registration, filtering events and donating to the organization
I designed a mobile app experience for Kaipātiki Project volunteers and users with a clear user interface and simple user flows.
In addition to being able to register for events, the app included extra features such as:
Getting personalized event recommendations
Filtering events
Viewing workshops and resources
Donating to the organization
Shopping for native plants
The mobile experience also included gamification elements so that users feel more engaged and likely to use the app more frequently.
🔒
Were there any design constraints?
In this project, I was given the design constraints that the mobile design has to be consistent with the website brand assets of the organization. In addition, I had to adhere to accessibility standards to ensure that the app can be used by people with disabilities.
🚀
Process
👨🏼
User Research Summary
I led a team of 5 to carry out contextual inquiry, user interviews and surveys as part of user research. The summary of each part is given below.
Contexual Inquiry
We visited Kaipātiki Project office in Birkenhead, Auckland to see how they operate, spent time observing how the work happens.
We were able to understand the communication flows, sequence of tasks, the artifacts and the tools people use to accomplish work, the impact and influence of the culture on the work, and also, the impact and influence of the physical environment on the work.
We visited the plant nursery at Kaipatiki Project where they grow plants in small pots to be planted in sites all around Auckland.
User Interviews and Surveys
Our interviews with Kaipātiki Project staff and volunteers yielded valuable information about how:
Events are organized
Donations are collected
Seeds are planted
Workshops are carried out
New events are promoted
👩🏼💼
David - “Nature and environmental love”
To understand the users, I held interviews with 2 staff members and a few volunteers to clarify the user problem. The organization did not have any previous research, so I had to make full use of the interviews and the contextual inquiry. I incorporated the insights into the user persona named David.
🧭
David’s User Journey
The user journey for the existing website (kaipatiki.org.nz) was created.
David’s emotions were validated using interviews and think-aloud user testing sessions.
✍🏼
Paper First
The ideation process began with sketches, then moves to low-fidelity wireframes, and finally to the high-fidelity prototype.
Sketches were made within a short time period to get as many ideas as possible.
🧑🏼💻
From Paper to Digital
I then created interactive digital low-fidelity wireframes and shared with key stakeholders to collect feedback.
✨
Designs - First version
I, along with my team, started designing the screens for the events page. After a few rounds of sketching, there were a few options I wanted to visually try out.
This was one of the first options I designed for the event details page. But I soon realized there are certain issues here:
The ‘wishlisted’ and ‘going‘ buttons were too close to each other and was hard to distinguish.
Users had to scroll up to the top of the page after scrolling to the bottom to click ‘going’.
Other related events are not being shown to allow users to easily switch between events.
The navigation button on the top left is not visible due to the background image.
After taking the above issues into consideration, I worked on a few other iterations. I shared those iterations with my team to get their feedback. Then we agreed on a final go-live version. On this, the main update I did was changing the placement and text of the buttons. Users will only see a main ‘Register’ button and can wishlist an event by tapping a heart icon.
This is the first version for Kaipātiki Project.
⬆️ Proposed flow for registering for an event
The first version failed: Results and learnings
After we finished building the above design, we held a few rounds of usability testing. As a result of these tests, we figured out that this flow has a major problem.
Unable to edit RSVP - After the user clicks on ‘Register for event’, the user is taken to the event confirmation page. However, the user is unable to edit the RSVP for this event from this page. This was an element that we missed in our designs.
Cannot add events to calendar - There is no option to add the event to calendar after a user registers. This would help users keep track of the events and help them remind them to attend.
🎉
Second version was a success: Learnings
After brainstorming with my team, we came up with the following solutions.
Editing RSVP - We decided to add the ability to edit the RSVP for an event after a user registers for an event. This will be paired with another confirmation page. This will users flexibility to edit their event attendings.
Adding event to calendar - In the current design, the user cannot add the event to calendar after registering. We proposed adding a button on the event confirmation page to allow users to add the event to their calendar.
After figuring out the above issues on the first version, our challenge was to rectify those.
⬆️ Snippets from the second version
After building the above solution, we conducted further usability testing with volunteers and stakeholders.
Event Registration - We observed that the event registration flow is now much smoother and caused less confusion among the users. Since the users were now able to edit the RSVP for an event, it allows them more freedom with choosing an appropriate event to attend and accommodate changes to their schedule.
Improved navigation - Including the top navigation buttons inside its own header element along with the page name, wishlist and share icon simplifies things for the user. There are also increased visual cues and the design is more accessible now.
📱
High-Fidelity Prototype
🌱
So what happened next? What did I learn?
Outcomes
Due to budget constraints of Kaipātiki Project, the app did not make its final way into development, much to the disappointment of the team.
The mobile app designs were however shared with the organization and received a positive response.
Learnings
Throughout my time working with Kaipātiki Project, I’ve learnt the importance of spending solid time doing user research as it lays the foundation for the whole design.
I’ve also learnt the importance of contextual inquiry, allowing me to truly understand the environment that they worked in and their workflows.
In addition, understanding and aligning with business goals was also something that I experienced and hope to improve in the future.
I also improved my leadership and communication skills as I was leading my design team, delegating tasks and managing the whole project.
Things I wish to further improve in my future projects include spending more time testing the designs, including usability testing, to ensure that the design is delivering superior user experience and accessibility requirements.
