Ag
CommuneCare
CommuneCare
CommuneCare
Volunteer, Donate & Community App
Volunteer, Donate & Community App
My Role: UX reseacher, UI designer
My Role: UX reseacher, UI designer
Project
Overview
Project
Overview
Project
Overview
CommuneCare is a mobile app and responsive website designed to bridge the gap between community members and essential resources like food and clean water. The platform facilitates donations, volunteer sign-ups, and resource reporting, aiming to foster community support and improve access to vital resources.
CommuneCare is a mobile app and responsive website designed to bridge the gap between community members and essential resources like food and clean water. The platform facilitates donations, volunteer sign-ups, and resource reporting, aiming to foster community support and improve access to vital resources.
CommuneCare is a mobile app and responsive website designed to bridge the gap between community members and essential resources like food and clean water. The platform facilitates donations, volunteer sign-ups, and resource reporting, aiming to foster community support and improve access to vital resources.
Process
Process
Process
Research
Research
Conducted user interviews and gathered insights to understand user needs.
Developed personas representing key user groups, including community members, volunteers, and donors.
Conducted user interviews and gathered insights to understand user needs.
Developed personas representing key user groups, including community members, volunteers, and donors.
UX
UX Improvement
UX Improvement
Defined problem statements and identified key features required for the app.
Created user journey maps to outline the user experience from start to finish.
Defined problem statements and identified key features required for the app.
Created user journey maps to outline the user experience from start to finish.
UI
UI design
UI design
Created low-fidelity wireframes for essential screens, including the home page, resource listing, donation form, and profile page.
Developed high-fidelity prototypes incorporating feedback from usability testing & established a color scheme, typography, and iconography for a cohesive and user-friendly interface.
Created low-fidelity wireframes for essential screens, including the home page, resource listing, donation form, and profile page.
Developed high-fidelity prototypes incorporating feedback from usability testing & established a color scheme, typography, and iconography for a cohesive and user-friendly interface.
Research
Research
Research
The primary goal of the research was to gain a deep understanding of how individuals and communities interact with local resources (such as food and clean water), what barriers they face in accessing these resources, and how technology could bridge the gap to foster community support, volunteering, and donations.
The primary goal of the research was to gain a deep understanding of how individuals and communities interact with local resources (such as food and clean water), what barriers they face in accessing these resources, and how technology could bridge the gap to foster community support, volunteering, and donations.
The primary goal of the research was to gain a deep understanding of how individuals and communities interact with local resources (such as food and clean water), what barriers they face in accessing these resources, and how technology could bridge the gap to foster community support, volunteering, and donations.
Key Insights
Key Insights
Key Insights
Access Barriers
Access Barriers
People had difficulty finding nearby food and water resources.
People had difficulty finding nearby food and water resources.
Volunteer Coordination
Volunteer Coordination
Volunteers found it hard to locate and join community efforts.
Volunteers found it hard to locate and join community efforts.
Donation Complexity
Donation Complexity
Donors wanted a streamlined, transparent process for making contributions.
Donors wanted a streamlined, transparent process for making contributions.
UX
Improvement
UX
Improvement
UX
Improvement
These UX improvements ensure that CommuneCare becomes more user-centric, efficient, and impactful in fulfilling its mission to support communities in need.
These UX improvements ensure that CommuneCare becomes more user-centric, efficient, and impactful in fulfilling its mission to support communities in need.
These UX improvements ensure that CommuneCare becomes more user-centric, efficient, and impactful in fulfilling its mission to support communities in need.
Problems
Problems
Problems
Problem Statement
Problem Statement
Problem Statement
Many communities struggle to access basic resources like food and clean water, and there’s no central platform to connect individuals with volunteer opportunities, donation channels, and issue reporting functions in a simple, transparent way.
Many communities struggle to access basic resources like food and clean water, and there’s no central platform to connect individuals with volunteer opportunities, donation channels, and issue reporting functions in a simple, transparent way.
Many communities struggle to access basic resources like food and clean water, and there’s no central platform to connect individuals with volunteer opportunities, donation channels, and issue reporting functions in a simple, transparent way.
Solutions
Solutions
Solutions
Solve the problem
Solve the problem
Solve the problem
Build an app and responsive website that allow users to find food and water resources, volunteer, donate, and report issues in their community.
Build an app and responsive website that allow users to find food and water resources, volunteer, donate, and report issues in their community.
Build an app and responsive website that allow users to find food and water resources, volunteer, donate, and report issues in their community.
Goals
Goals
Goals
Simplify resource access for community members.
Facilitate volunteer coordination and sign-up.
Streamline donations with transparency.
Simplify resource access for community members.
Facilitate volunteer coordination and sign-up.
Streamline donations with transparency.
Simplify resource access for community members.
Facilitate volunteer coordination and sign-up.
Streamline donations with transparency.
User Persona
User Persona
User Persona
These UX improvements ensure that CommuneCare becomes more user-centric, efficient, and impactful in fulfilling its mission to support communities in need.
These UX improvements ensure that CommuneCare becomes more user-centric, efficient, and impactful in fulfilling its mission to support communities in need.
These UX improvements ensure that CommuneCare becomes more user-centric, efficient, and impactful in fulfilling its mission to support communities in need.
NAME:
Funke Bello
Funke Bello
Funke Bello
AGE:
28
28
28
EDUCATION:
Graduate
Graduate
Graduate
JOB:
Marketing Professional
Marketing Professional
Marketing Professional
LOCATION
Lagos,Nigeria
Lagos,Nigeria
Lagos,Nigeria
HOBBIES:
Volunteering & Planning events
Volunteering & Planning events
Volunteering & Planning events
Background
Background
Background
Funke is passionate about giving back to her community. She volunteers at local events and believes in the importance of helping those in need. She's tech-savvy and uses her smartphone for various tasks.
Funke is passionate about giving back to her community. She volunteers at local events and believes in the importance of helping those in need. She's tech-savvy and uses her smartphone for various tasks.
Funke is passionate about giving back to her community. She volunteers at local events and believes in the importance of helping those in need. She's tech-savvy and uses her smartphone for various tasks.
Motivation
Motivation
Motivation
Funke wants to make a positive impact on her community by volunteering her time to distribute food and water to those who need it. She's interested in receiving alerts about volunteer opportunities and staying connected with other volunteers.
Funke wants to make a positive impact on her community by volunteering her time to distribute food and water to those who need it. She's interested in receiving alerts about volunteer opportunities and staying connected with other volunteers.
Funke wants to make a positive impact on her community by volunteering her time to distribute food and water to those who need it. She's interested in receiving alerts about volunteer opportunities and staying connected with other volunteers.
Frustration
Frustration
Frustration
Funke hates not having timely updates about volunteering and sourcing for resources in her community.
Funke hates not having timely updates about volunteering and sourcing for resources in her community.
Funke hates not having timely updates about volunteering and sourcing for resources in her community.
UI
Design
UI
Design
UI
Design
After understanding the user's problems and behavior, it's time to design the interface.
After understanding the user's problems and behavior, it's time to design the interface.
After understanding the user's problems and behavior, it's time to design the interface.
Typography
Typography
Typography
Ag
Roboto serif
Roboto serif
Semi Bold
Semi Bold
Ag
Open sans
Open sans
Regular
Regular
Bold
Bold
Color palette
Color palette
Color palette
Primary
Primary
Neutrals
Neutrals
Semantic
Semantic
Ideation
Ideation
Ideation
In order to proceed with the ideation phase, I laid the groundwork for a page before using visual design.
I drafted wireframes on paper, generated different versions of a page, and identified the most promising idea. Using the selected versions, I created a refined version of the homepage and proceeded to work on other key screens
Digital Wireframes for apps
Digital Wireframes for apps
This low-fidelity wireframe represents the basic main screen for the app. Additional screens were created for the user flow, like the "Resources" section displaying listings of food and water resources, the "Volunteer" section showing volunteer opportunities, the "Donate" section with donation forms, and the "Report" section for reporting issues.
Home Screen
Other menu
Navigation bar
Notifications
Search bar
Listings menu
Header
Usability Study Parameters
Usability Study Parameters
Usability Study Parameters
Study type:
Study type:
Unmoderated usability study
Unmoderated usability study
Unmoderated usability study
Location:
Location:
Nigeria, remote
Nigeria, remote
Participant:
Participant:
5
5
Length:
Length:
30–60 minutes
30–60 minutes
Findings
Findings
Findings
Mobile Responsiveness
Mobile Responsiveness
Mobile users found the platform responsive and easy to navigate on smaller screens. Continue to prioritize mobile responsiveness as a crucial aspect of the user experience.
Mobile users found the platform responsive and easy to navigate on smaller screens. Continue to prioritize mobile responsiveness as a crucial aspect of the user experience.
User Onboarding
User Onboarding
Users appreciated the clear and guided onboarding process that helped them set up their profiles and understand the platform's purpose. Continue to refine the onboarding process, emphasizing its importance for new users.
Users appreciated the clear and guided onboarding process that helped them set up their profiles and understand the platform's purpose. Continue to refine the onboarding process, emphasizing its importance for new users.
Accessibility
Accessibility
Participants with varying abilities appreciated the platform's accessibility features and inclusive design.
Continue to prioritize accessibility, ensuring the platform is usable by individuals with disabilities.
Participants with varying abilities appreciated the platform's accessibility features and inclusive design.
Continue to prioritize accessibility, ensuring the platform is usable by individuals with disabilities.
High-fidelity prototype
High-fidelity prototype
High-fidelity prototype
he final high-fidelity prototype presented cleaner user flows for ordering food and water through the app. It also meets user needs for a search option, donations, volunteering, and resolving issues in the community.
Home Screen
Home Screen
Search bar
Navigation bar
Notifications
Other menu
Header
Listings menu
Refining The Design
Refining The Design
Refining The Design
Early designs allowed for some icons, but after the usability studies, I added accessible icons for easy Navigation and accessibility. I also revised the design so users see all the icons when they first land on the screen. I also added a search function to the page. Over time, new version of the app was also created.
Wireframe
Wireframe
Wireframe
Version 1 mockup after usabity test
Version 1 mockup after usabity test
Version 1 mockup after usabity test
Version 2 mockup
Version 2 mockup
Version 2 mockup
Some components
Some components
Signup
Signup
Resource Listing
Find clean Water and health food in the community.
Ade House
N2,000 - N5,000
123, Opic Street
Known for their comfort food and varieties.
4.8
Volunteer
Donate
Report
Food Drive
123, Opic Street
September 10th, 2024
3pm
Volunteer to be part of the food drive.
Waiter service
11, Salami Street
November 10th, 2024
5pm
Volunteer to be a waiter
Coming Soon
Full name
Phone number
Password
Full name
Phone number
Password
Home
Profile
Saved
Notify
Search
Wireframes
Wireframes
Wireframes
Old screens
Old screens
Old screens
Redesigned Screens
Redesigned Screens
Redesigned Screens
Accessibility considerations
Accessibility considerations
Accessibility considerations
Screen Reader Compatibility
Screen Reader Compatibility
Screen Reader Compatibility
Consideration: Ensure that all aspects of the app and website are compatible with screen readers commonly used by individuals with visual impairments.
Action: Use semantic HTML elements, provide meaningful alt text for images, and ensure that screen readers can properly interpret and navigate through the content and user interface components.
Consideration: Ensure that all aspects of the app and website are compatible with screen readers commonly used by individuals with visual impairments.
Action: Use semantic HTML elements, provide meaningful alt text for images, and ensure that screen readers can properly interpret and navigate through the content and user interface components.
Consideration: Ensure that all aspects of the app and website are compatible with screen readers commonly used by individuals with visual impairments.
Action: Use semantic HTML elements, provide meaningful alt text for images, and ensure that screen readers can properly interpret and navigate through the content and user interface components.
Color and Contrast
Color and Contrast
Color and Contrast
Consideration: Address color and contrast issues to make content readable for users with visual impairments or color blindness.
Action: Choose color combinations that provide sufficient contrast, especially for text elements. Avoid relying solely on color to convey information and use other visual cues such as patterns or icons to supplement color-coded content.
Consideration: Address color and contrast issues to make content readable for users with visual impairments or color blindness.
Action: Choose color combinations that provide sufficient contrast, especially for text elements. Avoid relying solely on color to convey information and use other visual cues such as patterns or icons to supplement color-coded content.
Consideration: Address color and contrast issues to make content readable for users with visual impairments or color blindness.
Action: Choose color combinations that provide sufficient contrast, especially for text elements. Avoid relying solely on color to convey information and use other visual cues such as patterns or icons to supplement color-coded content.
Responsive Landing page
Responsive Landing page
Responsive Landing page
The CommuneCare Connect landing page is designed to provide a clear and concise overview of the app’s purpose, features, and benefits.
The CommuneCare Connect landing page is designed to provide a clear and concise overview of the app’s purpose, features, and benefits.
The CommuneCare Connect landing page is designed to provide a clear and concise overview of the app’s purpose, features, and benefits.
Hero Section
Hero Section
Hero Section
Highlights the app’s mission to help communities access food and clean water, with a call-to-action button encouraging users to download the app or sign up.
Highlights the app’s mission to help communities access food and clean water, with a call-to-action button encouraging users to download the app or sign up.
Highlights the app’s mission to help communities access food and clean water, with a call-to-action button encouraging users to download the app or sign up.
About Section
About Section
About Section
Briefly introduces the app’s goal to connect communities and empower users to make a difference.
Briefly introduces the app’s goal to connect communities and empower users to make a difference.
Briefly introduces the app’s goal to connect communities and empower users to make a difference.
Features Section
Features Section
Features Section
Explains key features like resource finding, volunteering, donations, and issue reporting with supporting visuals.
Explains key features like resource finding, volunteering, donations, and issue reporting with supporting visuals.
Explains key features like resource finding, volunteering, donations, and issue reporting with supporting visuals.
Testimonials:
Testimonials:
Testimonials:
Showcases positive user feedback to build trust and encourage new users to get involved.
Showcases positive user feedback to build trust and encourage new users to get involved.
Showcases positive user feedback to build trust and encourage new users to get involved.
Call-to-Action (CTA)
Call-to-Action (CTA)
Call-to-Action (CTA)
Positioned throughout the page, prompting users to volunteer, donate, or report issues.
Positioned throughout the page, prompting users to volunteer, donate, or report issues.
Positioned throughout the page, prompting users to volunteer, donate, or report issues.
Landing Page
Landing Page
Creating a sitemap for the CommuneCare landing page design is essential for visualizing the app's structure and navigation hierarchy.
Landing page mockups
Landing page mockups
The landing page is clean and user-friendly, with clear navigation to ensure visitors understand the app’s impact and how to get started.
Going Forward
Going Forward
Going Forward
A user commented, “This platform has truly connected us like never before, making it easy to help and be helped in our neighborhood”.
A user commented, “This platform has truly connected us like never before, making it easy to help and be helped in our neighborhood”.
A user commented, “This platform has truly connected us like never before, making it easy to help and be helped in our neighborhood”.
Impact
Impact
Impact
The designs for CommuneCare made a significant impact on our community, fostering unity, ease of resource access, and a sense of collective purpose.
The designs for CommuneCare made a significant impact on our community, fostering unity, ease of resource access, and a sense of collective purpose.
The designs for CommuneCare made a significant impact on our community, fostering unity, ease of resource access, and a sense of collective purpose.
What I learned
What I learned
What I learned
Society and community start with an individual who wants to grow and make an impact on the lives of those around them.
Society and community start with an individual who wants to grow and make an impact on the lives of those around them.
Society and community start with an individual who wants to grow and make an impact on the lives of those around them.
Thank you for taking the time to review my work on the CommuneCare app!
Thank you for taking the time to review my work on the CommuneCare app!
Thank you for taking the time to review my work on the CommuneCare app!
If you’d like to see more or get in touch, my contact information is provided below.
Email: eseosanatalie@gmail.com
LinkedIN: https://www.linkedin.com/in/eseosa-aibaengbee-66abb1141**
If you’d like to see more or get in touch, my contact information is provided below.
Email: eseosanatalie@gmail.com
LinkedIN: https://www.linkedin.com/in/eseosa-aibaengbee-66abb1141**
