Streamlining Event Registration For Kaipātiki Project
3 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.
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.
I 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
Collaboration
5 team members
2 staff members
Platform
Figma
Impact
15% improvement in event registration rate
Sneak peek of Kaipatiki Project’s mobile designs
🧑🏼💻Product Owner's Story
The organization needed to streamline their 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?
Problem statement
When I approached volunteers, they often were not aware of events in their local community and expressed difficulties in locating where to register for these events. Currently, their website has limited information about events, and navigation is confusing. In addition, you do not get personalized event recommendations based on your location. A lack of a mobile app was also mentioned by a majority of volunteers. This situation causes frustrations for both volunteers and the organization and leads to event cancellations as a result of less turnover.
😎 What is the opportunity here?
How can we create a mobile strategy for Kaipatiki Project that is modern, accurate and relevant?
💡What was the solution?
I designed a mobile app experience for Kaipātiki Project with easy navigation 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.
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
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
👩🏼💼David - “Nature and environmental lover”
🧭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.
✨Usability Testing - Round One
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.
🎉 Usability Testing - Round Two - Success!
After figuring out the above issues on the first version, our challenge was to rectify those.
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 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. We observed an improvement of 15% in task completion rates compared to the previous version.
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.
⬆️ Snippets from the second version
📱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.
Other case studies
Streamlining Event Registration For Kaipātiki Project
Impact
15% improvement in event registration rate
Platform
Figma
Timeline
3 weeks
My Role
UX Designer
Collaboration
5 team members
2 staff members
3 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.
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.
Sneak peek of Kaipatiki Project’s mobile designs
🧑🏼💻Product Owner's Story
The organization needed to streamline their 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 is the opportunity here?
How can we create a mobile strategy for Kaipatiki Project that is modern, accurate and relevant?
💡What was the solution?
I designed a mobile app experience for Kaipātiki Project with easy navigation 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
👩🏼💼David - “Nature and environmental lover”
🧭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.
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.
✍🏼Paper First
🧑🏼💻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 figuring out the above issues on the first version, our challenge was to rectify those.
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.
⬆️ 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. We observed an improvement of 15% in task completion rates compared to the previous version.
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.
3 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.
My Role
UX Designer
Timeline
3 weeks
Collaboration
5 team members
2 staff members
Platform
Figma
Impact
15% improvement in event registration rate
Sneak peek of Kaipatiki Project’s mobile designs
🧑🏼💻Product Owner's Story
The organization needed to streamline their 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?
Problem statement
When I approached volunteers, they often were not aware of events in their local community and expressed difficulties in locating where to register for these events. Currently, their website has limited information about events, and navigation is confusing. In addition, you do not get personalized event recommendations based on your location. A lack of a mobile app was also mentioned by a majority of volunteers. This situation causes frustrations for both volunteers and the organization and leads to event cancellations as a result of less turnover.
😎 What is the opportunity here?
How can we create a mobile strategy for Kaipatiki Project that is modern, accurate and relevant?
💡What was the solution?
I designed a mobile app experience for Kaipātiki Project with easy navigation 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
👩🏼💼David - “Nature and environmental lover”
🧭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.
✨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 figuring out the above issues on the first version, our challenge was to rectify those.
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.
⬆️ 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. We observed an improvement of 15% in task completion rates compared to the previous version.
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.
Other case studies
Problem statement
When I approached volunteers, they often were not aware of events in their local community and expressed difficulties in locating where to register for these events. Currently, their website has limited information about events, and navigation is confusing. In addition, you do not get personalized event recommendations based on your location. A lack of a mobile app was also mentioned by a majority of volunteers. This situation causes frustrations for both volunteers and the organization and leads to event cancellations as a result of less turnover.
🤔 What were the problems?
👨🏼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.
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
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
👨🏼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.
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
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
🧑🏼💻From Paper to Digital
I then created interactive digital low-fidelity wireframes and shared with key stakeholders to collect feedback.