GoodNeighbor

User Experience Design
Project Overview
GoodNeighbor is a non–profit organization dedicated to fostering community engagement by connecting individuals with meaningful volunteer opportunities. The primary goal of the GoodNeighbor project was to design an intuitive and user-friendly platform that effectively bridges the gap between community members and non–profit organizations in need of volunteers. This case study was created as part of Google UX Design Professional Certificate program.
My Contributions
As the UX designer in charge of the mobile app and responsive website design for the GoodNeighbor project, I led the entire process from start to finish. My responsibilities included conducting user research, analyzing competitors, creating wireframes (both on paper and digitally), developing prototypes, iterating on designs, establishing information architecture, and implementing responsive design. My goal was to deliver an intuitive and engaging platform that allows users to easily connect with volunteer opportunities and actively contribute to their communities.
mockups of the GoodNeighbor mobile app on an iPhone and the GoodNeighbor responsive website on an iPad

The Process

Understanding the user

User research

As part of the research process, I conducted user interviews to gain insights into the target users and their needs.The interviews revealed that users prioritize an easy-to-use platform for searching and exploring non-profit organizations in their community. Key findings include the users' preference for a website that is both simple and easy to navigate, while offering robust search functions. Specifically, users expressed the need to find organizations that align with their skillset and availability. These findings highlight the importance of creating a streamlined and intuitive user experience that addresses these specific user requirements.

Personas

Priti's persona show a short bio, goals, frustrations, a quote, and short paragraph about her.Charle's persona show a short bio, goals, frustrations, a quote, and short paragraph about him.

Problem statements

Priti, a high school student enrolled in an honor's program, needs to find suitable volunteer opportunities to fulfill the program's requirements.

Charles, a retired art teacher, seeks opportunities to actively engage with his community in order to utilize and contribute his artistic and teaching skills effectively.

Competitive audit

a screenshot of an excel spreadsheet comparing features among four of GoodNeighbor's competitors.

An audit of competitors, both direct and indirect, offered valuable insights into areas of improvement and opportunities to enhance the GoodNeighbor website and mobile app.

Ideation

hand drawn sketches showing different ideas for the GoodNeighbor mobile app

During a brainstorming session, I employed the Crazy Eights ideation exercise to generate a diverse range of layout options and design elements. With a primary focus on creating a beneficial and user-friendly app for both volunteers and non-profit organizations, I rapidly explored innovative ideas.

Starting the design

Digital wireframes

As part of the research process, I conducted user interviews to gain insights into the target users and their needs.The interviews revealed that users prioritize an easy-to-use platform for searching and exploring non-profit organizations in their community. Key findings include the users' preference for a website that is both simple and easy to navigate, while offering robust search functions. Specifically, users expressed the need to find organizations that align with their skillset and availability. These findings highlight the importance of creating a streamlined and intuitive user experience that addresses these specific user requirements.

wireframe for the GoodNeighbor mobile app's home screenwireframe for the GoodNeighbor mobile app's screen that allows user to scroll through different volunteer events.wireframe for the GoodNeighbor mobile app's confirmation screenwireframe for the GoodNeighbor mobile app's event page

Low-fidelity prototype

To facilitate user testing, I developed a low-fidelity prototype that connects the main user flow of event selection and volunteer sign-up. This prototype serves as a preliminary representation of the app's functionality and allows for valuable insights during the testing phase.

screenshot showing the connections between low-fidelity screens depicting the user flow

View GoodNeighbor's low-fidelity prototype.

Usability studies

  • Study type: unmoderated usability study
  • Location: United States, remote
  • Participants: 5
  • Length: 15–20 minutes
  • Finding 1: Users want to know the exact address of an even before signing up to volunteer.
  • Finding 2: Users had difficult returning to the homepage.
  • Finding 3: Users want a way to contact the event's organizer

Refining the design

Mockups

As part of the design improvements, I added the organizer's contact information to the sign up screen. This allows users to easily reach out with any questions or inquiries before registering, promoting effective communication and a more user-friendly experience.

Based on insights from the usability studies, I included the event's specific location on the event page. The user can now view the event's address prior to advancing to the sign up screen.
before showing a low-fidelity wireframe for the event page. an arrow points to the after showing a high-fidelity mockup with improvements for the even page.before showing a low-fidelity wireframe for the event page. an arrow points to the after showing a high-fidelity mockup with improvements for the event page.

High-fidelity prototype

The high-fidelity prototype follows the same user flow as the low-fidelity prototype including changes influenced by the usability studies.

shows connection between high-fidelity mockup screens to depict the main user flow

View GoodNeighbor's high-fidelity prototype.

Accessibility

The app's focus on events that are either in close proximity or starting soon enables users to easily discover opportunities that are most relevant to their needs, emphasizing accessibility and convenience.
The implementation of a high contrast color scheme enhances the usability of the website and mobile app for individuals with visual impairments.

Scaling the design

Information architecture

With the designs completed, I focused on the information architecture for the responsive website. The sitemap helped to guide the website’s organizational structure and ensures a consistent experience across devices.

a sitemap showing the information architecture for the GoodNeighbor website

Responsive design

When designing for various screen sizes, including mobile, tablet, and desktop. I optimized the layouts and elements to ensure a consistent user experience while addressing the specific requirements of each device and screen size. This approach guarantees that users have an optimal experience regardless of the device they are using.

mockup of the homepage of the GoodNeighbor mobile app on an iPhonemockup of the GoodNeighbor website on an iMacmockup of the GoodNeighbor responsive website on an iPad

Further Considerations

Next Steps

The next steps in design process include conducting additional usability studies to ensure that the app effectively caters to the needs of non-profit organizers. Furthermore, implementing filters that allow users to sort events based on the required skillset will enhance the app's functionality and user experience. Additionally, integrating a history statement feature will enable users to easily track and share their volunteer hours, promoting engagement and a sense of accomplishment. These steps will contribute to further improving the app's usability, customization, and engagement for both users and non-profit organizers.

Takeaways

The impact of the GoodNeighbor website and mobile app was evident through user feedback, with users expressing how it made volunteering easier and more convenient. A user specifically praised the app, stating, "The GoodNeighbor app is incredibly user-friendly and serves as a fantastic tool for non-profits."

Through the process of designing the GoodNeighbor app and website, I gained a valuable understanding of the significance of addressing the needs of two distinct user groups: volunteers and organizations. It became evident that a successful design needed to consider the requirements of both parties to ensure a seamless and effective user experience.