Community Service
Website & App
This project was for a fictional website and app that allows potential volunteers to connect with local community service organizations in their community.
My Role:
Sole UX/UI Designer
Project Duration:
November - December 2023
The Problem:
People want to give back to their community through community service with local organizations, but many people don't know where to start. It can be hard to find something that aligns with schedules or passions.
The Goal:
The website and app will allow people to find opportunities in their community that align with their schedules. It will allow them to discover organizations that are doing work they are passionate about and share opportunities to get involved.
Understanding the User
User Research: Summary
I began the project by understanding the frustrations and roadblocks users faced while looking to be involved in community service. This research guided the ideas of features that should be included in the website and app.
User Research: Pain Points
1
Starting
Users want to be involved in community service, but often feel overwhelmed knowing where to start looking for opportunities.
2
Schedule
Users have busy schedules and want volunteer opportunites that fit into their life. They struggle to find this opportunities though.
3
Passions
Some users have specific causes they are passionate about and would love to support, but they aren't sure what organizations in their area are focusing on those needs.
User Personas
Problem Statement
Jerome is a busy pre-med college student who needs a way to easily find volunteer hours for his scholarship because his schedule is tight and his availability is limited.
.png)
Problem Statement
Sondra is a retired grandma excited to get involved in her community who needs a way to find opportunities she's passionate about to fill her days because she's overwhelmed with where to start looking for community service options.
Competetive Analysis
I researched several volunteer sites and local organization's volunteer pages. I found that many did not have a great way to search for opportunities nor did they give a lot of information about the opportunity. The site that did include filters did not have a way to filter by schedule, which is a big concern uncovered in user research. This analysis guided my design, leading me to prioritize filters and clear information about what was required to volunteer.
Starting the Design
Information Architecture
I created a site map to think through the user experience and the pages I would need to create. I used a hierarchical model to best organize information for users.
Wireframes
I used sketching and paper wireframes to ideate layouts for the website and app. After selecting the best elements from the sketches, I created digital low-fi wireframes and prototypes.
App Wireframes
Mobile Wireframes
Tablet Wireframes
Desktop Wireframes
Refining the Design
Iteration
After developing low-fi prototypes, I conducted a usability study to identify any gaps in my design and find room for improvement before moving to higher-fidelity prototypes.
Research Insights
1
Confirmation
Users noted surprise that they didn't have a screen to preview what they had entered in the sign up before they completed the task.
2
Filters
Users noted that on the desktop version especially, it would be helpful to see what filters had been selected without reopening the menu.
3
Visual Interest
Some users weren't sure the format the opportunities was presented in was the best way to find their selection and were curious what other layouts would look like.
Before
After
Before
After
UI Sticker Sheet
Mockups
Using the findings from the usability study and Gestalt principles, I created high-fidelity mockups for an app version of the service as well as a responsive website (mockups for mobile, tablet, and desktop).
App
Mobile
Tablet
Desktop
Prototype
After final usability testing, I turned the mockups into prototypes.
App
Desktop
Summary
Accessibility
1
High Contrast
All color choices were tested to ensure they exceeded the contrast requirements based on WCAG guidelines.
2
Clear Text
Text was formatted in a simple, straightforward manner to work optimally with screen readers, inlcuding through the use of clear headings.
3
Responsive
Variations of the website were created for different screen types to ensure the content remained accessible for all users.
Impact
This project may be for a fictional service, but in the real world, this would have a big impact on the community. Users could find organizations doing work they are passionate about and find ways to get involved. This would benefit those looking for ways to give back, those needing volunteer hours, and the organizations who need volunteers to operate. This site would greatly impact all users and communities.
Takeaways
This project was a great learning opportunity for me. I continued to grow in my skills of thinking through the user's perspective and creating designs that met their needs. I also gained skills as I considered differences in apps vs websites, we well as continuing to grow in my responsive design skills. I used progressive enhancement in my design to ensure that users could successfully use the product no matter their device.