BONUS: 5‌ CHECKPOINTS AWARDED WORTH ‌$150‌ EACH

Register
Submit a solution
The challenge is finished.

Challenge Summary

Welcome to "Living Progress - Social Volunteer Discovery - Desktop Storyboards Design Challenge". In this challenge, we need your help to think about the best possible UI/UX for our new platform where user can 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
01. Home Screen
05. Volunteer Dashboard Screen
06. Browse Opportunities and Organizations Screens
07. Opportunity Detail Screen
08. Organization Profile Screen
09. User Profile - Public Screen
10. My Profile Screen

Round 2

All requirements as stated in challenge details with client feedback applied
01. Home Screen
02. Login Screen
03. Register Screen
04. Register as volunteer Screen
05. Volunteer Dashboard Screen
06. Browse Opportunities and Organizations Screens
07. Opportunity Detail Screen
08. Organization Profile Screen
09. User Profile - Public Screen
10. My Profile Screen
11. Group Detail 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. Following the great example of a site like Kickstarter, we’d like to create a platform that enables our users to discover volunteer opportunities based on their likes, location, preferences, and social network. Being able to browse for opportunities similar to how Kickstarter allows users to Discover is an idea we’d like to work with for our target users. Users would be able to select their interest from a number of issues to volunteer for including: 
- adult education
- animals
- arts and culture
- children and youth education
- civic and community
- disaster and emergency services
- environment
- faith-based service
- family services
- health and wellness
- hunger and homelessness
- immigrant and refugee services
- international service
- internships and employment
- justice and legal services
- schools
- senior services
- sports and recreation
- technology
- veterans and military families

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"

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.
- A user experience and flow similar to Kickstarter
- We have an existing logo which we will be providing..However...we are open to a redesign of that logo. It is NOT required, but would be open to a fresh take on the logo. 

Screen Requirements:
The following screens only for recommendations, if you have a better concepts that will provide better solution for our goals, please feel free to create it. We are only targeting Volunteer screen in this challenge.

01. Home Screen
WF Reference "Homepage" (1st Placement)
WF Reference "Home" (2nd placement)

- Clean and visually appealing welcome 
- Lead with the volunteer opportunities that are available in their area and potentially a carousel for nationwide/platform wide  campaigns (see kickstarter home)
- Basic navigation to other public content areas (blog, browse, about, etc.)
- Clear ways to navigate to appropriate login for organization/cause users and volunteer users
- Potential ability to interact with content without logging in (i.e. search as currently offered or a "browse" function).
- In non-login mode, user cannot interact with opportunities (like, sign up, etc.).  System prompts user to login/create account if they click on an opportunity
- Potential for an ad banner

02. Login Screen
WF Reference "Login" (2nd Placement)
- User needs to login before able to use the app (like sign up or take other actions).
- Usual Login form (username, password, remember me, forgot password) 
- Provide scenario if user enter wrong credential.
- Options to register and login using Single Sign On (SSO) for volunteer users via Facebook that leverages data permissions and social graph

03. Register Screen
WF Reference "Register" (2nd Placement)
- If anonymous user don't have account, they can create one.
- User can choose whether they want to register as volunteer or as organization

04. Register as volunteer Screen
WF Reference "Register as volunteer" (2nd Placement)
- Provide registration form for user that not yet have an account to the platform
- User needs to filled in several informations to be able register to the site:
-- Basic details
-- Location
-- Skills (not required)
-- Interests (not required)
-- Social Profiles. (not required)
- Once all informations complete, they will be redirected to their dashboard and able to use the apps.

05. Volunteer Dashboard Screen
WF Reference "Dashboard" (1st Placement)
WF Reference "Volunteer Dashboard" (2nd Placement)

- Default screen to be shown after successfull login
- In this page, user can navigate, browse, search, find, and discover recommended volunteer opportunities for them
- Socialize, share, invite members of their social network
- See list of their groups 
- Browse the latest information about all activity within the app 
- User can see an activity feed from: their friends, their favorite organizations, their groups, their sign up history, their background check and/or other "badges" (think of facebook activity feeds style)
- Ability to perform quick and global search for anything (friends, organization, opportunity, etc).

06. Browse Opportunities and Organizations Screens
WF Reference "Browse Opportunities" and "Browse Organizations" (2nd Placement)
- Have a look at how Kickstarter handles their browsing experience...what they call discover. A user selects their areas of interest and the site will generate a result based off of that interest. In our case...users will select from a list of issues that have volunteer opportunities including:  
- adult education
- animals
- arts and culture
- children and youth education
- civic and community
- disaster and emergency services
- environment
- faith-based service
- family services
- health and wellness
- hunger and homelessness
- immigrant and refugee services
- international service
- internships and employment
- justice and legal services
- schools
- senior services
- sports and recreation
- technology
- veterans and military families
- After making their selections..the user will be shown opportunities that are recommended for them. (Similar to how Kickstarter handles the results...the user will be taken to a new page where there will be a featured opportunity and a grid of other opportunities displayed for the user)
- Browse/Show recommended opportunities and organizations based on user preferences/social data
- Ability to search opportunities by keyword, organization type, geography, date, skills, age, national event,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)

07. Opportunity Detail Screen
WF Reference "Opportunity Detail Page" (1st Placement)
WF Reference "Opportunity Detail" (2nd Placement)

- User can check for more details about opportunities from this screen.
- Show details of opportunities information here (location, type of opportunities, where, when, who posted it, individual/organizational, skills, time, etc).
- There should be some way to register to take part as volunteer in the opportunities
- Ability to marked the opportunity as "Favourite"
- Invite a friend to the opportunity inside platform
- Share with a group inside platform
- User should be informed about their benefits if join the opportunity / earn and display "badges" for certain achievements or activities
- A social media "like"/"dislike" content/opportunity types to improve recommendation engine.
- Share opportunities page with social network off platform 
- Comment thread--consider being private--only organization can see it
- If user try register to the opportunity, they will be provided with several questions that needs to be answered (perhaps set of questions in modal window, etc)

08. Organization Profile Screen
WF Reference "Group Detail Page" (1st Placement)
WF Reference "Organization Profile" (2nd Placement)

- Show details of organization information in this screen (background, type profit/non-profit, etc).  Their affinities (President's Volunteer Service Award, Verified Volunteers)
- Display some kind of icon if they are a certified nonprofit (Like Twitter verified account)
- User can follow/subscribe to an organization to be able get notification regarding new or related opportunities from the organization
- User will be able to give a donation to an organization (paypal/credit card/etc)
- Contact form to get in touch with the organization?
- Social share organization page with users social network
- Comment thread - consider private...may be same as contact form?

09. User Profile - Public Screen
WF Reference "User Profile - Public" (2nd Placement)
- User can view other users profile and activity from this screen
- Show recent information/activity of the user in this screen (recent volunteer, what's following, skills, badges, etc)
- Ability to contact user (chat, contact form, etc)
- User photos gallery (pulled from fb, documentation from recent volunteer activity, uploaded by the user themselves, etc)

10. My Profile Screen
WF Reference "User Profile" (1st Placement, like the timeline)
WF Reference "My Profile" (2nd Placement)

- Volunteer profile with photos (pulled from FB), skills, their followed organizations, and a "badges"/"credits" section for future build out
- Sign up for a background check (an integration with our background check partner, Verified Volunteers)
- 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.
- More robust skills and availability profile (e.g. see only weekend projects)
- Ability to set their personal preferences for opportunity information filter which will be done by the apps engine.

11. Group Detail Screen
WF Reference "Group Detail" (2nd Placement)
- User that registered into specific opportunity or organization will joined groups where they can communicate and get newest updates regarding the opportunity and organization
- Each communication will be separated into thread and each thread only appear to user that already registered to the opportunity and organization.
- Anyone can be a part of a group, start a group, organize a project for the group, share a project from one group with another.  From the volunteer dashboard, the user can create a new group and invite friends to participate in that group. There are minimal details required for a group which include: 
- Group Name
- Group Summary
- Group Information
- Group owner (user that created it)
- The ability to invite friends to the group
- Group Opportunities (ability to select volunteer opportunities to associate w/ the group)

Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance


Design Direction:
- Branding/ UI Guidelines from client
- Font, Colors, Style (Branding Guidelines)
- 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:
- Wireframes (1st and 2nd placement, for your references)
- Branding Guidelines documents
- Client logo

Target Audience:
- Volunteers – individual, independent end-­-users (Our focus in this challenge)
- Nonprofit/Causes – usually one (but could be more) administrator for a nonprofit account used to manage their volunteer opportunities. 
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.

How To Submit

  • New to Studio? ‌Learn how to compete here
  • Upload your submission in three parts (Learn more here). Your design should be finalized and should contain only a single design concept (do not include multiple designs in a single submission).
  • If your submission wins, your source files must be correct and “Final Fixes” (if applicable) must be completed before payment can be released.
  • You may submit as many times as you'd like during the submission phase, but only the number of files listed above in the Submission Limit that you rank the highest will be considered. You can change the order of your submissions at any time during the submission phase. If you make revisions to your design, please delete submissions you are replacing.

Winner Selection

Submissions are viewable to the client as they are entered into the challenge. Winners are selected by the client and are chosen solely at the client's discretion.

ELIGIBLE EVENTS:

2016 TopCoder(R) Open

Challenge links

Screening Scorecard

Submission format

Your Design Files:

  1. Look for instructions in this challenge regarding what files to provide.
  2. Place your submission files into a "Submission.zip" file.
  3. Place all of your source files into a "Source.zip" file.
  4. Declare your fonts, stock photos, and icons in a "Declaration.txt" file.
  5. Create a JPG preview file.
  6. Place the 4 files you just created into a single zip file. This will be what you upload.

Trouble formatting your submission or want to learn more? ‌Read the FAQ.

Fonts, Stock Photos, and Icons:

All fonts, stock photos, and icons within your design must be declared when you submit. DO NOT include any 3rd party files in your submission or source files. Read about the policy.

Screening:

All submissions are screened for eligibility before the challenge holder picks winners. Don't let your hard work go to waste. Learn more about how to  pass screening.

Challenge links

Questions? ‌Ask in the Challenge Discussion Forums.

Source files

  • Layered PSD files created in Adobe Photoshop or similar
  • AI files created in Adobe Illustrator or similar

You must include all source files with your submission.

Submission limit

Unlimited

ID: 30054191