SoftBank - Blockchain Based Donation Service Responsive UI Prototype Challenge

Project Overview:

Welcome to the SoftBank - Blockchain Based Donation Service Responsive UI Prototype Challenge! The goal of this challenge is to create a Responsive HTML5 Prototype for donation service application based on provided storyboard designs using Bootstrap. This is one of the prototype challenge from a series of Blockchain Challenges.

SoftBank is a Japanese multinational telecommunications and Internetcorporation, with operations in broadband, e-commerce, Internet, technology services, and other businesses.

A blockchain, widely known as the base technology of Bitcoin, is a distributed database that maintains a list of transactional data records hardened against tampering and revision.

SoftBank is going to develop the new platform based on the blockchain technology and a variety of services on top of it.
- As a proof of concept, they are going to develop a prototype of Blockchain based Donation Service.
- In this service prototype, each donation is recorded into the blockchain and everyone can see how their money is distributed and used.
- Volunteers provide their computing resource to record the transaction in the blockchain.

Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.

Competition Task Overview:

We already finished the UI design concept challenge so the goal of this challenge is to create HTML5 prototype for the screens designed at the previous design challenge.

The main task of this competition is to develop HTML5 Prototype based on provided storyboard screens. Your prototype must work properly in all the required browsers listed below.

Please ask questions in forum for any clarifications needed on the spec requirements.

Required Pages:

Below are the required pages for this prototype challenge. The charity organization pages are required to implement for desktop version.

1. Splash Screen:

• -User opens the application and will see the splash screen (01.png).
• -After few seconds load the landing page (02.png) - make this configurable value in milliseconds.

2. Landing page:

• -From splash screen it will be automatically redirected to landing page (02.png).
• -Make sure the header section is always visible and stick to top.
• -The footer navigation part should be always visible and stick to bottom.
• -Each project banner, logo & title should be clickable and navigate to project details screen (07.png).
• -Each project section will have a progress bar (green color) below project title which indicates money amount against the project goal.
• -Show project category on top of project banner.
• -Click on organization name, navigate user to search results screen (05.png).
• -Remaining other buttons and links will be deadlinks for now.

3. Search Results:

• -Click on search icon at header to show fly-out from top as shown on screen (04.png).
• -The below content should be disabled by overlay. If you click on overlay, close the fly-out.
• -User can choose category, location, organization from search panel. Locations are like asia, africa and europe.
• -Click on search button, navigate user to search results screen (05.png).
• -Click on browser back button, navigate user back to landing page. (02.png)

4. Project Details:

• -Click on project banner or logo or title, user can see project details (07.png).
• -Click on 'donate now' button at footer
  • --Not logged-in user: redirect user to login page (09.png) and then donation page (10-1.png).
  • --Logged in user: navigate user to donation page (10-1.png).
• -Click on organization name, navigate user to search results screen (05.png).
• -Click on back button, navigate user to previous page.

5. Login Screen:

• -Click on login button at top, show user the login options like facebook or google plus account, refer screen (09.png).
• -Click on these buttons, show user photo at header.
• -Click on overlay, close the modal dialog.

6. Donation page:

• -Show donation page for logged-in user, refer screen (10-1.png).
• -User can fill details and click 'donate' button at footer, show user confirm message (10-2.png).
• -Use device default control for yes/no option (disclose your name).
• -Enable/disable donate button once user selects/deselects accept checkbox.
• -Click on back button, navigate user back to project details page.

7. Volunteers page:

• -Click on 'Be a Volunteer' button at footer, show user the volunteer page (11-1.png).
• -For not logged-in user, show 'Login to Start the Mining' button at footer and click on this button show login page (09.png).
• -Once user is logged-in, show 'Start' button at footer, refer screen (11-2.png).
• -Click on start button, show running result as per screen (12-1.png).
• -Click on stop button, show user the 'thank you' modal popup as per the screen (12-2.png).
• -Click on resume button, show the running result (12-1.png).
• -Click on ok button, close the modal popup.

8. User page:

• -Click on user photo at header, load the user page (13-1.png).
• -Show empty donation history as like screen (13-1.png) and empty volunteer history as like (13-2.png).
• -If user has donation info, show use the details as like screen (13-3.png), use D3 charts to render chart on this page.
• -My Page View:
  • --Scroll the content to see all project details on donation history (14.png).
  • --The header title should show 'My Page' as shown on screen (14.png).
  • --Click on 'Donate Now' button, navigate user to donation page (10-1.png).
  • --Show volunteer history content as like screen (15.png).
  • --Click on 'Be a Volunteer' button, navigate user to volunteer page (11-1.png).
• -Donation Details View:
  • --Click on project row on my page, navigate user to donation details page (16.png).
  • --Click on donated row, navigate user to donation trace page (18.png).
  • --Click on 'Donate to This Project' button, navigate user to donation page (10-1.png).
• -Click on back button, navigate user back to previous page.

9. Charity Organization page:

• -Click on 'Organization' button at footer, show user my organization page (19-3.png).
• -For not logged-in user, show login page (19-2.png).
• -For charts, use D3 charts to render all chart on this page.
• -Scroll the content to see summary tab contents (20.png, 21.png).
• -The header title should show 'My Organization' as shown on screen (20.png).
• -Click on 'Projects' tab, show user the tab contents (22.png).
  • --Replace check and ... icons with the text like "Completed" and "waiting for distribution" as of (14.png)
• -New Project View:
  • --Click on 'Add New Project' button at footer, navigate user to new project page (24-1.png).
  • --User can fill details and click 'Register This Project' button at footer, show user confirm message (24-2.png).
  • --Click on ok button, navigate user to projects tab on my organization page (22.png).
• -My Project Details View:
  • --Click on project row as shown on screen (25.png), navigate user to my project details screen (26.png).
  • --Click on 'Distribute/Transfer' button at footer, navigate user to distribute/transfer page (28-1.png).
  • --Click on 'Execute' button at footer, show user confirm message (28-2.png).
  • --Click on ok button, navigate user to my project details page (27.png).
  • --Click on organization row as shown on screen (29.png), naigate user to transfer trace screen (30.png).
• -Click on back button, navigate user back to previous page.

10. Desktop View:

• -Only charity organization people use the service with PC.
• -For charity organization pages (desktop.png), we would like to have them as the responsive design of corresponding mobile pages, refer all charity organization pages (24-1.png to 30.png).
• -We are not expecting other pages designed like this. Showing the mobile design on the PC browser can be accepted.

Specific HTML/CSS/JavaScript Requirements:

• -Your HTML code must be valid HTML5 and follow best practices.
• -Follow the coding style used in Bootstrap.
• -Structure your code nicely to allow for flexibility and maintainability.
• -Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed on the scorecard.
• -Use CSS to space out objects. Do not use clear/transparent images for the layout purpose, but 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 stylesheet.
• -Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
• -Attribute names and values should be in lowercase and use a hyphen ("-") to separate multiple-word classes (i.e. "main-content").
• -Label all CSS, JavaScript or HTML hacks with explanations so others will understand.

Font Requirements:

Text should not be smaller than 11 points. Text of content body should not be smaller than 13 points. If the original design seem to use smaller fonts, please make the font bigger and adjust the design.

Use font - Arial (please note we will add Japanese fonts later to font-family).

JavaScript Requirements:

All JavaScript must not have a copyright by a 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. We would like to use following JavaScript libraries:

• Bootstrap 3 (Mandatory)
• jQuery and Plugins
• D3

Browsers Requirements:

Mobile versions

• -iPhone 6, 6 Plus, 6s, 6s Plus Safari Browsers
• -Android versions 4.4+ Default Browsers

Desktop versions on Windows & Mac - (you only need to implement pages for the charity organization)

• -IE 11+ Browsers
• -Latest Chrome Browsers
• -Latest Safari Browsers

Note - please include actual browsers you have tested in the submission document/readme file.

Documentation Provided:

Please register to see attached documents.