Challenge Summary
Welcome to the Sunshot – Tumalow – Dashboard Design Challenge! In this challenge we are looking to design a 3 new pages for our client to help users access their data and view it in a helpful way and to design an Admin view to mange users.
Round 1
Submit your design for a Checkpoint feedback:
0. Navigation.
1. Login.
2. Registration Page.
3. Dashboard Page.
4. Detailed Usage Page.
- 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 Checkpoint feedback:
0. Navigation.
1. Login.
2. Registration Page.
3. Dashboard Page.
4. Detailed Usage Page.
5. Monthly Report Page.
6. Admin View to Manage New Users.
- 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:
In this challenge we need to design a new pages for users to help them view their data in a meaningful way so they can track information, view detailed information and view monthly reports.
We are looking for the [topcoder] design Community to help us with planning our new "user experience" (UX).
Branding Guidelines:
- You can use client logo colors for branding.
Design Considerations:
- Consistency across the sections is Very Important.
- You work needs to be created with the context of a Responsive Design.
- Need a very clean look, professional and slick. The design does not have to just be flat design, but flat design is a good starting point.
- The final application is using the Bootstrap 3 Framework!
- This does not mean you need to understand everything about how Bootstrap 3 works, but just being aware of how good design goes with the framework.
- The source wireframe and design docs give the starting point for layout, interactions and UI elements, but your design should be more than just colored-in.
General Guidelines:
There are many aspects of the web page for which we are looking for YOU to exercise your creativity. These include:
- Exact layout of the elements (graph, gauges, numbers):
-- We will use google charts to implement the charts; please note we can only change colors and sizes for bars, lines, and pies, but we cannot skin them.
-- You are also allowed to show us a second option with custom look for charts.
- Look and feel of the different elements.
- Selection of color palette.
- Consistent use of colors to act as visual cues (e.g. red always means warning, orange always discharge, etc).
- Appearance of graphical elements. For example:
-- “Charge” plot could be shown with a battery icon, rather than a bar chart, perhaps even the Tumalow battery icon.
-- “Emergency run time” can be shown as a digital clock.
-- Elements can be combined, if doing so conveys the information more clearly.
-- e.g. A single gauge showing both building usage and PV production.
Screen Sizes:
- Desktop: 1024px width and height as required.
Supporting Documents:
- Client logos (Logos.zip).
- Dashboard Wireframe (Dashboard Wireframe.png.zip).
- Pages Content (DataProductsList.xlsx.zip).
- Monthly Report Example (Example_Monthly_Report.xlsx.zip).
Required Screens:
0. Navigation:
- How does the user navigate this app?
- Include navigation that you think fits with this app.
- Focus on the priority items and how things should be sized.
1. Login:
- User logs in to the application using his username and password.
- Please show validation error message.
2. User Profile Page:
- Here the user can edit the following information:
-- Company Name.
-- First Name
-- Last Name
-- Title.
-- Utility Name. (non-editable)
-- Tariff ID. (non-editable)
-- Old Password.
-- New Password.
-- Confirm Password.
-- We need “Save” button here.
3. Dashboard Page:
- Please refer Dashboard Wireframe.png & Dashboard sheet from DataProductsList.xlsx
- The sample Dashboard shows a collection of display elements. For the most part these are suggestions for the type of display we hope to see, not recommendations for a particular item. However, certain
specific features of the multi-element line plot should be retained:
-- Combining multiple data products on 1 set of axes.
-- The use of filled regions under the curves and the colors of those regions.
-- Appropriate time-tics.
-- The Notifications display area.
- We need to display Facility Characteristics:
-- Facility Name (Text).
-- Facility Address (Text).
-- Electric Provider (Text).
-- Tariff Schedule (Text).
- We need to display Storage System Characteristics:
-- Max output power (Gauge).
-- Max charging power (Gauge).
-- Output power (Line Plot and Gauge).
-- State of Charge (Gauge).
-- Emergency run time (Clock).
- We need to display Building Activity:
-- Facility electrical demand (Line Plot and Gauge).
-- Billing Demand (Line Plot).
-- PV Activity (Line Plot).
- We need to display Safety and Operation:
-- Notification Name (Text with numbered flags on the line plot (see example Dashboard)).
-- Notification Explanation (Text).
-- Notification Category (Text).
4. Detailed Usage Page:
- Please refer Detailed Usage sheet from DataProductsList.xlsx
- We need to display the following information:
-- Output power (Line Plot).
-- State of Charge (Line Plot).
-- Facility electrical demand (Line Plot).
-- Billing Demand (Line Plot).
5. Monthly Report Page:
- Please refer Monthly Report sheet from DataProductsList.xlsx & the example from Example_Monthly_Report.xlsx
- We need to display the following information:
-- Max demand (Text).
-- Usage storage saved (Text).
-- Demand you were billed for (Text).
-- Items from your bill (Text).
-- Total $ saved (Text).
-- Total kWh used to charge (Text).
-- Total kWh output (Text).
-- kWh Loss (Text).
-- List of line items (Text).
-- Total cost of extra energy (Text).
-- Net savings (Text).
6. Admin View to Manage New Users:
- Admin will be able to see a table of registered users with edit link to modify the following information (required fields marked with *):
-- Company Name
-- First Name*
-- Last Name*
-- Title
-- Email*
-- Password*
-- APIKey*
-- Address, City, State, Zipcode*
-- Utility Name*
-- Tariff*
- Admin will have the ability to add new users, so we need “Add New User” button with the same information above.
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 User:
- Facility owners who are looking to save power.
Judging Criteria:
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- Creativity and ease-of-use is key to the success as it must be engaging to users.
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.