Challenge Overview
Welcome to SunShot - Sun Swarm - Community Solar Responsive UI Prototype Challenge
The main task of this project is to create the SunShot - Sun Swarm - Community Solar Responsive UI Prototype based on the provided PSD Storyboard design. For this challenge you just need create prototype submission to support responsive on Desktop, Tablet and Mobile layout. In the end of this challenge we need solid UI prototype result with best practice solutions
Good luck and we’re looking forward to your submissions!
Final Submission Guidelines
Downloadable Files:
Storyboard.zip - Use this storyboard design
Font_Proxima_Nova.zip - Font for your prototype
Font_Source_Sans_Pro.zip - Font for your prototype
Important!
- For this UI Prototype submission we need your submission support responsive solution that works on any screen size (e.g. smart phone, tablet, desktop)
- Suggest best practice Responsive Web Design Breakpoints Sizes
- Provided storyboard for Desktop version using widescreen display (1280px width)
- Your UI Prototype submission MUST support fluid layout for min-width is 992px for all pages
- Provided storyboard for Mobile version using iPhone 6 Retina Portrait display (750px x 1334px).
- Make sure your submission support Standard layout with 320px width screen size using best practices of Responsive Web solution.
- You might need adjust some element placement in 320px width screen size, if not possible within current timeline, we’ll fix at final fixes phase
- All pages need use fluid layout when transform into Landscape or Portrait view.
- For Tablet version, you can use Mobile layout with fluid width
- Your prototype need submit correct informations. Pay attention to all small details, let us know if need clarifications.
- Embed required fonts in your submission.
- Expected technology AngularJS, Bootstrap and jQuery.
- It’s important that the code be well organized and easy to read. The client’s team has coders that will review the code and add to it after the contest
- All datas as possible need loaded by JSON
UI Prototype Page Requirements
1). Landing Page
DESKTOP VERSION
screenshot: Desktop/00-Landing-Page.jpg
- This is landing page look before user logged in
- Background image need covered all areas
- SunSwarm logo placed in the left side
- Main navigation placed in the right side
- Become a Developer button need use blue border
- Click this button need take user to Become a Developer page
- Help menu can be dead link
- Sign Up button need show up the modal
- Community Solar message placed centered of background image
- There’s search input with text placeholder.
- Click search button take user to Search Result explained below
- “How Sun Swarm works” displayed with 3 columns layout
- Application icon need placed on top, then the title and description in separated lines
- Notice there’s + and = characters between icons
- Featured Projects also displayed in 3 columns layout
- Show Project title, address, description and number of subscribers
- See More button take user to Search result explained below
- Our Community section, create 2 columns for Subscribers and Developer
- Need show image on top then the description
- Match difference of Go! and Build Now! button
- Click button need take to correct flow
- Footer need show some menu navigations, put dead links for now
- Copyright placed in the left side, social icons placed in the right
MOBILE VERSION
screenshot: Mobile/00 Mobile.png
- For mobile version, logo placed centered
- Then menu buttons displayed below the logo
- Welcome message become centered
- Search input need to use fluid width
- How Sun Swarm works displayed in stacked layout
- Icon in the left side and text information in the right side
- Featured Projects displayed as slideshow in mobile version
- There’s See More button below slideshow
- There’s dot pagination below slideshow. User can swipe the slides
- Our Community section show as stacked layout
2). Become a Developer
DESKTOP VERSION
- Blue background header placed on top of screen
- Logo and main navigation menu remain same like Landing page
- Back button need take user to Landing page
Step 1
screenshot: Desktop/01-Become-a-Developer.jpg
- Step title need use center alignment
- User will first choose the state
- Match dropdown styling with grey background and there’s arrow in the right side
- Match dropdown selected options (screenshot: Desktop/02-Become-a-Developer-Step-1.jpg)
- Selected option need to use blue colored border and check mark icon
- State dropdown need capture all US states
- There’s scrollbar to let user scrolling to another options
- Cancel take user back to Landing Page
- Continue button take to Step 2
Step 2
screenshot: Desktop/03-Become-a-Developer-Step-2.jpg
- On Step 2, user need filled some form fields
- Match text input, dropdown, radio button styling
- User click Start Date need able to pick from datepicker
- User can upload multiple images (screenshot: 04-Become-a-Developer-Uploaded.png)
- User can remove uploaded files by click “x” buttons
- Continue button need show up Thank you message (screenshot: 04-Become-a-Developer-Thank-You.png)
- Cancel take user back to Landing Page
- Click Continue button take user to Landing Page
MOBILE VERSION
screenshot: Mobile/01 Mobile a.png
- This is moble version look
- Header bar show up on top
- There’s back button and page title on headerbar
- There’s no footer in mobile version
- Step 2 look (screenshot: Mobile/02 Mobile a.png)
- Thumbnails look after file uploaded, user can remove the uploaded files (screenshot: Mobile/02 Mobile b.png)
- Click Continue button take user to Thank you message (screenshot: Mobile/0a Mobile b.png)
3). Sign Up
DESKTOP VERSION
screenshot: Desktop/05-Sign-Up.jpg
- Clicking on “Sign up” should show screen contains option to choose the user type
- On Step 1, user need chose role type, corresponding sign up form is shown
- Show 2 columns layout
- Role titles are clickable
- Cancel button need take user back to previous page
- Show checkmark next to selected role and overlay above the unselected image (screenshot: Desktop/06-Sign-Up-Step1-Developer.jpg)
- Continue button take user to Step 2 of the selected role
Step 2 Developer:
screenshot: Desktop/07-Sign-Up-Step2-Developer.jpg
- This is Step 2 for Developer role
- All fields in this modal windows are text inputs
- Show Password Checker function
- Checkbox placed in the bottom
- Terms of Use can be dead link
- Cancel button need hide the modal
- Continue button show the account created message (screenshot: Desktop/08-Sign-Up-Completed.jpg)
Step 2 Subscriber:
- User select subscriber role (screenshot: Desktop/09-Sign-Up-Step1-Subscriber.jpg)
- This is Step 2 look (screenshot: Desktop/10-Sign-Up-Step2-Subscriber.jpg)
- Subscriber will have the ability to sign up using their email or they will be able to sign up with facebook.
- Put dead link for all social buttons
- Match all form fields
- Continue button show the completed message (screenshot: Desktop/08-Sign-Up-Completed.jpg)
MOBILE VERSION
screenshot: Mobile/05 Mobile a.png
- This is Sign Up selection look
- Both roles displayed as stacked layout
- Show checkmark next to selected role and overlay above the unselected image (screenshot: Mobile/05 Mobile b.png)
Step 2 Developer
(screenshot: Mobile/05 Mobile c.png)
- For mobile you need show label on top and inputs below
- Strength Checker placement can remain same like desktop version below the input.
- Account created message show up in separated page (screenshot: Mobile/05 Mobile d.png)
Step 2 Subscribers
screenshot: Mobile/10 Mobile.png
- For mobile you need show label on top and inputs below
- Optional title need in same placement like desktop
- Account created in separated page
4). Search Results
DESKTOP VERSION
screenshot: Desktop/11-Search-Result.jpg
- When a user initiates a search in the landing page, they will be able to see the list of projects.
- Search input placed on top of screen
- This screen need show boxes in 3 columns layout format
- For each boxes show grey background
- Photo placed on top of box
- Project title is just label
- Then address and number of subscriber
- Monthly Savings, need show for 3 years
- Match green border styling
- Subscribe button take user to Subscribe page below
- Detail button take user to Project Detail for user that not signed in
- When user scrolling to the bottom, you need show loading message and after some seconds, load another row
- Match information for all boxes
MOBILE VERSION
screenshot: Mobile/11 Mobile.png
- Header bar need use dark grey background
- Menu button placed in the left side
- Find a Solar search input displayed below the header
- Each boxes need fluid width
- Loading message show up when user scrolling to the bottom of page
5). Project Details (User not signed in)
DESKTOP VERSION
screenshot: Desktop/12-Project-Details.jpg
- This page shows the details for the users who are not signed in
- Search input placed on top of screen
- Back button take user to Search Result
- There’s Date information next to Project title
- And subscribe button in the right side take user to Subscribe page below
- Map need build with Google Map
- Show marker on Map
- Project Images and thumbnail placed in the right side
- Click thumbnail need update the big image
- Only need display 6 thumbnails
- See all button can be dead link
- Below the map and slideshow, user see more information in grey box
- Match color diffeences
- Show animated Progress bar
- Nearby Projects need show 4 projects at a time
- Nearby Projects need use dots pagination
- Nearby Projects show project thumbnail, title, description and subscriber number
MOBILE VERSION
screenshot: Mobile/12 Mobile.png
- Header bar need use dark grey background
- Back button placed in the left side
- Find a Solar search input displayed below the header
- Then, properties title and email button
- Map placed on top of screen
- View all link need consistent text
- Each information need fluid width
- Nearby Projects displayed as slideshow.
- Only need display 1 slide for mobile version
6). Sign In
DESKTOP VERSION
screenshot: Desktop/13-Sign-In.jpg
- Click Sign In button on menu navigation need load separated
- Show Email and Password field
- Default login button need to be orange
- Forgot Password can be dead link
- Show validation error with message on top of view also button turn into red background color (screenshot: Desktop/14-Sign-In-Error.jpg)
- Sign Up button take user to Sign up page. Use blue colored border
- For this challenge, you need to create different login credentials that will take the user to 2 separate flows only.
- Create README file that contains user credentials for these required roles:
- Developer Role
- Subscriber Role
- Clicking the Login button should take the user to the separate flows explained below:
MOBILE VERSION
screenshot: Mobile/13 Mobile a.png
- Header bar need show up menu button
- Sign in displayed in separate page for mobile version
- Show validation error message (screenshot: Mobile/13 Mobile b.png)
A. Developers:
7). Developer (Basic Account)
DESKTOP VERSION
screenshot: Desktop/15-Developer-My-Projects.jpg
- This is landing for Developers
- Show message to invite user for Premium Account
- Upgrade Now button take user to Premium Upgrade Option Page
- There’s statistic placed on top of page
- Need show icons in the left side for each statistics
- Page show 2 tabs for My Projects and Notifications
- Add New Project need open separated page
- My Projects tab show list of Developer project
- Project image placed in the left side with CO2 information below it
- Then Location and other information in the right side
- Subscribe progress bar need show animation effect
- Detail button take user to Project Detail
- invite Subscribers take user to Invite Subscribers page
MOBILE VERSION
screenshot: Mobile/15 Mobile.png
- For mobile version, statistics need displayed in separated line
- All boxes need use fluid width for mobile version
8). Project Details (Basic Developer Account)
DESKTOP VERSION
screenshot: Desktop/16-Developer-Project-Detail.jpg
- This page shows the project details
- Back button take user to My Projects page
- Edit, Delete and Invite buttons placed in the right side
- Map need build with Google Map
- Show marker on Map
- Project Images and thumbnail placed in the right side
- Click thumbnail need update the big image
- Only need display 6 thumbnails
- See all button can be dead link
- Below the map and slideshow, user see more detail information
- Subscribe progress bar need show animation effect
- Invite Subscribers to Project area placed in the bottom
- invite Subscribers take user to Invite Subscribers page
- Upgrade Premium Account take user to “9). Project Details (Premium Developer Account)” explained below
MOBILE VERSION
screenshot: Mobile/16 Mobile.png
- Back button placed on header bar
- All section need use fluid width
9). Project Details (Premium Developer Account)
DESKTOP VERSION
screenshot: Desktop/17-Developer-Project-Detail-Premium.jpg
- This page can be stand alone page, no need linked to another pages
- This page is same as projects details shown to a developer with basic account but only difference is at the bottom, user will able to see the “Premium Services” with 4 buttons in the bottom page
MOBILE VERSION
screenshot: Mobile/17 Mobile.png
- Back button placed on header bar
- All section need use fluid width
10). Invite Subscribers
DESKTOP VERSION
screenshot: Desktop/18-Developer-Invite-Subscribers.jpg
- Back button take user to My Projects
- This page shows a list of matching subscribers and will have the ability to users nearby the project, they will be able to choose the miles within which they would like to view matching subscribers.
- Search Tool and Sort By buttons can be dead link
- Map need covered all main content are
- There’s some number on map
- Below the map, there’s project title
- Clicking on “Invite All” or “Send Invitation” will show a form that shows a pre-entered message that will be sent to the user (screenshot: Desktop/19-Developer-Invite-Subscribers-Invite-Modal.jpg)
- Destination row will be label
- State need show textarea
- Show subscriber in separated row
- Thumbnail in the left side
- Subscriber information in the right side
- Estimated Utility Cost and Utility Provide need use black colored text
- Cancel and Send buttons need hide the modal
MOBILE VERSION
screenshot: Mobile/18 Mobile.png
- Search Tool and Sort By function need placed below the header bar
- Invite All button should be centered
- Each Subscribers need show fluid width
- Click invite button need load separated invitation page (screenshot: Mobile/19 Mobile.png)
- Show fluid layout for the invitation form
11). Add New Project
DESKTOP VERSION
screenshot: Desktop/20-Create-New-Project.jpg
- Clicking on “Add New Project” shows this page
- User will select the state first and then based on the chosen state the new project form will be shown.
- This form is similar to the form shown when the user selects to “Become a Developer” in Landing page.
MOBILE VERSION
- Refer previous Create New Project for mobile
12). Developer Notification
DESKTOP VERSION
screenshot: Desktop/21-Developer-Notifications.jpg
- User access this tab from Developer page
- There’s number notification in the header tab
- Basically this screen use same layout with my Projects
- In the center column, you need show list of notifications from related project
- See all button can be dead link
MOBILE VERSION
screenshot: Mobile/21 Mobile.png
- There’s number notification in the header tab
- For mobile version, all notification need displayed in separated row
- All boxes need use fluid width for mobile version
13). Premium Upgrade Option Page
DESKTOP VERSION
screenshot: Desktop/30-Premium-Account.jpg
- This page contains information of Premium Services benefits in separated list
- User can checked on and off the Premium Services
- Match checked on and off style
- And then, Premium Tools in the bottom
- There’s Upgrade to Premium Account button
- Click this button need take to another screen to let user select their plan (screenshot: Desktop/31-Premium-Account-Plan.jpg)
- Show Customer Acquisition information in green colored border area
- Match Customer Acquisition table content
- Billing Information placed in the left column
- News and Suggestion placed in the right column
- Submit button can be dead link
MOBILE VERSION
screenshot: Mobile/30 Mobile.pn
- All page content need use fluid width
- Click Upgrade button take user to separated page (screenshot: Mobile/31 Mobile.png)
- Follow fluid layout order from top to bottom
B. Subscribers
14). Subscriber - All Projects
DESKTOP VERSION
screenshot: Desktop/22-Subscribers-All-Projects.jpg
- User this this page after login as Subscriber
- Search input placed on top of screen
- Show tab navigation for All Projects, My Projects and Notification
All Projects
- This is default tab
- There’s Order By dropdown
- Click Order By dropdown need show some options (screenshot: Desktop/23-Subscribers-All-Projects-Order-By.jpg)
- Filter button need show filter options (screenshot: Desktop/24-Subscribers-All-Projects-Filter.jpg)
- User can change the country, state and utility via dropdown
- Use sample options for dropdown
- Distance and Saving, create slider bar. You also need add missing drag bar
- Re-use project boxes from Search Result screen
- Scrolling to the bottom need show Loading message and then after some seconds need load another row
My Projects tab
screenshot: Desktop/25-Subscribers-My-Projects.jpg
- You have matched with these project message displayed on top of screen
- Show 3 Project boxes
- My Subscription Status table placed in the bottom
- Show information in table format
- Project name show dot circle based on status color
- Details button take user to Project Detail page explained below
Notification tab
- Re-use data from Developer > Notification tab
MOBILE VERSION
screenshot: Mobile/22 Mobile.png
- Tabs design need follow desktop version
- All boxes displayed in separated row
- Use fluid width for all boxes
- Filter button, missing this flyout for desktop (screenshot: Mobile/24 Mobile.png)
15). Subscribe Project
DESKTOP VERSION
screenshot: Desktop/26-Subscribers-My-Projects-Subscribe-Project.jpg
- When a user decides to subscribe for a project, we show this page.
- Back button take to previous page
- This page will provide details about the subscription and the period for which the subscription will be valid
- They will be able to see the amount that will be saved by subscribing to this project
- When they click on “Subscribe” in this page, they will see an agreement which they need to accept by signing..and clicking ‘I Agree”.. (screenshot: Desktop/27-Subscribers-My-Projects-Subscribe-Agreement.jpg)
- User can signed the Digital Signature or Upload Signature file
- Create Digital Signature function to allow user sign in the provided area
- Once they have successfully agreed, they see a success message. (screenshot: Desktop/28-Subscribers-My-Projects-Subscribe-Agreement-Success.jpg)
MOBILE VERSION
screenshot: Mobile/26 Mobile.png
- Search input on desktop need to be consistent like mobile version
- All sections need use fluid width
- Agreement screen, need show fluid layout (screenshot: Mobile/27 Mobile.png)
- Submit need success screen in separated screen (screenshot: Mobile/28 Mobile.png)
16). Project Detail
DESKTOP VERSION
screenshot: Desktop/29-Subscribers-Project-Detail.jpg
- This is Project vDetail page for Subscriber
- Basically this using same page like Developer Project Detail page
- Make sure Subscribe button take user to Subscriber Page
MOBILE VERSION
screenshot: Mobile/29 Mobile.png
- Back button placed on header bar
- All section need use fluid width
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient HTML/CSS3 code that works in all the requested browsers.
- All elements should be consistent, pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.
CODE REQUIREMENTS:
HTML/HTML5
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
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)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- 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.
CSS3
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
Javascript
- 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.
Images
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- Make sure your submission look sharp for Retina and Standard devices
Browsers Requirements
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser
- Chrome, Firefox and Safari on iPhone 4, 4s, 5, 5s, 6 and 6+ (Landscape & Portrait View)
- Android Browser