Challenge Overview
Welcome to Sunshot - OneOakSystem UI Prototype Challenge.
The main task of this project is to create the Sunshot - OneOakSystem 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
Project 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.
Application purpose is need to solve problem of wasted energy in HVAC - size of households shrinking. 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).
Downloadable Files:
Storyboard.zip - Storyboard Design
Important!
- For this UI Prototype submission we need your submission support responsive solution from Desktop, Tablet and Mobile screen
- Suggest best practice Responsive Web Design Breakpoints Sizes
- Provided storyboard for Desktop version using widescreen display (1280px width).
- 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
- As possible we need all pages on this prototype linked each other. Let us know if you need clarification about the flow.
- Application will be developed with PhoneGap framework.
- Make sure your UI Prototype submissions not bring conflicts when moving to PhoneGap framework
- Also you can use open source library like jQuery.
UI Prototype Page Requirements
1. Splash Screen
Desktop Version
screenshot: Desktop/00 ~ Splash.jpg
- User landed to this screen on page load
- Show application logo and title centered of browser screen
- After some seconds, need show up the login page
Mobile Version
screenshot: Mobile/00 ~ Splash.jpg
- For mobile version, you need show application logo and title close like desktop version.
2. Login
Desktop Version
screenshot: Desktop/01 ~ Login.jpg
- User landed to this screen on page load
- Use 2 column layout format
- Application logo placed in the left side of page
- Form placed in the right side
- Match Username and password field styling
- Login button take user to “2. Initial Screen”
- “Forgot Password” and “Sign Up” can be dead links
- “Try Our Savings Calculator for Free!” button take user to “8. Savings Setup”
Mobile Version
screenshot: Mobile/01 ~ Login.jpg
- On Mobile version, Logo and form need display as stacked layout
- Display application logo and title like desktop version.
- Login page need use fluid width on Mobile screen
3. Initial Screen
Desktop Version
screenshot: Desktop/02A ~ Initial Screen.jpg
- Application logo placed in the top left of screen
- In the right side, there’s menu for “Home”, “About Us”, “How it Works” and “Contact Us”. Put dead links for now
- There’s Welcome message placed in the right side of header bar
- Logout button take user to Login page
- Main menu navigation placed on left side of screen
- Left side menu placed in the left side and always show up
- Show arrow marker and different background for current active menu navigation
- User can toggle temperature by click “Celsius” or “Fahrenheit” initial character
- Active temperature indicated by white colored background style
- In the right side there’s current Houses information
- This area divided by All House Selection and Room Selection
- Selected house marked with checkmark icon
- Select other house need change the selected hous
- User can scrolling the house selection
- There’s dot pagination placed in the bottom of scrolling area
- After selecting a home, User can also select which room they want to monitor
- Show checkmark for selected room
- Add a Room button that will take user to create New Room
- Main graphic text information will updated automatically in the future. Make sure text not break outside the graphic
- Show us easy way to update the numbers without breaking the graphic
- Make sure typography match with graphic
- Show current status message in the right side
- Savings Setup button take user to “8. Savings Setup”
- There’s alert and warning button next Savings Setup button
- Click the alert and warning button take user to “4. Alert Screen”
- Simulate after some seconds for this screen, show up the floating alert (screenshot: 02B ~ Master Alert.jpg)
- Click the alert and warning flyout take user to “4. Alert Screen”
Mobile Version
screenshot: Mobile/02A ~ Initial Screen.jpg
- This mobile screen layout for Initial Screen
- Left and right menu need accessed via left and sidebar menu in mobile version
- On top of application there’s button for menu in the left side, title on center of screen and House menu in the right side
- Only need display the graphic for mobile version that placed centered of screen
- Saving Setup, Alert and “?” button need placed below the graphic
- When user click the “?” button need show up the “Current Status” information (screenshot: 02B ~ Help.jpg)
- Close button need hide the modal window
- Simulate after some seconds for this screen, show up the floating alert (screenshot: 02C ~ Master Alert.jpg)
- Flyout alert need covered whole screen
- Click left menu button need show up left side menu (screenshot: Mobile/03 ~ Side Menu Left.jpg)
- Application logo placed on top of left menu
- Match menu navigation order like desktop version
- For Set Temperature, please show temperature toggle buttons
- Click home icon in the right side of header bar need show up the house and room selection (screenshot: Mobile/04 ~ Side Menu Right.jpg)
- Show same function for house selection like desktop version
4. Alert Screen
Desktop Version
screenshot: Desktop/02C ~ Alerts.jpg
- This is Alert Screen
- No active state for main menu navigation
- Show “Current” and “Resolved” tab
- List Alert and Warning in table format
- You can re-use same data for Resolved tab
- In the right side there’s information of Alert screen
Mobile Version
screenshot: Mobile/02D ~ Alerts.jpg
- On Mobile version, there’s Back button instead of menu in the header bar
- Tab layout need covered whole screen
- Show table list of Alert and Warning
- No need display main navigation in the bottom of this screen
5. Set Temperature
Desktop Version
screenshot: Desktop/04 ~ Set Temperature.jpg
- This is Set Temperature screen
- There’s breadcrumb below the logo
- User can select “Hot”, “Warm”, “Perfect”, “Cold” and “Cool”
- Match different color for selection
- Selected value indicated by the white arrow shape
- User can tap on each selection, also drag the white arrow shape
- User can also click the “-” and “+” button that will increase the progress bar and change the temperature number
- Use 1 point increment for the target temperature
Mobile Version
screenshot: Mobile/05 ~ Set Temperature.jpg
- Circle slider placed on top and target temperature in the bottom
- “?” button need show the Help modal window
6. View Data
Desktop Version
screenshot: Desktop/05A ~ View Data.jpg
- User landed on this screen after click the “View” menu
- Page screen shows "Temperature" and "Savings" tabs
- By default user see “Temperature” tab
- "Savings" tab can use same data
- Change tab also affect different circle in the right side
- Match chart styling from label, legend and background
- In the right side there’s circle information for each line
- 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 date range for comparison
- Click the date range need load date selection modal window (screenshot: 05B ~ Calendar.jpg)
- Inside the modal window, user can navigate the months
- Need able to set the range
- Set button capture selected range into datepicker input
screenshot: Mobile/06A ~ View Data.jpg
- Page showing tabs on top of screen
- Circle background placed below the tabs
- Saving Result information need show up when click the “?” button
- Click Date range need show up the calendar modal window (screenshot: 06B ~ Calendar.jpg)
7. Edit Permissions
Desktop Version
screenshot: Desktop/06 ~ Edit Permission.jpg
- For this Edit Permissions user can view, add, edit and remove user permissions
- In the left side, there’s form for input fields for Name and Email also dropdown for change the Administrator
- Add button placed below the Add User table, and can be dead link
- In the right side, there’s current user information
- Edit and Delete button placed in the right side
- Edit button can be dead link
- Click the “X” button need remove the related user
- Match table informations for different roles
Mobile Version
screenshot: Mobile/07 ~ Edit Permission.jpg
- Add user placed on top of screen
- Then, Current User list placed below
- User need able scrolling the Current Users content
- User information need show up when click the “?” button
8. Savings Setup
Desktop Version
screenshot: Desktop/07A ~ Savings Setup.jpg
- 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, Landlord and Resident.
- “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: Student, Family, Senior and Shared House
- Room Type information displayed using tree layout
- User needs to able to select options 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 (screenshot: Desktop/07B ~ Savings CTA.jpg)
- Sign Up Now button can be dead link
- Click “Advance” button will take user to Advance option explained below (“10. Savings Setup Advance”)
Mobile Version
screenshot: Mobile/08A ~ Savings Setup.jpg
- Menu shows a back button
- Main navigation button hidden on this screen
- Page stacked House Information and Room type
- Root menu need displayed in single column
- Calculate and Advance button display as single line
- Match overlay content placement that show center alignment (screenshot: Mobile/08B ~ Savings CTA.jpg)
9. Savings Setup LandLord
Desktop Version
screenshot: Desktop/08 ~ Landlord.jpg
- This screen show up after user change HomeOwner dropdown to Landlord
- In the right side of screen, form type changed.
- User can change building type
- Screen need shows 2 dropdowns for this Units and People.
- Calculate and Advance button placed in the bottom of screen
Mobile Version
screenshot: Mobile/09 ~ Landlord.jpg
- Menu shows a back button
- Main navigation button hidden on this screen
- House information placed on top of screen
- Room type placed in the bottom
10. Savings Setup Advance
Desktop Version
screenshot: Desktop/09A ~ Advanced Setup.jpg
- This is Advanced screen look
- User can edit/change the room size by select available options in the graphic
- Show different graphic for each different room size: (09A ~ Advanced Setup.jpg, 09B ~ Advanced Setup.jpg
09C ~ Advanced Setup.jpg, 09D ~ Advanced Setup.jpg, 09E ~ Advanced Setup.jpg)
- User can navigate to other rooms by click Next and Prev buttons
- Also user can change number of Vents and Windows
- User can add another new room. Put dead link for now
- Schedule button take user to next “11. Savings Setup Schedule” explained below
- Finish button take user to “8. Savings Setup”
Mobile Version
screenshot: Mobile/10A ~ Advanced Setup.jpg
- Menu shows a back button
- Main navigation button hidden on this screen
- User can slide each room by click Next and Prev button
- Show different graphic for each different room size: (10A ~ Advanced Setup.jpg, 10B ~ Advanced Setup.jpg, 10C ~ Advanced Setup.jpg, 10D ~ Advanced Setup.jpg, 10E ~ Advanced Setup.jpg)
- Also need support swipe to navigate to Next and Prev room
- Vents and Windows dropdown placed below the graphic
11. Savings Setup Schedule
Desktop Version
screenshot: Desktop/10A ~ Shedule.jpg
- User landed to this screen after click the “Schedule” button
- In the first column, the different room name show up.
- In the right side of room name, there will be a place for 24hr timeline
- Match label for each cells
- Show different color based on color map on Set Temperature page
- There’s temperature for each range, and always placed centered
- User can remove each room click the “x” button
- User can edit each room click the “x” button (screenshot: Desktop/10B ~ Shedule Edit.jpg)
- User can add new time range from “+ Time” button
- Done button need hide the modal
- Finish User and add a new room button, and take user to “8. Savings Setup”
Mobile Version
screenshot: Mobile/11A ~ Shedule Portrait.jpg
- Menu shows a back button
- Main navigation button hidden on this screen
- Add Room button placed in the top of screen
- Schedule displayed as fluid width
- User can edit each room click the “x” button (screenshot: Mobile/111B ~ Schedule-Edit.jpg)
- When user change orientation to landscape, schedule should expand to browser width (screenshot: Mobile/11C ~ Shedule Landscape.jpg)
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 Pixel Precisions, pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.
- Responsive Web Design solution!
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
- Firefox Latest Version
- Safari Latest Version
- Chrome Latest Version
- Chrome, Firefox and Safari on iPhone 4, 4s, 5, 5s, 6 and 6+ (Landscape & Portrait View)
- Android Browser