Challenge Summary
Welcome to SunShot – Tangerine Responsive App Design 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.
Round 1
Submit your design for a Checkpoint feedback:
0. Navigation. (Mobile + Desktop)
1. Landing Page. (Mobile + Desktop)
2. Homepage. (Mobile + Desktop)
3. Usage Page. (Mobile + Desktop)
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Round 2
Final Design plus any Checkpoint feedback:
0. Navigation. (Mobile + Desktop)
1. Landing Page. (Mobile + Desktop)
2. Homepage. (Mobile + Desktop)
3. Usage Page. (Mobile + Desktop)
4. Alerts Page. (Mobile + Desktop)
5. Notification Bar Feature. (Mobile + Desktop)
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Challenge Description:
The goal of this challenge is to design the visuals for Tangerine Plus Responsive application based on the requirements below.
We are looking for the [topcoder] design Community to help us with planning our new "user experience" (UX).
Supporting Documents:
- Logo and Branding Colors (Logos-etc.zip).
- Screen Requirements (Screen flow.pptx).
Screen Sizes:
- Mobile Resolution: Design for iPhone 6 Retina Display 750px x 1334px.
- Desktop Resolution: Design for 1280px width and height as required.
Make sure you create graphic in 'shape' format, so when we resize graphics will still look sharp! It will be great if you can provide the landscape version.
Required Screens:
Please refer to Screen flow.pptx before you start designing your solution.
0) Navigation:
- Please refer Slide 3.
- Pull down menu:
-- Home.
-- Usage.
-- Alerts.
1) Landing Page:
- Please refer Slide 2.
- We need Tangerine Plus Logo to be present on this screen.
The user should be able to fill his:
- Username and password fields.
- Remember Me Checkbox.
- Forgot Password link
- We want Enter button.
- When the user clicks on Enter, the Home page will be displayed.
2) Homepage:
- Please refer Slide 4.
- This screen will show a graphical flow of electricity from solar panels and utility; There will be different graphical flows as the product evolves (example: addition of battery for storage).
- Dynamic (numeric) values from Tangerine+ data feed; reference data map image (This need to be redone - it’s just an example) in the slide,
Arrow signifies electricity flow:
-- When Solar panels are producing electricity, arrow will be yellow.
-- When electricity is imported from utility, arrow will be red.
-- When electricity is exported to the utility, arrow will be green.
-- When value is zero for any icon, arrow will be grey.
3) Usage Page:
- Please refer Slides 5-7.
The viewer will be able to select Today and This Week:
- Today chart:
-- X-axis is hour.
-- Y-axis is Watt-hour.
-- The chart will be a stacked bar chart showing:
--- Electricity usage from solar (yellow).
--- Electricity imported from utility (red).
--- Electricity exported to utility (green).
- This week chart:
-- X- axis is day.
-- Y-axis is kiloWatt-hour.
-- Chart will be stacked bar with same coding as Today chart.
- Text string above each chart:
-- Your solar panels have provided xx% of today’s/this week’s usage.
- Refer to slide 6 as an example.
- Refer to slide 7 for Today Chart example.
4) Alerts Page:
- Please refer Slides 9.
This is a list of notifications:
- Notification will be added to list when it is pushed to viewer:
-- Show each alert with date and time.
-- Example:
--- Tomorrow is a Peak Demand day. Conserve energy. 9/25/15 5:10PM
5) Notification Bar Feature:
- Please refer Slides 8.
- Notification will be in banner that drops down from top of page.
- Banner will not cover page content.
- Banner will appear for 1 minute.
- User can push it up sooner if desired.
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
Target Audience:
- Anyone that wants to take advantage of solar power.
- This app is our first venture into an app for homeowners.
Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
- Your design should possible to build and make sense as a mobile application.
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.