SunShot - One Oak Systems Responsive Application Design Challenge

Welcome to Sunshot - One Oak Systems Responsive Application Design Challenge.
One Oak Systems Mobile application works as Smart HVAC (Heating, Ventilation, and Air Conditioning) system that determines what rooms should be heated or cooled.
 
For this challenge, we are looking responsive web application. Read Round Requirements for details instructions on what screens need to submit.

We are looking for Design Concepts on what should the user see and experience when using the application! Read the design problem carefully and suggest the best solutions!

Good luck and we look forward to your design concepts!

Round 1

Submit your initial designs for Checkpoint Feedback (Only Mobile Version)
Slide 1). Splash Screen
Slide 2). Login Screen
Slide 3). Set Temperature
Slide 4). View Data
Slide 5). Edit Permissions
Slide 6). Init Screen
Slide 7). Savings Setup  
Slide 10). Set Schedule  
Feel free to add any other additional screens which are necessary to explain your concept. You can also add some Desktop screens to get early feedback!
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

Round 2

Your Final designs for all the required designs with all Checkpoint Feedback implemented. (Desktop & Mobile Version)
Slide 1). Splash Screen
Slide 2). Login Screen
Slide 3). Set Temperature
Slide 4). View Data
Slide 5). Edit Permissions
Slide 6). Init Screen
Slide 7). Savings Setup
Slide 8). Savings Setup Landlords
Slide 9). Advanced
Slide 10). Set Schedule
Extra - Style Tile Screen
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

Challenge Details:
One Oak Systems Mobile application works as Smart HVAC (Heating, Ventilation, and Air Conditioning) system that determines what rooms should be heated or cooled.

The purpose of this challenge is to come up with the look & feel and flow for this responsive application. We are looking for the Topcoder Design Community to help us with planning our new "user experience" (UX).

Design Problem
Solve problem of wasted energy in HVAC - size of households shrinking (i.e. 2 people in large home). The goal is to save energy not only for the energy customer, but also the industry at large. For example,  landlords who have lots of small units such as nursing homes, dorms, etc. and want to  have individual heating/cooling. Place sensors in each room and collect data to track patterns of movement, etc. (machine learning) on room usage (zones). Heat/Cool room based on behavior/learned patterns (i.e. TV is watched from 7pm -9pm, so don’t cool the office during that time).

Value Proposition
- Potentially save 30-40% of energy usage by using sensor bundles that collect data and leverage machine learning to analyze and predict usage of each room and thereby optimize & individually control heating/cooling.  
- Leverage data to provide real-time alerts for waste (open window while the AC is on, etc.)
- Allow landlords of multi-tenant buildings to monitor controls and usage
- Set and forget style of the control.  Users can install and only give feedback about their comfort level in a room

File Downloadables
OneOak-Mockups.pdf - One Oak System Wireframe Mockup

Design Requirements:
- Keep in mind we’re looking for fun, easy, and helpful user experience for this application!
- Feel free to explore and suggest about the Design Theme, Layout and Typography for this design challenge.
- Come up with design concepts that shows out-of-the-box solution while providing efficient navigation
- Show all the screens and provide a user flow/click-path and navigation, so we can see how the interactions fit together in the application.
- How quickly could user find information they need?
- Submit your design on these following sizes (Read Round Requirements!)
-- 750px width (iPhone 6 Retina Screen Size), height up to your design.
-- 1280px width (Desktop Responsive Screen Size), height up to your design.

One Oak Systems Mobile Application Features
- Users can visualize how hot/cold their rooms are
- And how they’re saving energy/$$ (compared to last month, last year)
- The system will allow for alerts, such as the detection of leaks in a room
- The App is used to give information to the system AND to override decisions

Submission Requirements:
For required screens below, always refer the attached wireframe mockup (OneOak-Mockups.pdf)

Slide 1). Splash Screen
- Design the simple application logo
- Splash screen need shows “One Oak Systems” as the application title
- Make sure design related to Smart HVAC System
- Check some best practice design of Mobile Splash Screen: https://www.pinterest.com/timoa/mobile-ui-splashscreens/

Slide 2). Login Screen
- Put a simple application logo on top
- Login screen need show these form elements
-- Email (input)
-- Password (input)
-- Login (button)
- Login button take user to Init screen
- Also, need place Register button
- “Saving Calculator” button need linked to “Slide 7). Savings Setup”
- Check some best practice design of Mobile Login Screen: http://graphicdesignjunction.com/2014/03/sign-in-login-app-ui-designs/

Slide 3). Set Temperature
- In the header bar please show left sidebar menu, title and home button
- For Sidebar menu navigations, the options are:
-- Settings (linked to “Slide 7). Savings Setup”)
-- Edit (linked to Slide 5). Edit Permissions)
-- Visualize (linked to “Slide 4). View Data”)
-- Help (We can set this as separate Help page with dummy text)
-- Home (linked to “Slide 6). Init Screen”)
-- Set Temperature (linked to “Slide 3). Set Temperature”)
- Suggest the best practice for the menu navigation order
- Check some best practice design of Sidebar Login Screen: https://www.pinterest.com/timoa/mobile-ui-navigation-sidebar/
- For the home button, user can select which House they need to control.
- After selecting a home, User can also select which room they want to monitor
- Notice: there’s Add a Room button that will take user to create New Room
- Display current temperature on top of screen.
- Notice in this page you also need create tab layout for “Set”, “View” and “Edit” screens.
- There’s  a “?”(question mark icon) help button for each specific screen. You can put dummy content for now.
- Think about how to let user toggle temperature from Fahrenheit to Celsius degree and vice versa
- It can tell the user about average temperature of their selected House and Room
- Create fun graphic for the user to tell the system whether they are “Hot”, “Warm”, “Perfect”, “Cold” and “Cool”
- User also able to select the targeted temperature in numbers directly.
- Temperature Progress: Once a user selects whether they are too hot/cold we will track the progress of how close the room is to being the desired temperature.
-- Feel free to be creative on how to show the “progress bar”

Slide 4). View Data
- User landed on this screen after click the “View” tab
- This screen shows  "Temperature" and "Savings" dropdowns
- Both dropdown displays as separated line in graphic chart for comparison
- In this screen user can see comparison of Temperature vs time and how much they’re saving energy vs time
- The user needs to be able to set time range for comparison
- Please design chart graphic for easy comparison of savings and/vs temperature

Slide 5). Edit Permissions
- For this Edit Permissions user can view, add, edit and remove user permissions
- Show proper flow for all main action for this Edit Permissions
- Show input fields for Name and Email
- Need a quick button to “Set Temp” and “View Saving” pages
- Tabs in the bottom of mockup screen should be “Set”, “View” and “Edit” tabs. Set “Edits” as active tabs
 
Slide 6). Init Screen
- User landing on this screen after logged in. This is the initial screen
- Display screen that help user view the Comparison of Last and Next Month Saving, Current and Outside Temperature also Current Humidity easily.
- Think about how to let user toggle temperature from Fahrenheit to Celsius degree and vice versa
- Toggle temperature can be an option in the settings if the designer doesn't think it looks good on the page
- Tabs in the bottom should be “Set Temp” and “View Graphs”
- Please show us how “View Graph” page look based on provided fields/data

Slide 7). Savings Setup
- User can change House information via dropdown menu
- There are 3 dropdowns choices for “Home Owner”, “Number of Resident” and “Type Resident”
- “Home Owner” dropdown is to choose between homeowner and landlord.
- “Number of Resident” dropdown is for number of residents and can be a number picker.
- “Type Resident” dropdown is option to pick from a list of profiles for residents
- User needs to input data for Room Type and Quantity
- Calculate button that placed in the bottom of screen. Click this button need shows a popup/overlay will appear with a % or even eventually $ we estimate the user can save, for now it suffices to have generic text
- Click “Advance” button will take user to Advance option explained below (“Slide 9). Advanced”)

Slide 8). Savings Setup Landlords
- This screen basically similar like Slide 7). Savings Setup
- But only need shows 2 dropdowns for this screen.
- 1st dropdown is the same drop-down for homeowner/landlord.
- 2nd dropdown is for building type
- This is Saving Setup screen for Landlord
- User can change building type
- Data need filled also change, please show similar form content
- Calculate and Advance button placed in the bottom of screen

Slide 9). Advanced
- This is Advanced screen look
- User can edit/change the name of the room (displayed at the top of the screen)
- User can edit/change the room size by select available options
- User can add another new room.
- User can navigate to other rooms by click Next and Prev buttons
- Also user can change number of Vents and Windows
- Schedule button take user to next “Slide 10). Set Schedule” explained below
- Finish button take user to “Slide 6). Init Screen”

Slide 10). Set Schedule
- User landed to this screen after click the “Schedule” button
- User can add a new room, think about how the design flow looks.
- Mockup showing landscape view, you need think about the page experience on portrait screen
- Also, provide suggestion for how user can delete/edit the room.
- In the right side of room name, there will be a place for 24hr timeline (be creative!)
- User can set preferences for turning the system on/off each hour.
- In the first column, the different color of box and number represent the current temperature of that room. More red is hotter, more blue is colder.
 
11). Extra - Style Tile Screen
For this screen, we ask that you put together a one page style tile that clearly shows your concept for this design. Please search in google for “style tile template” to see common examples of this type of screen.

Required style tile content:
a) color scheme, where you call out color for specific items such as:
- Clickable (non-active) link items
- Color for active link items
- Color for specific areas (backgrounds, header backgrounds, etc)
- Color-related scheme / rules

b) Typography rules, where you call out typography for specific items such as:
- headers
- sub-headers
- paragraphs
- lists
- etc

c) Navbar style (including both active and inactive styles)
d) Data visuals styles (your charts, graphs, etc)

Optional style tile content:
While other elements will be added in subsequent challenges, you are free to include anything else you want to call out now, to strengthen your submission - container styles or other elements that define your design concept, such as:
- Form element styles and related labels for : text input, textarea, drop select (picklist), checkbox, radio option, buttons for “cancel” and “submit”
- Section header which can be expanded and collapsed, with text label
- Data table element styles for: column headers and labels and indicators for “sort by”, two data rows included a “selected” or highlighted row
- Icon styles

Feel free to put anything else from your design.

Target Audience:
- Homeowners (residential energy customers)
- Commercial multi-tenant building owners (hospital, dorm, nursing home, etc.) - potentially focus only on this multi-unit segment

Judging Criteria:
- Is the design styled to be appealing and desirable?
- Does it clearly convey what the app is supposed to let you achieve / what problem it is designed to solve.
- Does the design perform the function it was designed for?
- Is the design easy to use and understand?
- Is your storyboard design apply Best Practice of Responsive Web Design solution?

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.