Challenge Overview
Welcome to "Living Progress - Social Volunteer Discovery - Responsive Design UI Prototype Challenge Part 1". In this challenge, we need your help to create responsive HTML5 prototype 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. Read more details below and Join with us NOW!!
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
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.
Focus Area:
Civic Engagement, Community Development and Volunteerism
Primary Goal
We are looking for your help to help us create responsive UI Prototype (front end only) for our new Social Volunteer platform.
- We'll focus on Desktop version in this challenge.
- 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.
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 service like Guidestar)
- 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.)
Competition Task Overview
The main task of this competition is to develop Responsive HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.
Key Requirements
- Replicate the design of the approved Storyboards (PSD Files) for all pages.
- Your pages must match the colors and structure of the provided storyboards.
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- Ensure you submission clear of HTML and CSS Validation error and warning.
- Test in all the required browsers.
Screen Requirements
- There are 2 User scenario that needs to be simulated and should have their own screen creations, in this challenge you just need to focus on Volunteer Screens:
Volunteer Screens:
01. Home Screen
01_Homepage_Non_Login.png to 01_Homepage_Story.png (Non logged in User)
02_Homepage_Login_No_Banner.png to 02_Homepage_Login_Slide_3.png (Logged in User)
- The homepage will be available for non-logged in user and logged in user.
- The homepage will show important information/marketing content, list of active opportunities, popular opportunities and provide a way to ask user to register and join the apps.
- Clear ways to navigate to appropriate login for organization/cause users and volunteer users (please simulate non logged in homepage and logged in homepage)
- User will be able to search for opportunity that interested for them in the apps via search section, in non-login mode, user cannot interact with opportunities (like the opportunity, sign up/follow, etc.). System prompts user to login/create account if they click on an opportunity
- The top part of homepage screen will be created in several display variation depending on informations that need to be shown, please provide all these display variation in your submission, the display variation can be found below:
-- Homepage with Carousel (01_Homepage_Non_Login.png), the carousel content #1,2,3 can be found in 02_Homepage_Login_Slide_1.png to 02_Homepage_Login_Slide_3.png
-- Homepage with Banner (01_Homepage_Non_Login_Banner.png)
-- Homepage with Carousel + Ads (01_Homepage_Non_Login_With_Ads.png)
-- Homepage with Story (01_Homepage_Story.png)
-- Homepage with no banner (02_Homepage_Login_No_Banner.png)
02. Login Screen
00_Login.png
- User needs to login to be able doing more interactions in the apps.
- Usual Login form (username, password, remember me, forgot password) or login via social media account (Facebook)
- Options to register and login using Single Sign On (SSO) for volunteer users via Facebook that leverages data permissions and social graph
- Provide scenario if user enter wrong credential.
- "Create an Account" link will bring user to register page.
03. Register Screen
00_Register.png
- If anonymous user don't have account in the apps, they can register via this screen.
- There are 2 type of accounts that they can register in the apps, "Register as Volunteer" or "Register My Organization".
- Clicking any of the account type button will bring user to registration form.
- Register my organization is out of scope for this challenge, just provide the placeholder button.
04. Register as volunteer Screen
0_Register_Volunteers_1.png to 0_Register_Volunteers_5.png
- In this challenge, we're only need to focus on volunteer registration form.
- 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, General information about user profile
-- Location Preferences, Google map integrations needed here, needs to be able simulate user search location (auto complete).
-- Skills, user can select one or more skills from this screen
-- Interests, user can select one or more interest from this screen
-- Social Profiles, provides the button only, no need to integrate it with social media API.
- Once all informations complete, they will be redirected to their dashboard and able to use the apps.
05. Volunteer Dashboard Screen
05_Dashboard.png
- Default screen to be shown after successfull login
- In this page, user can navigate, browse, search, find, and discover recommended volunteer opportunities for them
- Clicking search icon will open the blue search form where user can enter search criteria
- The top area will be created as carousel, the application will show related informations that is important or interesting for the user.
- This page will show list of user activity and any features in the apps that might be interested for the user based on their social media interactions.
- 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).
- There are several cards style create in this screen, please use card style created for "Opportunities recommended for me" in "My Opportunities" and " Opportunities I Like" (we like the full column width card style creation)
- Clicking "See More" button will load more opportunities content to the dashboard.
- The right sidebar will show several widget that related to user activity in the apps such as:
-- Calendar, showing list of user schedule per month (check their schedule status in the legend, blue, red pink, and grey)
-- Badges, showing user badge achievement and status in the apps.
-- Certified Level, showing user level progress to complete their certified status
-- Twitter news feed, integration with twitter (recommended), but a placeholder content also fine.
-- Friends, Showing list of user friends collected from their social media.
-- Groups, Showing list of groups that user joined
-- Organization, same thing like groups (we are combining organization with groups).
06. Browse Opportunities and Organizations Screens
03_Browse_Opportunity_Carousel.png to 03_Browse_Opportunity_With_Ads.png
04_Browse_Groups.png
- 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)
- Clicking search icon will open the blue search form where user can enter search criteria
- 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)
- Notice that the top parts of the big images area can be set into different display variation (carousel or banner), please provide this variation in your submission
- If there is necessary information/marketing content that needs to be shown, this screen will be able to marketing it via ads (03_Browse_Opportunity_With_Ads.png)
- For Browse Group screen, no top big image needs to be shown (04_Browse_Groups.png)
- In Browse Group screen, there will be two types of group, unverified group and verified group. Verified group can be detected by the pin "verified organization" in the image area.
07. Opportunity Detail Screen
03_Opportunity_Details.png
- User can check for more details about opportunities from this screen.
- Clicking search icon will open the blue search form where user can enter search criteria
- 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 (Join the opportunity button), once user joined change the button name into "Joined"
- If user not logged in, when user want to join the opportunity button, it will bring back user to login form.
- Share with a group inside platform
- 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) - no screen references.
- Right sidebar, Location map can be placeholder for now, Contacts scrollbar needs to follow storyboard, and please create successfull message sent notification if user send direct messages.
- Ability to marked the opportunity as "Favourite" (future features)
- Invite a friend to the opportunity inside platform (future features)
- User should be informed about their benefits if join the opportunity / earn and display "badges" for certain achievements or activities (future features)
08. Groups/Organization Profile Screen
04_Groups_Detail_Discussions.png to 04_Groups_Member.png
- Clicking search icon will open the blue search form where user can enter search criteria
- Show details of organization information in this screen (background, type profit/non-profit, etc). Their affinities (President's Volunteer Service Award, Verified Volunteers)
- Simulate verified and unverified groups/organization screens (04_Groups_Detail_Non_Verified.png - 04_Groups_Detail_Verified.png)
- User can follow/subscribe to an organization to be able get notification regarding new or related opportunities from the organization (via follow link)
- User will be able to give a donation to an organization (paypal/credit card/etc, donation page is out of scope for this challenge)
- Contact form to get in touch with the organization? (Direct Message, once sent provide notification that message succesfully sent)
- Social share organization page with users social network
- Comment thread - consider private by default, user that can see comment thread is user that already joined the group (via Discussion)
- Clicking "+24" in members area in group details screen will bring user to details members that join/follow this group (04_Groups_Member.png)
- Create each tab content in this screen (Details, Opportunities, Discussions), for opportunities tab, create list of active opportunities.
- Right sidebar, Location map can be placeholder for now and please create successfull message sent notification if user send direct messages.
09. My Profile Screen
01_My_Profile_Details.png, 01_My_Profile_With_Ads.png, 04_My_Profile_Badges.png, 02_My_Profile_Following.png, 03_My_Profile_Favorites.png
- Volunteer profile with photos (pulled from FB), skills, their followed organizations, and a "badges"/"credits" section.
- 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.
- Left sidebar can be added/modified with different kinds of informations if necessary like ads, badges, friends, groups, etc (01_My_Profile_With_Ads.png or 01_My_Profile_Details.png)
- Create each tab content in this screen (Details, Following, Favorites, Badges)
Specific HTML/CSS/JavaScript Requirements:
HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to layout your page. Only use table tags for tables of data/information and not for page layout.
- No inline CSS styles - all styles must be placed in an external style-sheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.
JavaScript Requirements:
- All JavaScript used must not have any copyrights to any third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
- You are allowed to ue Bootstrap for this challenge.
Browsers Requirements:
- IE11 above
- Latest Firefox, Safari & Chrome Browsers
Documentation Provided:
- Storyboards, Wireframes, and All necessary flow documents can be found in forum!
- A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.
Final Submission:
- For each member, the final submission should be uploaded to the Online Review Tool.
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
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.
Focus Area:
Civic Engagement, Community Development and Volunteerism
Primary Goal
We are looking for your help to help us create responsive UI Prototype (front end only) for our new Social Volunteer platform.
- We'll focus on Desktop version in this challenge.
- 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.
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 service like Guidestar)
- 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.)
Competition Task Overview
The main task of this competition is to develop Responsive HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.
Key Requirements
- Replicate the design of the approved Storyboards (PSD Files) for all pages.
- Your pages must match the colors and structure of the provided storyboards.
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- Ensure you submission clear of HTML and CSS Validation error and warning.
- Test in all the required browsers.
Screen Requirements
- There are 2 User scenario that needs to be simulated and should have their own screen creations, in this challenge you just need to focus on Volunteer Screens:
Volunteer Screens:
01. Home Screen
01_Homepage_Non_Login.png to 01_Homepage_Story.png (Non logged in User)
02_Homepage_Login_No_Banner.png to 02_Homepage_Login_Slide_3.png (Logged in User)
- The homepage will be available for non-logged in user and logged in user.
- The homepage will show important information/marketing content, list of active opportunities, popular opportunities and provide a way to ask user to register and join the apps.
- Clear ways to navigate to appropriate login for organization/cause users and volunteer users (please simulate non logged in homepage and logged in homepage)
- User will be able to search for opportunity that interested for them in the apps via search section, in non-login mode, user cannot interact with opportunities (like the opportunity, sign up/follow, etc.). System prompts user to login/create account if they click on an opportunity
- The top part of homepage screen will be created in several display variation depending on informations that need to be shown, please provide all these display variation in your submission, the display variation can be found below:
-- Homepage with Carousel (01_Homepage_Non_Login.png), the carousel content #1,2,3 can be found in 02_Homepage_Login_Slide_1.png to 02_Homepage_Login_Slide_3.png
-- Homepage with Banner (01_Homepage_Non_Login_Banner.png)
-- Homepage with Carousel + Ads (01_Homepage_Non_Login_With_Ads.png)
-- Homepage with Story (01_Homepage_Story.png)
-- Homepage with no banner (02_Homepage_Login_No_Banner.png)
02. Login Screen
00_Login.png
- User needs to login to be able doing more interactions in the apps.
- Usual Login form (username, password, remember me, forgot password) or login via social media account (Facebook)
- Options to register and login using Single Sign On (SSO) for volunteer users via Facebook that leverages data permissions and social graph
- Provide scenario if user enter wrong credential.
- "Create an Account" link will bring user to register page.
03. Register Screen
00_Register.png
- If anonymous user don't have account in the apps, they can register via this screen.
- There are 2 type of accounts that they can register in the apps, "Register as Volunteer" or "Register My Organization".
- Clicking any of the account type button will bring user to registration form.
- Register my organization is out of scope for this challenge, just provide the placeholder button.
04. Register as volunteer Screen
0_Register_Volunteers_1.png to 0_Register_Volunteers_5.png
- In this challenge, we're only need to focus on volunteer registration form.
- 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, General information about user profile
-- Location Preferences, Google map integrations needed here, needs to be able simulate user search location (auto complete).
-- Skills, user can select one or more skills from this screen
-- Interests, user can select one or more interest from this screen
-- Social Profiles, provides the button only, no need to integrate it with social media API.
- Once all informations complete, they will be redirected to their dashboard and able to use the apps.
05. Volunteer Dashboard Screen
05_Dashboard.png
- Default screen to be shown after successfull login
- In this page, user can navigate, browse, search, find, and discover recommended volunteer opportunities for them
- Clicking search icon will open the blue search form where user can enter search criteria
- The top area will be created as carousel, the application will show related informations that is important or interesting for the user.
- This page will show list of user activity and any features in the apps that might be interested for the user based on their social media interactions.
- 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).
- There are several cards style create in this screen, please use card style created for "Opportunities recommended for me" in "My Opportunities" and " Opportunities I Like" (we like the full column width card style creation)
- Clicking "See More" button will load more opportunities content to the dashboard.
- The right sidebar will show several widget that related to user activity in the apps such as:
-- Calendar, showing list of user schedule per month (check their schedule status in the legend, blue, red pink, and grey)
-- Badges, showing user badge achievement and status in the apps.
-- Certified Level, showing user level progress to complete their certified status
-- Twitter news feed, integration with twitter (recommended), but a placeholder content also fine.
-- Friends, Showing list of user friends collected from their social media.
-- Groups, Showing list of groups that user joined
-- Organization, same thing like groups (we are combining organization with groups).
06. Browse Opportunities and Organizations Screens
03_Browse_Opportunity_Carousel.png to 03_Browse_Opportunity_With_Ads.png
04_Browse_Groups.png
- 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)
- Clicking search icon will open the blue search form where user can enter search criteria
- 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)
- Notice that the top parts of the big images area can be set into different display variation (carousel or banner), please provide this variation in your submission
- If there is necessary information/marketing content that needs to be shown, this screen will be able to marketing it via ads (03_Browse_Opportunity_With_Ads.png)
- For Browse Group screen, no top big image needs to be shown (04_Browse_Groups.png)
- In Browse Group screen, there will be two types of group, unverified group and verified group. Verified group can be detected by the pin "verified organization" in the image area.
07. Opportunity Detail Screen
03_Opportunity_Details.png
- User can check for more details about opportunities from this screen.
- Clicking search icon will open the blue search form where user can enter search criteria
- 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 (Join the opportunity button), once user joined change the button name into "Joined"
- If user not logged in, when user want to join the opportunity button, it will bring back user to login form.
- Share with a group inside platform
- 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) - no screen references.
- Right sidebar, Location map can be placeholder for now, Contacts scrollbar needs to follow storyboard, and please create successfull message sent notification if user send direct messages.
- Ability to marked the opportunity as "Favourite" (future features)
- Invite a friend to the opportunity inside platform (future features)
- User should be informed about their benefits if join the opportunity / earn and display "badges" for certain achievements or activities (future features)
08. Groups/Organization Profile Screen
04_Groups_Detail_Discussions.png to 04_Groups_Member.png
- Clicking search icon will open the blue search form where user can enter search criteria
- Show details of organization information in this screen (background, type profit/non-profit, etc). Their affinities (President's Volunteer Service Award, Verified Volunteers)
- Simulate verified and unverified groups/organization screens (04_Groups_Detail_Non_Verified.png - 04_Groups_Detail_Verified.png)
- User can follow/subscribe to an organization to be able get notification regarding new or related opportunities from the organization (via follow link)
- User will be able to give a donation to an organization (paypal/credit card/etc, donation page is out of scope for this challenge)
- Contact form to get in touch with the organization? (Direct Message, once sent provide notification that message succesfully sent)
- Social share organization page with users social network
- Comment thread - consider private by default, user that can see comment thread is user that already joined the group (via Discussion)
- Clicking "+24" in members area in group details screen will bring user to details members that join/follow this group (04_Groups_Member.png)
- Create each tab content in this screen (Details, Opportunities, Discussions), for opportunities tab, create list of active opportunities.
- Right sidebar, Location map can be placeholder for now and please create successfull message sent notification if user send direct messages.
09. My Profile Screen
01_My_Profile_Details.png, 01_My_Profile_With_Ads.png, 04_My_Profile_Badges.png, 02_My_Profile_Following.png, 03_My_Profile_Favorites.png
- Volunteer profile with photos (pulled from FB), skills, their followed organizations, and a "badges"/"credits" section.
- 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.
- Left sidebar can be added/modified with different kinds of informations if necessary like ads, badges, friends, groups, etc (01_My_Profile_With_Ads.png or 01_My_Profile_Details.png)
- Create each tab content in this screen (Details, Following, Favorites, Badges)
Specific HTML/CSS/JavaScript Requirements:
HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to layout your page. Only use table tags for tables of data/information and not for page layout.
- No inline CSS styles - all styles must be placed in an external style-sheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.
JavaScript Requirements:
- All JavaScript used must not have any copyrights to any third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
- You are allowed to ue Bootstrap for this challenge.
Browsers Requirements:
- IE11 above
- Latest Firefox, Safari & Chrome Browsers
Documentation Provided:
- Storyboards, Wireframes, and All necessary flow documents can be found in forum!
Final Submission Guidelines
Submission Deliverables:- A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.
Final Submission:
- For each member, the final submission should be uploaded to the Online Review Tool.