Challenge Overview
Welcome to the SunShot - Tangerine Responsive App Prototype Challenge! We’re a technology company first, and a marketing facilitator secondly, Our goal is to dynamically communicate the commitment and progress of our corporate clients to the community by transforming scientific data into something on a scale that is meaningful to people. We don’t provide the customer’s messaging but we give them the metered data, design and physical components so that our systems become a branded communications tool that conveys their commitment to Corporate Social Responsibility.
For this challenge, the goal is to create responsive HTML prototype based on the provided storyboard designs and requirements/instructions outlined in the Challenge Details section.
As part of this challenge you will need to document all HTML5/CSS3/JavaScript code. We need clear explanation of the code to help us figure all the HTML5/CSS3/JS code functions and make it easier for future developers and the client to understand what you have built. You are going to use Bootstrap and jQuery for this challenge.
Final Submission Guidelines
The objective of this challenge is to build the responsive HTML5 prototype of this app by using industry standard best practices.
Primary Requirements:
1. Build all the pages mentions in the page requirements outlined below.
2. Layout
- screens 01 to 09 are for Desktop layout.
- screens 11 to 21 are for Layout layout.
- provided storyboards are for retina display.
- tablet (portrait) use mobile layout.
- tablet (landscape) use desktop layout.
3. Navigation
- Implement the toggle of navigation on both desktop and mobile layout.
- The effect should push the content to the right and it will take 100% width if the nav is hidden.
- Link each navigation item to their corresponding pages.
- Sign out link always leads to Login page.
4. Fonts
- You can embed or link directly from Google font is okay.
5. JSON structure
- The structure of your JSON file(s) should follow the structure in the provided MVPServiceEndpoints.pdf document
6. Graphs
- Use D3JS on all the charts/graphs.
- Data should come from JSON file.
Page Requirements:
The following are the pages and functionalities needed for this challenge.
1. Login
- Please refer to 01 Login.png for reference.
- Implement validation error, a simple red text error message at the top of the form when there is an error is okay for now.
- Forgot password is dead link.
2. Home
- Please refer to 02 Home_Case 1.png for reference.
- Create stand alone pages for Case 2 (02 Home_Case 2.png) and Case 3 (02 Home_Case 3.png).
- Make sure all the four icons have complete style for its stages (Red, Green, and Gray icons) that we can easily interchange in the code by simply change a class name.
- Implement running clock.
- Remove the “Search” label.
3. Usage Details
- Please refer to “05 Usage Details 1.png” for reference.
3.1. Banner Notification
- Refer to 09 Banner.png for reference.
- Simulate the banner notification by sliding down the banner after a couple of seconds the page has loaded.
- After about 5 seconds, slide up this banner to hide it. This should be configurable in a JS variable.
3.2. Date tabs
- Implement the date tabs (Day, Week, Month, Year).
- For Week tab, refer to “07 Usage Details 3.png” for content reference.
- Use dummy content with similar layout for the other tabs.
3.3. Slider
- The top section will be a slider.
- The text “Your solar panel...” should be part of the first slide.
- Powered by logo should be image tag base and not CSS background.
- For other content, use the content from “07 Usage Details 3.png” and dummy content.
3.4. Main Content tab
- Tabs “Home Usage” and “Solar” should be implemented.
- For “Solar” tab, refer to 06 Usage Details 2.png for content reference.
3.5. Graph
- Implement the graph.
- Graph data should come from JSON file.
4. Alerts
- Please refer to 08 Alerts.png for reference.
- Swipe from right to left on any row will slide to show the Delete button.
- Clicking this Delete icon will remove the row.
- Swiping from left to right will slide to hide the Delete button.
Browser Compatibility:
- Latest Google Chrome (Windows & Mac OS)
- Latest Safari (Mac OS)
- Latest Firefox (Windows & Mac OS)
- iPad (Chrome & Safari)
- iPhone (Chrome & Safari)
HTML
- HTML should be valid HTML5 compliant.
- 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 "-" to separate multiple-word classes (i.e.. "main-content")
- 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.
CSS
- CSS code should be valid level 3.
- 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 CSS 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.
- Use variables with well-chosen names. Use some sort of naming convention.
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.
- Use jQuery library for this challenge.
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.
- Use separate retina images/file for retina display.
Submission Guidelines:
A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.