Tech Fleet Non-profit App Development
Non-profit organisations face a significant challenge in retaining their volunteers due to high rates of burnout. This project aims to address this issue by developing an open-source volunteer management software solution that focuses specifically on user wellbeing.
Strategy:
Spreading the work over a team of six designers, research and develop mid-fidelity wireframes for a not-for-profit volunteer management app.
Tools:
Figma, FigJam, LucidChart, ChatGPT, Bard, Adobe InDesign, Photoshop, Illustrator and Midjourney.
Timeframe: Eight weeks.
Impact:
• Empowering Non-Profits: This project aims to equip non-profit organisations with an open-source tool specifically designed to prioritise volunteer wellbeing, leading to increased volunteer engagement and retention.
• Enhanced Volunteer Experience: By focusing on user wellbeing, the app aims to improve volunteer satisfaction and create a more positive and sustainable volunteer experience.
• Scalable Open-source Solution: The open-source nature of the app facilitates widespread adoption by non-profit organisations, potentially reaching over 10 million charities globally and impacting the lives of millions of volunteers.
Problem Statement
“Our users want a way to manage their volunteering experience because they want to have a positive impact without compromising their own wellbeing.”
.png)
Background
THE TECH FLEET MISSION
Tech Fleet is an international design collective that provides pro bono UX design and product work for non-profit organisations. In early 2023, a question was posted on Tech Fleet’s Slack forum, asking for software ideas that would be useful for non-profits.
An anonymous user talked about their experiences with volunteer burnout and suggested that a volunteer management app that addressed this issue could be beneficial to charities worldwide.
.png)
PHASE 0 RESEARCH
The four main project goals for Phase 0 were:
• Explore the business idea through UX research.
• Validate the problems attempting to be solved and identify the highest priority opportunities for the product.
• Define a foundational vision, product strategy, and target audience for a proposed product.
• Work with the client to define the priorities for a future apprenticeship that will involve research, design, product strategy and development.
Research at this point included competitive analysis of other volunteer management apps, SWOT analysis, user interviews, affinity mapping, empathy mapping, user personas and user journey maps (below).
PHASE 0 TAKEAWAYS
• Motivation to volunteer comes from other volunteers, enthusiastic staff and feeling appreciated.
• Volunteers need to feel valued and that they are making a tangible difference.
• Matching tasks to skills and abilities is important for volunteer retention.
• Clear communication and leadership are essential.
• Clear goals, timelines, and instructions are key for successful volunteer experiences.
.png)
Phase 1
THE TECH FLEET MISSION
Tech Fleet is an international design collective that provides pro bono UX design and product work for non-profit organisations. In early 2023, a question was posted on Tech Fleet’s Slack forum, asking for software ideas that would be useful for non-profits.
An anonymous user talked about their experiences with volunteer burnout and suggested that a volunteer management app that addressed this issue could be beneficial to charities worldwide.
%20(1).png)
Joyce, Laurent, Kathy, Isaac, Khine, Michelle
GOALS
Our high-level goals for Phase 1 were to:
• Define the essential features of the app
• Create a site map and figure out the app’s structure
• Develop mid-fidelity wireframes for testing
• Look at user flow through the app.
BLOCKERS
Two big questions came up at the start of Phase 1:
• Who are our users?
• Is this software for Tech Fleet users only or should it be designed for all kinds of users?
• Is the software to be primarily desktop or mobile-based?
While the research team were addressing these questions, the design team decided to take a look at our competitor's branding and UI, as well as create some mood boards. Although this didn't necessarily align with the project timeline, it allowed the design team to stay productive during the delay.
COMPETITIVE BENCHMARKING & BRANDING
To begin looking at branding for our non-profit software, I first wanted to see what our competitors were doing. I rounded up eight other organisations that already exist in a similar space and assessed how they presented themselves. Reoccurring themes included: Colours such as purple, green and orange | Friendly, rounded fonts | Lowercase lettering | A smile motif.
MOOD BOARDS
Next up, we wanted to round up the visual elements that represent our software with some FigJam mood boards. For my mood board, the adjectives I wanted to embody were: Positive, uplifting, inspiring, motivating, empowering, supportive, welcoming, inclusive, balanced, harmonious.
Starting with some research on Dribbble for inspiration, I collected stock imagery, illustrations, icons, fonts and colours that represented my vision of the app.
.png)
Information architecture
APP STRUCTURE
With the first of the two questions answered (the software would be open source and designed for all users), we could move on with the project and look at the structure of the app. Because the app would be used by both volunteers and organisations, to my mind, there would be two user paths. For the volunteers, I defined their three main needs as:
• Finding volunteer opportunities.
• Managing their ongoing volunteering projects.
• Manage their well-being to prevent burnout.
And for the non-profit organisations that use the software to manage their volunteers, their basic needs would be to:
• Create events and projects.
• Manage those projects and the volunteers involved.
• Give feedback and appreciation to their volunteers.
Wireframes
If we improve how we match volunteers with projects based on their interests, they are more likely to stay engaged and avoid burnout.
Providing more support and building a sense of community will make volunteers more likely to finish what they start.
LOW-FIDELITY WIREFRAMES
We were then each assigned different areas of the app to look at before wireframing. My first area was the ‘Task Assignment’ section of the app which would be:
• A page where the organisation can post available tasks, along with detailed descriptions, time commitments, and any special requirements.
• Allow volunteers to filter tasks based on their interests, availability, and location (if relevant).
Taking to FigJam, I drafted each screen necessary to get from initial log in to the Task Assignment area, arriving at a low-fidelity draft of the page.
Another one of the sections I wireframed was the scheduling tool or calendar page.
This would be a feature that allows volunteers to specify their availability and preferences for volunteering, accessible from the features hub or home screen.
INDIVIDUAL SCREENS
At this point, word came back from the research team that the app would be mobile-based rather than starting with the desktop software. Changing from a desktop layout to mobile screens, sketched wireframes of each individual screen in my assigned flow were next up. These sketches would provide the framework for my low-fidelity Figma wireframes.
MID-FIDELITY WIREFLOWS
After deciding what wireframe library we would all use (to maintain consistency) and before taking our sketches into Figma, the team had some decisions to make.
1. What size screen would we design for first?
2. What should be in our final navigation bar?
After research and discussion, the team opted for designing iPhone 13/14-sized screens and the final bottom navigation included: Home | Explore | Community | Chats | ProfileThis navigation bar would be tested on users in Phase 2.
At this stage, the team added a bit more detail to our wireframes to make them mid-fidelity. Filler text was used instead of Lorem Ipsum and button hierarchy was indicated with use of shading.
Pages were also linked together to create wireflows.
To take a tour through the “choosing project” flow and the “calendar” flow, click below.
Mission Statement
“Our vision is to empower and inspire volunteers worldwide by providing a seamless and intuitive platform that optimises their efforts and time, enabling them to make a meaningful and lasting impact in their communities.”
Key takeaways
Despite encountering roadblocks, our team successfully completed Phase 1 ahead of schedule. We not only produced mid-fidelity wireframes for Phase 2 testing but also initiated preliminary work on potential branding and UI. This phase provided valuable insights:
• Practical timelines can be flexible and non-linear. While branding and UI design typically commence later in the development process, initiating this work early allowed the design team to remain productive during delays.
• Determining the product's primary focus — desktop or mobile — early on saves time and effort later. This decision significantly impacts design decisions from low-fidelity mockups onward.
• Our team engaged in extensive discussions regarding the content of our navigation bar. To ensure optimal user experience, extensive user testing will be crucial in the next phase of the project.
• Consistency is key. While the appearance of our team's wireframes wasn't critical at the low-fidelity stage, adopting a shared elements library facilitated stakeholder comprehension and ensured consistency across mid-fidelity designs.
Key features
Over the course of the two phases completed so far, features that our app would need to manage burnout included:
• A wellbeing check-in. This feature would be accessible from the home screen and manage any symptoms of burnout.
• A community hub with in-app chat facility. Interacting with other volunteers would help users feel part of a team and address any issues with other users.
• Organisation feedback. The charities would be able to provide feedback to their volunteers, increasing user satisfaction.
• Volunteer feedback. The volunteers would also be able to provide constructive feedback to improve how charities interact with their teams.
• A ‘Rest Notification’ alert. The app would track the amount of time spent volunteering and alert the user when it’s time to take a break.
• Badges, certificates and achievement awards. User would be awarded various shareable badges, certificates and rewards for hours spent, tasks/projects completed, etc.
• A calendar facility to manage users’ commitments.
• A ‘Task Tracker’ to manage individual tasks within projects.
Phase 2 will commence in 2024 and culminate in a high-fidelity prototype to pass onto the development team in Phase 3.
Proof of concept
Although our software still needed extensive user testing at mid-fidelity level, I wanted to create a high-fidelity prototype as a proof of concept and to provide stakeholders with a clear visual representation of the app's potential functionality. To achieve this, I developed branding elements using the app name "Support Squad".
%20(1).png)
I then created high-fidelity screens of the ‘browse opportunities’ flow. Our team had previously discussed using illustrations rather than imagery in our app’s design as a way to ensure inclusivity and diversity. Upklyak’s illustrations on Freepik perfectly fit the bill.
.png)
Design features in my prototype included a warm colour palette, inclusive illustrations and rounded, friendly icons. View my prototype below...
Next project >