inspireED
Rethinking how parents, students, and community members can connect to volunteer with school districts.
My role: Research, UX, UI
Duration: 100 hours
Software Used: Figma, FigJam, Miro, Pixton, Maze, Adobe Photoshop
Introduction
inspireEd is an education based app that facilitates matching local volunteers with the volunteer needs of schools, teachers, club supervisors, and coaches. An inspireED user will log in with their district code and customize their experience to fit the schools they would like to connect with, the interests they have, and the level of participation they are comfortable with.
Find detailed information on upcoming events and projects.
Get motivated to help by seeing what friends are up to.
Browse past events and see the impact volunteers have made.
Background
A local community and school district have a volunteer program for high school age students. If they give 175 hours of their time back into the schools and community between their freshman year and the time they graduate, they can earn special recognition at graduation. One reason the district promotes this is because they understand the benefits of volunteering. According to an article in BMC Public Health, “participation in voluntary services is significantly predictive of better mental and physical health, life satisfaction, self-esteem, happiness, and lower depressive symptoms.”
The school district regularly requests volunteer help in classrooms, for special school events, athletics, performing arts, and clubs and organizations. The methods of volunteer requests vary teacher by teacher, school by school, and are often not clearly defined or are easy for the volunteer to access and manage. In a time where everyone is extremely connected digitally, but not always feeling truly connected, promoting and making volunteerism easier in schools and the community, might inspire adults and youth to find a sense of connection and purpose they are seeking while helping others in the process.
My goal was to discover how people currently find and sign up for volunteer opportunities in their community. I wanted to uncover what makes people volunteer with schools, organizations, or businesses and if they have frustrations with the process.
Research
Competitive analysis
To start my journey into learning more about what service apps and websites are currently available to people, I completed a competitive analysis. I explored four different volunteer apps and platforms. I looked for their strengths, weaknesses, opportunities, threats, and general features. A feature comparison is shown below.
Competitive analysis findings
The volunteer app market offers a range of options with several apps focused on matching volunteers to organizations and offering comprehensive listings of opportunities. However, there are few that specifically target school districts and allow users to sign up directly through the app.
While some apps excel in presenting many volunteer opportunities, their UI design is lacking. Their primary focus is content and the process of signing up, with less emphasis on aesthetics. On the other hand, apps with stronger UI design often lack the functionalities required to set them apart. While these apps tend to be more accessible, they struggle to compete with the larger platforms.
One volunteer app provided a unique dual-functionality platform with an administrator interface for event creation and a volunteer interface for sign-up. While this promoted control over the organization involved and their events, it did lack the ability for users to connect with each other and volunteer together.
Another app gamified the experience by tracking the hours earned and focused on connections with friends. However customization of opportunities was absent from this app and it had limited volunteer options.
Opportunities found
My analysis of current competitors reveals an opportunity for a new app catered specifically to schools. It could focus on an accessible and visually appealing experience, while still functioning at a high level empowering users to:
- easily discover and register for detailed volunteer events
- connect and collaborate with others in their community
- see the impact of their volunteer hours through visuals and results
- conveniently track their hours, if desired
This app could be seamlessly integrated into high school programs or school initiatives such as Silver Cord, where students could utilize it to enhance their volunteer experience. Parents and community members could also sign up and engage in meaningful volunteer opportunities.
Market research
Market research was conducted in order to understand the current market for volunteer based apps. According to an article published on census.gov, “The research reveals that despite the devastating impact of the COVID-19 pandemic, the U.S. population continued to serve each other and their communities – giving their time and talent to help others at an time of unprecedented need.” According to another article, “The current outlook of the volunteer management platforms market is positive and witnessing steady growth. With increasing emphasis on social responsibility and community involvement, the demand for volunteer management tools has surged in recent years.” Knowing the market is positive for this type of platform, I wanted to then take a look at the user and focus on their frustrations and needs with current methods of learning about and signing up for volunteer opportunities. To learn about their experiences, I set up user interviews in person and virtually.
User interviews
Five interviews were conducted. Three were conducted in person and 2 were conducted virtually over Google Meet.
All participants had experience volunteering in their community.
Four participants had volunteered recently for school related events.
1 participant was a teacher that had experience volunteering and requesting volunteers.
User survey
To gain deeper insights into the needs, habits, and interests of potential users, I conducted a survey targeting individuals that frequently volunteer. The survey data revealed three key findings.
Observation one
Survey results indicated that individuals discover volunteer opportunities through a variety of methods. Email communication seems to be the most prevalent, however this is dependent on if they had previously volunteered.
Observation two
Volunteer participants expressed a strong preference for detailed opportunity descriptions. Specific instructions regarding their task and clarity on any expectations. They want to know what they are getting into and would like to use their time to help when they are there.
Observation three
Survey participants indicated a strong desire for features that allow users to connect and collaborate with friends. They would feel more comfortable if they could volunteer together.
Users would like detailed descriptions of volunteer opportunities before signing up and helpful communication throughout the process.
All participants felt it was important to be transparent on what the volunteer job would include. Highlighting specifics that would be necessary to know about ahead of time (active, outdoors, if your children could come, messy). Additionally, participants valued pre-event reminders of more specific details on where to meet and what to bring to ensure they were properly prepared.
Users would like to customize the volunteer opportunities that they see in order to find ones that relate to them.
Participants expressed frustrations that the amount of emails received from school related events and teachers is almost unmanageable, especially if they had multiple children in a variety of schools. Being able to customize an experience, choosing schools and events that they would like to help with, and having teachers and school personnel post those needs on an app, was a potential solution that might reduce the reliance on email communication for volunteer requests. Most frustrations with volunteering came from school related events.
Users would like to know that their time is valued and appreciated and that they have made an impact.
Participants stated that it is important for organizations to value the volunteer’s time. They emphasized the importance of offering shorter time shifts whenever possible. Making sure that there is a designated contact person who is present at the start of each shift to avoid unproductive waiting periods. When the shift is over, participants would like to access the results of the whole project or view the impact they have made.
Users would like to connect with others.
Research identified a strong desire to be able to connect with others on the app. Participants expressed they would like to connect with people they know and possibly sign up for the same events. They would like to be able to share what they are doing with friends. Most participants stated that they would positively persuaded to sign up if they knew an friend was already registered.
POV
I'd like to explore ways to help busy high school students, parents of school age children, and community members find and sign up for volunteer opportunities in a district and community that are completely transparent because many people would like to help out but may be nervous to do so because of not knowing what to expect.
How might we...
- help busy high school students, parents of school age children, and community members find and sign up for well defined volunteer opportunities that fit their interests and personalities so that they are more likely to volunteer again?
- help volunteers see the results of their efforts and the impact they have made, and feel appreciated so that they feel good about volunteering and continue to help in their community?
- help aspiring volunteers learn about who is volunteering for an event so that they can feel comfortable with signing up because they know someone there?
Define
Problem
Users are often emailed with volunteer requests from organizations, schools, churches. There is no uniform method in which to sign up. The methods vary by teacher or organizer.
Users have stated that it is often not clear exactly what they are signing up for. This leads to pre-event nervousness or anxiety. Concerns on if they will be able to complete the task, help efficiently, if they are dressed appropriately, or bring the correct materials.
Research participants stated that they sometimes feel that their time is not valued when volunteering. Many have had instances where they are just standing around, not knowing where to start.
Solution
My solution is to design a centralized volunteer app for high school students, parents, and community members where they can connect with local school opportunities efficiently and transparently. Users could sign in, view or find, and sign up for volunteer opportunities posted by the local schools, teachers, coaches, and club sponsors.
Create a volunteer app that includes:
- detailed onboarding quiz that will customize the user’s experience for volunteer school connection, interests, and comfort level
- clear information about the event including a map, location, date, times, contact person, thorough description of duties, and highlighted details to note
- simple and organized event sign up process with ability to add to the mobile calendar
- shifts that are manageable in time
- results of the volunteer efforts in the district
- a way to friend others and see their upcoming participation
- time tracking option
- simple methods for changing shifts or cancelling a volunteer sign up
- ability to see past and manage upcoming events
Storyboard
App features
Based on the defined problem and my possible solutions, I started to brainstorm features that would make this app helpful to those wanting to volunteer. I focused on features that were necessary for the app to function and also those features that set it apart from other volunteer based apps. While user research indicated interest in guest access for app exploration, I decided to remove this option and prioritize safety of students, staff, and parents. App users must be associated with the district in order to sign up and view district events.
- Account creation
- Onboarding quiz
- Find volunteer events
- Sign up for volunteer events
- Add to calendar
- Event confirmation
- Edit upcoming events
- Favorite events
- See the impact of past events
- Customizable preferences
- Time log
- Find and connect with friends
- Manageable time shifts
- Notifications
- Volunteer appreciation
- Profile
Identifying the user
Utilizing what I learned from my market research, my competitive analysis, my user survey, and my user interviews, I created user personas that represent the audience I want to target. Julia is a dedicated parent that would like to help out in the schools when possible. She has a busy schedule so prioritizing ease of use, having shorter shifts, and connecting with specific schools and activities will be important. Utilizing insights from Julia, I created a user journey map outlining her potential thoughts and emotions as she experiences inspireED.
Persona
Journey map
Sitemap
I constructed the inspireEd sitemap from the insights gained during research and user feedback on app features. I wanted to have the main options available from the home screen and the navigation menu so that users could easily access what they need without having to dig around the app. I wanted users to have access to the information that they submitted in the onboarding process, this information is filed under account and volunteer preferences. If at any time their interests change or when their child changes schools, this information can be updated.
inspireED sitemap
The sitemap was developed to show the structure and hierarchy of the app.
User and task flows
After a sitemap was constructed, user flows and task flows were created to map out the user experience with the features of the app. Both the user and task flows helped me revise and solidify the site structure and streamline the user experience. These flows were edited many times throughout the process in order to maximize usability.
User flow 1
This first user flow displays how a user could go through creating an account and customizing their experience. You will notice many decisions during onboarding and preferences to be set for the user to maximize the app’s capabilities.
User flow 2
The second user flow maps the user experience of finding and signing up for an event. As you can see, many decisions are made during this process. This process should be as easy as possible so users find what they are interested in and sign up to volunteer.
Task flow 1
Task flows were created to demonstrate how a user would accomplish tasks on the app. This one indicates how a user would sign up for an event.
Task flow 2
On my next task flow I wanted to think about how a user would move through the onboarding process.
Task flow 3
My next task flow shows how a user could see what their friends are signed up for in order to help them make a decision.
Design
Low and mid-fidelity wireframes
Following the creation of user and task flows, I moved on to sketching ideas for the app interface. During my initial sketching I uncovered opportunities to refine the site structure and make iterations on the user and task flows. These were made to enhance the user experience. Based on these insights, I adjusted the flows and continued brainstorming design solutions. I initially was not going to have a home dashboard but recognized there was potential for user confusion if upcoming events was the first screen users see. I researched different UI design ideas and envisioned a solution that was inspired by a Bento Grid. This design solution gives a fun, modern, and flexible feel while keeping the home page organized and providing a welcoming entry point to the functions of the app.
Click designs to expand
Low-fidelity wireframes
Mid-fidelity wireframes
Low and mid-fidelity wireframes
Following the creation of user and task flows, I moved on to sketching ideas for the app interface. During my initial sketching I uncovered opportunities to refine the site structure and make iterations on the user and task flows. These were made to enhance the user experience. Based on these insights, I adjusted the flows and continued brainstorming design solutions. I initially was not going to have a home dashboard but recognized there was potential for user confusion if upcoming events was the first screen users see. I researched different UI design ideas and envisioned a solution that was inspired by a Bento Grid. This design solution gives a fun, modern, and flexible feel while keeping the home page organized and providing a welcoming entry point to the functions of the app.
Click designs to expand
Low-fidelity wireframes
Mid-fidelity wireframes
Low and mid-fidelity wireframes
Following the creation of user and task flows, I moved on to sketching ideas for the app interface. During my initial sketching I uncovered opportunities to refine the site structure and make iterations on the user and task flows. These were made to enhance the user experience. Based on these insights, I adjusted the flows and continued brainstorming design solutions. I initially was not going to have a home dashboard but recognized there was potential for user confusion if upcoming events was the first screen users see. I researched different UI design ideas and envisioned a solution that was inspired by a Bento Grid. This design solution gives a fun, modern, and flexible feel while keeping the home page organized and providing a welcoming entry point to the functions of the app.
Click designs to expand
Low-fidelity wireframes
Mid-fidelity wireframes
Mid-fidelity usability testing
After developing my mid-fidelity wireframes, I wanted to complete a few usability tests. These tests were to evaluate user interaction with the app architecture, test navigation clarity, gather feedback on the onboarding process, and test out the dashboard functionality.
Overall feedback was positive and no drastic changes were needed to be made. Users acknowledged that this is not an app you would just stumble upon, it would be recommended by the school district so the onboarding preferences were an appropriate length and would be important to keep.
Several valuable suggestions were made:
- On event pages, adding details about materials that would be helpful to bring to enhance user preparedness.
- Adjusting the shift information to be clicked on as a link to a pop up so that users are not clicking a volunteer button two times.
- Adding more details in the friends section as users felt this would be a great feature.
- Showing hours served under past events as well as in the time log would be nice for those casually keeping track.
Brand design
Moodboard
To establish a brand identity for the app, I began by exploring other volunteer websites, service apps, non-profit organizations, and coming up with brand values. I explored images, colors, textures, and example app screens to find inspiration. I consolidated the inspiration into a cohesive moodboard representing the brand values and aesthetics.
Logo
I came up with the inspireEd logo after many hours of sketching and exploration on Canva, Figma, and Adobe Photoshop. I requested feedback from other designers and narrowed down my ideas. I initially explored two distinct directions. One being “helping hands” and the other of “people coming together to help.” The resulting wordmark and logo effectively emphasizes the education aspect of the app and the excitement and collaboration of volunteering.
Typography
I chose the font, Quicksand, a clean and contemporary sans serif font that has an education feel. This font was used for the main paragraph text and headings of the app. It sizes well in buttons and headings. Beyond aesthetics, this font’s tall x-height prioritizes accessibility by ensuring optimal readability on mobile devices. To further enhance clarity, I used different weights and sizes throughout the app. I increased the letter spacing on the body text and smaller elements to help with accessibility. I decided to add labels on my navigation menu because my pages and icons were not traditional. I chose all caps on those labels so they were consistent in height and did not distract from the icons.
Colors
A primary hue of royal blue, and secondary sea green and mustard yellow hue were chosen to represent the trustworthiness and helpful purpose of the app along with focusing on a positive and optimistic experience. All font colors were tested against backgrounds for readability and scored an AA 4.5 or higher to meet or exceed accessibility standards.
High-fidelity wireframes
Once I decided on the brand identity, I began to work on the high fidelity wireframes. Within Figma, I defined the grid styles, text styles and color styles and began to develop components and construct an organized UI kit. This was created to ensure visual consistency and a cohesive app design. I used my mid-fidelity wireframes as a guide but made changes as needed along the way.
UI Components
High-fidelity wireframes
Click designs to expand
High-fidelity wireframes
Once I decided on the brand identity, I began to work on the high fidelity wireframes. Within Figma, I defined the grid styles, text styles and color styles and began to develop components and construct an organized UI kit. This was created to ensure visual consistency and a cohesive app design. I used my mid-fidelity wireframes as a guide but made changes as needed along the way.
UI Components
High-fidelity wireframes
Click designs to expand
Prototype
Usability testing and insights
To evaluate the app’s functionality and user experience, I was able to conduct unmoderated usability tests through Maze as well as moderated tests on Google Meet. The combined insights from these tests provided me with guidance on how to iterate to prepare the app for real-world usage.
Testing the sign up and onboarding quiz
The first task flow that I tested was the process of signing up for an account with inspireED. All users were able to easily sign up for an account and move through the onboarding quiz. It took on average 1 minute and 24 seconds to complete. Tests revealed two areas of improvement:
- One area on the school connections page was continuously overlooked because of the fixed next button. I decided to add a scrolling indicator – arrow that reinforces the scroll. When tested again this improved discovery and navigation.
- Users also brought up the question of toggles versus checkmarks. While the intention was to evoke a sense of activation, user feedback and further research showed me that checkmarks would be a better design choice.
To enhance user accessibility and guidance, I incorporated labels on the active state of my input fields. These labels seamlessly transition above the active input field when the user clicks, ensuring clarity in case the user temporarily forgets the required information. This design decision was made to keep the overall clean and minimalistic look of the sign up and log in screens.
Signing up for a volunteer event
The second task flow I evaluated was signing up for a volunteer event and adding it to the calendar. Users successfully completed event signup within an average of one minute. Participants appreciated the details, the ease of finding a shift that would be doable, and the ability to directly add it to their calendar. They liked the clear user interface with the convenient fixed button so they didn’t have to scroll down if they knew they wanted to sign up. They also appreciated the ability to see who else was signed up. Based on user feedback I made one change in prototyping. This was to make the whole time shift card clickable instead of just the radio interactive element.
Find your friend's events
The third task of accessing a friend’s volunteer event list, was easily completed. All participants successfully accessed the friend page and found the volunteer events that Ashley was signed up for. This took on average about 9 seconds. Feedback was very positive over this feature and users were excited that the tasks under Ashley would also be clickable so they could sign up directly from there. Based on user feedback, minor adjustments were made here. The font color was changed to emphasize that it was clickable text.
Cancel an event
The final task flow evaluated the process of canceling a previously registered event. All users were able to successfully complete this task within an average of 16 seconds. Users appreciated the flexibility offered with the options of changing a shift or canceling the task. One user hesitated on the home screen prompting further design refinement of the order on the home screen as well as renaming the calendar button to “Manage your upcoming and past events.” These changes hopefully help differentiate the time log from current events. I also chose to darken the colors and unify the spaces between buttons to improve the visual appearance of the home page.
User feedback
“As a former teacher, I would have loved a way to streamline volunteers.”
“Feel of the app and design choices are strong.”
“This app feels like it would belong in education. It is very schoolesque.”
Task flows & final prototype
Task 1: Sign up for an inspireED account and choose your child’s school (8-9 Timberline) and main activity (show choir). The other interests, interactions, and notifications are up to you.
Task 2: Find and volunteer for setting up the carnival fundraiser.
Task 3: Find your friend Ashley and look through the events that she is signed up for.
Task 4: Something has come up and you need to cancel your volunteer opportunity with the carnival fundraiser.
Explore the final prototype (scroll below flow 4).
Reflect
If I had more time I would:
- conduct comprehensive research and gather insights from teachers, coaches, and club sponsors
- develop the administrator interface that teachers, coaches, and club sponsors would use
- show how a teacher, coach, principal, or club sponsor would log in, create posts for requesting volunteers on the admin interface
- expand my usability testing with a larger and more diverse group
- add animation to the primary button so there is an interactive element when tapped
- design the time log feature so that high school students could submit their log for graduation requirements, or other adults that turn in hours for various reasons could use this feature as well
- design the favorites screen to allow users to bookmark favorite events for future consideration
What I learned:
This project has expanded my learning of UI/UX design.
My research revealed that while I anticipated a need for organization and management within traditional volunteering, frustrations surrounding volunteering with education proved to be a common theme. Guided by these results, I took the project a different direction than what I initially expected.
The importance of a comprehensive UI kit was reinforced while developing wireframes. Its implementation ensured consistency in branding, component creation, and overall identity of the inspireED app.
Beyond technical skills with using Figma, I gained a deeper understanding of the purposes of interactive UI elements such as toggle switches, checkboxes, radios. The knowledge I gained will help me make future design decisions that are familiar to users and accurate for development.
Final thoughts:
I am proud of how the visual elements of this design came together. Selecting appropriate colors, fonts, icons, and imagery can be a challenging process, requiring careful consideration of whether they effectively represent the identity and values of the brand. I feel like the UI design of inspireED ended up representing everything that I had set out for.
Additionally, the app’s design addresses the user needs and pain points identified during research. Users that use inspireED to volunteer in school related activities and events will have a positive experience that will motivate them to volunteer more often.
Sources
Schneider , E., & Marshall, T. J. (2023, June 13). At height of pandemic, more than half of people age 16 and over helped neighbors, 23% formally volunteered. Census.gov. https://www.census.gov/library/stories/2023/01/volunteering-and-civic-life-in-america.html
Torphy, J. (2023, December 3). Volunteer management platforms market: Exploring market share, market trends, and future growth. Medium. https://medium.com/@jackytorphy/volunteer-management-platforms-market-exploring-market-share-market-trends-and-future-growth-b43b40df1283
Yeung, J. W. K., Zhang, Z., & Kim, T. Y. (2018). Volunteering and health benefits in general adults: cumulative effects and forms. BMC Public Health, 18(1). https://doi.org/10.1186/s12889-017-4561-8
View other case studies
Blissful Bites Bakery – A responsive website that meets the needs of customers including an online create-a-cake customizer and an easy check out process
San Diego Zoo App – adding a scavenger hunt feature that provides children and adults an interactive and engaging new way to experience the zoo