Challenge Summary
Welcome back to "Living Progress - Social Volunteer Discovery - Design Refinements Challenge". We've finished the first part of our design challenges series and now we want to continue explore the best UI/UX possibility for the apps. In the first part design challenge, we're asking the Topcoder community to create Volunteer user screens. The result of the previous challenge is good and now, in this challenge, we need you to explore more and help us again to think about UI/UX for "Admin Cause" User where they can create and manage their volunteer opportunities and other organization activities. We also need your help to update several layout elements in our Volunteer screens to meet our latest requirements.
This app's purpose will give user ability to find and volunteer to any activity based on their preferences. Similar to a Netflix or Amazon recommendations model, we are aiming to serve up to our users volunteer opportunities that are of interest to them. We want you to critically think about the problem and propose the best solution for how content should be displayed, what's the best navigation mechanics, and how the user moves through the site. Your designs should have a simple, modern, and responsive UI and UX to allow for the user to quickly move through the application. The goal is to keep the experience intuitive, easy to use, and above all, allow the end user to source talent more easily. As always, reach out in the forum with any questions. Good luck and looking forward to your design ideas!
- General Updates
- Nonprofit/Cause Administrator Screens
01. Register As Organization Screens
02. Dashboard Screen
05. Organization Profile Screen
06. Post Opportunities Screen
- General Updates
- Nonprofit/Cause Administrator Screens
01. Register As Organization Screens
02. Dashboard Screen
03. Browse Opportunities Screen
04. Opportunity Detail Screen
05. Organization Profile Screen
06. Post Opportunities Screen
Background Overview
Insufficient progress is being made on the most pressing social and environmental challenges facing local communities and the world we all share. One of the strongest tools the world has to turn the tide on these challenges is the power of people devoting their time and talents to these challenges as volunteers and, through that experience, inspiring enrolling others in common cause to effect change. According to the US Census, about 60 million Americans volunteer each year, which is a powerful force for good, but only about 20% of the citizenry. Moreover, the opportunity to better connect people to opportunities to make a difference is enormous on a global scale.
If we fail to inspire and connect the maximum possible people to a cause where they can make a meaningful difference, we will never solve the great challenges of our time. Martin Luther King, Jr. said, "Everyone can be great, because everyone can serve." Volunteer service should be viewed as a powerful lever for change across all the UN Sustainable Development Goals. It is through volunteering that every individual can make a meaningful contribution to this bold, global agenda. It is through these hands on experiences that individuals build empathy, new perspective, and the values of community necessary to build a sustainable, just global society.
Our vision is to transform how people discover volunteer opportunities online "from search to social". By applying machine learning, predictive analytics, and persuasive UX design to our current search--based All For Good platform, the largest catalog of volunteer opportunities on the internet, we will revolutionize how people are invited into service.
This will result in more people connecting to causes they can help with their time, talent, money, and social influence. It is ultimately through the power of people that social change happens.
Challenge Goals:
Create a powerful consumer facing social discovery platform that includes features like:
- The cutting edge in interface layer UX design
- Machine learning, persuasive technology, and behavioral science to push the right volunteer opportunities to the right people at the right time.
- Insights from the social graph so that more people can bring others into volunteer service through peer influence.
This project will overhaul our existing volunteer discovery platform called "All For Good" (http://www.allforgood.org/), from a search based platform to a social discovery platform
Focus Area:
Civic Engagement, Community Development and Volunteerism
Key Features:
Must Have Features
- Volunteer users - SSO for volunteer users via Facebook that leverages data permissions and social graph
- Volunteer users - Expanded "actions" users can take (like/favorite, send to friend)
- Volunteer users - Volunteer profile with photos (pulled from FB), skills, their followed organizations, and a "badges"/"credits" section for future build out
- Volunteer users - Integrate with our background screening partner so volunteers can order a screen, display in their profile, and share with an organization they want to volunteer with.
- Volunteer users - ability to create and organize into groups (schools, churches, etc.)
Nice To Have Features
- Volunteer users - Ability to invite their friends
- Volunteer users - Pandora-style "like"/"dislike" content/opportunity types to improve recommendation engine.
- Volunteer users - More robust skills and availability profile (e.g. see only weekend projects)
User Case Scenarios:
Volunteers
- Searching for opportunities by keyword, organization type, geography
- Browse recommended opportunities and organizations based on their preferences/social data
- Sign up for or "express interest" in an opportunity
- Favorite an opportunity
- Follow an organization so that they are alerted to new or related opportunities
- Invite a friend/s to the platform
- See which of their friends are also users and see their activity
- Invite a friend to an opportunity
- Earn and display "badges" for certain achievements or activities
- Sign up for a background check (an integration with our background check partner, Verified Volunteers)
- Give a donation to an organization
- See an activity feed: their friends, their favorite organizations, their sign up history, their background check and/or other "badges"
Nonprofit/Cause Administrator
- Posting volunteer opportunities that get published on the platform
- Link a Twitter account so that a posting get's broadcast with a URL shortened link
- Link to a FB Page account so the opportunity gets posted to their wall.
- Verify their nonprofit status via EIN (integrate with a homegrown service that we built!)
-- if no EIN, not locked out of creating a group/cause account with same capabilities.
-- e.g. A neighborhood cleanup group may not have an EIN but still needs to post
- Integrate a payments processing solution to accept donations (Network for Good or PayPal)
- Integrate with our background screening partner so that they can send screening request to their volunteers
- Download CSV files of their interested volunteers
- Push communications to their followers
- See a dashboard: Their opportunity listings (active, expired, pending); their volunteer followers; their platform performance (how many impressions their opportunities have had through search discovery, social discovery, etc.)
Design Consideration
- Two-sided marketplace, like AirBnB, in which the primary audience is consumers, yet, there is a secondary login path for "sellers", which in our case are nonprofit organizations seeking to recruit volunteers and manage their opportunities.
- A platform that leverages social login (most likely Facebook) to find friends or causes on the platform and recommend new opportunities, like Spotify.
- A richer, more engaging UI/UX that includes more visual elements like photos and videos.
Screen Requirements:
General Updates:
- As part of this challenge, we need your help to updates our Volunteer screens to reflect our latest requirements.
- We need to separate actions for verified groups and public groups, what kind of methodology differences are needed.
- In dashboard page, there are several styles of card creations there, we need to create consistency here, please use card style "Opportunities recommended for me" in "Opportunities I like" and "My Opportunities" (we like the full column width card style creation)
Nonprofit/Cause Administrator Screens:
- These are new screen creation requirements.
- The following screens are only for recommendations. If you have a better concepts that will provide better solution for our goals, please feel free to create it.
01. Register As Organization Screens
WF Reference "Register As Organization"
- Create registration form for organization user that not yet have an account to the platform
- User will be asked to filled in all necessary informations, split into 5 steps:
-- Organization Details (use content from here http://www.allforgood.org/join/organization/register)
-- Media
-- Social Medias
-- Affinities
-- Payment Integration
- Once all informations complete, they will be redirected to their dashboard and able to use the apps.
02. Dashboard Screen
WF Reference "Dashboard"
- Show opportunity listings (active, expired, pending) along with their volunteer followers
- Ability to perform global search in the apps
- Platform performance (how many impressions their opportunities have had through search discovery, social discovery, etc.)
- Have the ability to create a "new" opportunity from the dashboard page which would launch the user into a flow for creating a volunteer opportunity
03. Browse Opportunities Screen
WF Reference "Browse Opportunities"
- Browse/Show recommended opportunities and organizations based on user preferences/social data
- In this screen, organization user can view all opportunities and organizations in the apps (not limited to their opportunity)
- Ability to search opportunities by keyword, organization type, geography, date, skills, age, national event
- Ability to filter opportunities listing by category, time, etc.
- Show summary information about the opportunities
- Ability to take all actions described above against opportunity in this browse/summary mode (Sign up for or "express interest", like, share, etc.)
- Like/ Dislike for opportunities that helps feed the recommendations engine (if dislike, remove it from the screen)
- Ad banner placement
04. Opportunity Detail Screen
WF Reference "Opportunity Detail Page"
- This screen purpose is to give user ability to manage and view the opportunities conditions
- Show the progress, how many people join as volunteer, how many people search and look at the opportunities, how many donation coming in
- Show feedback from volunteer regarding the opportunities?
- Show list of volunteer that join their opportunities (attendance.png)
- Ability to download CSV file of their followers/supporters
- Ability to communicate with their followers and respond to comments privately
05. Organization Profile Screen
WF Reference "Organization Profile"
- Create branded organization page (organization.png) with their volunteer opportunities
- Improved chance for more volunteer by posting rich media file addition (logos, photos).
- Link a Twitter, Facebook, and/or LinkedIn account(s) so that a posting gets broadcast with a URL shortened link
- Verify their nonprofit status via EIN (integrate with a homegrown service that we built!)
-- if no EIN, not locked out of creating a group/cause account with same capabilities.
-- e.g. A neighborhood cleanup group may not have an EIN but still needs to post
- Integration with our background screening partner so that they can send screening request to their volunteers
- Indicate affinities: President's Volunteer Service Award Certifying organization; major partner networks? (Foodbanks, etc?)
- Payments integration to enable donations (make every volunteer opportunity an opportunity to give and/or give directly to the organization)
- List of all opportunities that being posted by the organization. (Archived, Active, and Pending). Ability to clone or edit their listings.
06. Post Opportunities Screen
WF Reference "Post Opportunities Page"
- Posting volunteer opportunities that get published on the platform
- Show us how to handle/manage lot of input for in wizard style, split into 5 steps:
-- Opportunity Information
-- Required Questions & Skillset,Create a questions and skill set that required for volunteer
-- Donations Method,Integrate a payments processing solution to accept donations (Network for Good or PayPal)
-- Crowdfunding Projects,Crowdfunding for volunteer projects?
-- Preview, Ability to preview the opportunities before activate it
Design Direction:
- Branding/ UI Guidelines from client
- Font, Colors, Style
- Moodboard
Screen Size:
Your designs should walk across desktop and mobile devices. However, we are just focusing on Desktop for now.
Desktop : 1280px width x height can expand based on content
Input Documents:
- Updated Wireframes
- Volunteer Storyboard (Winning design from previous design challenge)
- Branding Guidelines
- Stock photo
- Logo
Target Audience:
- Volunteers – individual, independent end--users
- Nonprofit/Causes – usually one (but could be more) administrator for a nonprofit account used to manage their volunteer opportunities. (Our focus in this challenge)
Additionally, there are administrators who work for client who will manage user access, privileges, run data reports, manage content, etc.
Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
- Overall design, UI and user experience
- How well you interpret the example screens and show us new ideas and concepts
Submission & Source Files:
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Submit JPG/PNG for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.
Final Fixes:
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
This app's purpose will give user ability to find and volunteer to any activity based on their preferences. Similar to a Netflix or Amazon recommendations model, we are aiming to serve up to our users volunteer opportunities that are of interest to them. We want you to critically think about the problem and propose the best solution for how content should be displayed, what's the best navigation mechanics, and how the user moves through the site. Your designs should have a simple, modern, and responsive UI and UX to allow for the user to quickly move through the application. The goal is to keep the experience intuitive, easy to use, and above all, allow the end user to source talent more easily. As always, reach out in the forum with any questions. Good luck and looking forward to your design ideas!
Round 1
Initial submission for client review- General Updates
- Nonprofit/Cause Administrator Screens
01. Register As Organization Screens
02. Dashboard Screen
05. Organization Profile Screen
06. Post Opportunities Screen
Round 2
All requirements as stated in challenge details with client feedback applied- General Updates
- Nonprofit/Cause Administrator Screens
01. Register As Organization Screens
02. Dashboard Screen
03. Browse Opportunities Screen
04. Opportunity Detail Screen
05. Organization Profile Screen
06. Post Opportunities Screen
Background Overview
Insufficient progress is being made on the most pressing social and environmental challenges facing local communities and the world we all share. One of the strongest tools the world has to turn the tide on these challenges is the power of people devoting their time and talents to these challenges as volunteers and, through that experience, inspiring enrolling others in common cause to effect change. According to the US Census, about 60 million Americans volunteer each year, which is a powerful force for good, but only about 20% of the citizenry. Moreover, the opportunity to better connect people to opportunities to make a difference is enormous on a global scale.
If we fail to inspire and connect the maximum possible people to a cause where they can make a meaningful difference, we will never solve the great challenges of our time. Martin Luther King, Jr. said, "Everyone can be great, because everyone can serve." Volunteer service should be viewed as a powerful lever for change across all the UN Sustainable Development Goals. It is through volunteering that every individual can make a meaningful contribution to this bold, global agenda. It is through these hands on experiences that individuals build empathy, new perspective, and the values of community necessary to build a sustainable, just global society.
Our vision is to transform how people discover volunteer opportunities online "from search to social". By applying machine learning, predictive analytics, and persuasive UX design to our current search--based All For Good platform, the largest catalog of volunteer opportunities on the internet, we will revolutionize how people are invited into service.
This will result in more people connecting to causes they can help with their time, talent, money, and social influence. It is ultimately through the power of people that social change happens.
Challenge Goals:
Create a powerful consumer facing social discovery platform that includes features like:
- The cutting edge in interface layer UX design
- Machine learning, persuasive technology, and behavioral science to push the right volunteer opportunities to the right people at the right time.
- Insights from the social graph so that more people can bring others into volunteer service through peer influence.
This project will overhaul our existing volunteer discovery platform called "All For Good" (http://www.allforgood.org/), from a search based platform to a social discovery platform
Focus Area:
Civic Engagement, Community Development and Volunteerism
Key Features:
Must Have Features
- Volunteer users - SSO for volunteer users via Facebook that leverages data permissions and social graph
- Volunteer users - Expanded "actions" users can take (like/favorite, send to friend)
- Volunteer users - Volunteer profile with photos (pulled from FB), skills, their followed organizations, and a "badges"/"credits" section for future build out
- Volunteer users - Integrate with our background screening partner so volunteers can order a screen, display in their profile, and share with an organization they want to volunteer with.
- Volunteer users - ability to create and organize into groups (schools, churches, etc.)
Nice To Have Features
- Volunteer users - Ability to invite their friends
- Volunteer users - Pandora-style "like"/"dislike" content/opportunity types to improve recommendation engine.
- Volunteer users - More robust skills and availability profile (e.g. see only weekend projects)
User Case Scenarios:
Volunteers
- Searching for opportunities by keyword, organization type, geography
- Browse recommended opportunities and organizations based on their preferences/social data
- Sign up for or "express interest" in an opportunity
- Favorite an opportunity
- Follow an organization so that they are alerted to new or related opportunities
- Invite a friend/s to the platform
- See which of their friends are also users and see their activity
- Invite a friend to an opportunity
- Earn and display "badges" for certain achievements or activities
- Sign up for a background check (an integration with our background check partner, Verified Volunteers)
- Give a donation to an organization
- See an activity feed: their friends, their favorite organizations, their sign up history, their background check and/or other "badges"
Nonprofit/Cause Administrator
- Posting volunteer opportunities that get published on the platform
- Link a Twitter account so that a posting get's broadcast with a URL shortened link
- Link to a FB Page account so the opportunity gets posted to their wall.
- Verify their nonprofit status via EIN (integrate with a homegrown service that we built!)
-- if no EIN, not locked out of creating a group/cause account with same capabilities.
-- e.g. A neighborhood cleanup group may not have an EIN but still needs to post
- Integrate a payments processing solution to accept donations (Network for Good or PayPal)
- Integrate with our background screening partner so that they can send screening request to their volunteers
- Download CSV files of their interested volunteers
- Push communications to their followers
- See a dashboard: Their opportunity listings (active, expired, pending); their volunteer followers; their platform performance (how many impressions their opportunities have had through search discovery, social discovery, etc.)
Design Consideration
- Two-sided marketplace, like AirBnB, in which the primary audience is consumers, yet, there is a secondary login path for "sellers", which in our case are nonprofit organizations seeking to recruit volunteers and manage their opportunities.
- A platform that leverages social login (most likely Facebook) to find friends or causes on the platform and recommend new opportunities, like Spotify.
- A richer, more engaging UI/UX that includes more visual elements like photos and videos.
Screen Requirements:
General Updates:
- As part of this challenge, we need your help to updates our Volunteer screens to reflect our latest requirements.
- We need to separate actions for verified groups and public groups, what kind of methodology differences are needed.
- In dashboard page, there are several styles of card creations there, we need to create consistency here, please use card style "Opportunities recommended for me" in "Opportunities I like" and "My Opportunities" (we like the full column width card style creation)
Nonprofit/Cause Administrator Screens:
- These are new screen creation requirements.
- The following screens are only for recommendations. If you have a better concepts that will provide better solution for our goals, please feel free to create it.
01. Register As Organization Screens
WF Reference "Register As Organization"
- Create registration form for organization user that not yet have an account to the platform
- User will be asked to filled in all necessary informations, split into 5 steps:
-- Organization Details (use content from here http://www.allforgood.org/join/organization/register)
-- Media
-- Social Medias
-- Affinities
-- Payment Integration
- Once all informations complete, they will be redirected to their dashboard and able to use the apps.
02. Dashboard Screen
WF Reference "Dashboard"
- Show opportunity listings (active, expired, pending) along with their volunteer followers
- Ability to perform global search in the apps
- Platform performance (how many impressions their opportunities have had through search discovery, social discovery, etc.)
- Have the ability to create a "new" opportunity from the dashboard page which would launch the user into a flow for creating a volunteer opportunity
03. Browse Opportunities Screen
WF Reference "Browse Opportunities"
- Browse/Show recommended opportunities and organizations based on user preferences/social data
- In this screen, organization user can view all opportunities and organizations in the apps (not limited to their opportunity)
- Ability to search opportunities by keyword, organization type, geography, date, skills, age, national event
- Ability to filter opportunities listing by category, time, etc.
- Show summary information about the opportunities
- Ability to take all actions described above against opportunity in this browse/summary mode (Sign up for or "express interest", like, share, etc.)
- Like/ Dislike for opportunities that helps feed the recommendations engine (if dislike, remove it from the screen)
- Ad banner placement
04. Opportunity Detail Screen
WF Reference "Opportunity Detail Page"
- This screen purpose is to give user ability to manage and view the opportunities conditions
- Show the progress, how many people join as volunteer, how many people search and look at the opportunities, how many donation coming in
- Show feedback from volunteer regarding the opportunities?
- Show list of volunteer that join their opportunities (attendance.png)
- Ability to download CSV file of their followers/supporters
- Ability to communicate with their followers and respond to comments privately
05. Organization Profile Screen
WF Reference "Organization Profile"
- Create branded organization page (organization.png) with their volunteer opportunities
- Improved chance for more volunteer by posting rich media file addition (logos, photos).
- Link a Twitter, Facebook, and/or LinkedIn account(s) so that a posting gets broadcast with a URL shortened link
- Verify their nonprofit status via EIN (integrate with a homegrown service that we built!)
-- if no EIN, not locked out of creating a group/cause account with same capabilities.
-- e.g. A neighborhood cleanup group may not have an EIN but still needs to post
- Integration with our background screening partner so that they can send screening request to their volunteers
- Indicate affinities: President's Volunteer Service Award Certifying organization; major partner networks? (Foodbanks, etc?)
- Payments integration to enable donations (make every volunteer opportunity an opportunity to give and/or give directly to the organization)
- List of all opportunities that being posted by the organization. (Archived, Active, and Pending). Ability to clone or edit their listings.
06. Post Opportunities Screen
WF Reference "Post Opportunities Page"
- Posting volunteer opportunities that get published on the platform
- Show us how to handle/manage lot of input for in wizard style, split into 5 steps:
-- Opportunity Information
-- Required Questions & Skillset,Create a questions and skill set that required for volunteer
-- Donations Method,Integrate a payments processing solution to accept donations (Network for Good or PayPal)
-- Crowdfunding Projects,Crowdfunding for volunteer projects?
-- Preview, Ability to preview the opportunities before activate it
Design Direction:
- Branding/ UI Guidelines from client
- Font, Colors, Style
- Moodboard
Screen Size:
Your designs should walk across desktop and mobile devices. However, we are just focusing on Desktop for now.
Desktop : 1280px width x height can expand based on content
Input Documents:
- Updated Wireframes
- Volunteer Storyboard (Winning design from previous design challenge)
- Branding Guidelines
- Stock photo
- Logo
Target Audience:
- Volunteers – individual, independent end--users
- Nonprofit/Causes – usually one (but could be more) administrator for a nonprofit account used to manage their volunteer opportunities. (Our focus in this challenge)
Additionally, there are administrators who work for client who will manage user access, privileges, run data reports, manage content, etc.
Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
- Overall design, UI and user experience
- How well you interpret the example screens and show us new ideas and concepts
Submission & Source Files:
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Submit JPG/PNG for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.
Final Fixes:
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.