Challenge Overview
Welcome to Savenia Responsive Web UI Prototype Challenge
For this UI Prototype challenge we need you to create Savenia - Home Data Entry look and feel.
Expected result from this challenge is create best practice of UI Prototype responsive layout when viewed on Desktop/Tablet and Phone (Landscape and Portrait Layout) based on provided storyboard screen.
We just provide Tablet Storyboard design, we need your simple/best judgments to show fluid layout on Mobile view. No score down!
Read more details UI Prototype Requirements and Flow below.
Final Submission Guidelines
Important!
- Create UI Prototype using Best Practice of Responsive Design solution for Desktop/Tablet and Phone Landscape and Portrait View
- We not provide Mobile layout storyboard. We need your simple/best judgments to show fluid layout on Mobile view. No score down!
- Use your best judgement for Tablet Portrait view. Let us know if need clarification.
- Use CSS3 Media Queries to load different styles for each page and don't build different HTML for different device/layout.
- Use Open Sans in your UI Prototype submission
- Feel free to use any open source frameworks and library. Let us know if need confirmation via Challenge forum
File Downloadables:
storyboard.zip - Storyboard Design
1. Landing Page
screenshot: 01 Landing Page.jpg
- In the header, there’s a logo placed centered and need take user to Landing page when viewed in another pages
- Header area can use fixed top placement
- Introduction image placed below the logo and need use fluid image solution
- Introduction text can use fixed width and always placed in the right side
- “Get Started Now” button take user to “Quick Home Check” page
- “Efficient homes sell for premium...” text use fluid background
- There’s 3 main buttons displayed as one line, buttons are clickable. You can put dead link for now
- Match text styling for text below the buttons
- Make sure when viewed on Portrait layout, all buttons remain in single line. You might need adjust the padding/margin.
2. Quick Home Check
- Show “Quick Home Check” title on top of page
- User landed on this page after click “Get Started” button in Landing page
- Application Logo take user to Landing page
- Step bar always placed in the bottom of page
Step 1
screenshot: 02-Checklist1.jpg
- Form placed in center of page
- There’s text placeholder on each inputs and icon background in the left side of inputs
- On user focus, text placeholder need to be hidden
- Step bar always placed in the bottom of page
- “Next” button take user to the next step
Step 2
screenshot: 02-Checklist2.jpg
- In this step, user can checked on more than 1 checkbox
- Form show up in table format and divided by 2 columns
- Make sure row auto expand when filled with more data
- Match checked on/off state for checkboxes
- “Other” text input placed in the last row
- User can navigate steps when click “Prev” and “Next” button
Step 3
screenshot: 02-Checklist3.jpg
- Form divided by 2 columns
- Match icon background in the left side of inputs
- User can navigate to “Prev” step
- Click “Submit” button take user to “Complete Screen”
Complete Screen
screenshot: 02-Checklist4.jpg
- “Congratulations” icon and message placed on top of this screen
- Text information need auto adjust on Portrait layout
- “Register” button take user to “Thank you” screen
- This is “Thank you” screen look and feel (screenshot: 02-Checklist5.jpg)
- Click “Register” button again take to “Register” page
3. Registration
screenshot: 08Registration.jpg
- This is Registration page look and feel
- Form displayed in center of page
- Registration Label use right alignment
- “Sign Up” button placed in centered of page and take user to “Login page”
- In the left side of form there’s a banner. “Know More” button can be dead link
- Also in the right side also place rounded banner. “Go” button can be dead link
- All text need editable in both banners
4. Login Page
screenshot: 09_1Login-Page.jpg
- Show text placeholder for both “Email ID” and “Password” inputs
- “Login” button in the bottom of page
- “Forgot Password” can be dead link for now
- Show Login information as bullet list
- Click “Login” button need show error validation message (screenshot: 09_2Login-Page.jpg)
- Click “Login” button again take user to “Control Panel” page
- In the left side of form placed a banner. “Know More” button can be dead link
- Also in the right side also placed another rectangle banner. “Know More” button can be dead link
- All text need editable in both banners
5. Control Panel
screenshot: 10Control-Panel.jpg
- This is Control Panel page look and feel
- In the header, there’s menu button and Application logo
- 3 big buttons placed in the bottom for “New Rating”, “Existing Ratings” and “Order and Audit”
- “New Rating” take user to “New Rating” page
- “Existing Ratings” can be dead link
- “Order and Audit” take user to “Order and Audit” page
- Make sure buttons remain in placed when viewed on Portrait layout
- Menu button is clickable (screenshot: 10Control-Panel_1.jpg)
- Match menu content (screenshot: 11Navigation-Menu.jpg)
- Menu sidebar height need filled whole content area based on device height. Ignore storyboard look
- “Savenia Rated Home” linked to Control Panel
- “Tips” can be dead link
- “FAQ” can be dead link
- “Pricing” can be dead link
- “How We Rate” can be dead link
- “Contact” can be dead link
- “Logout” linked to Login page
- User see tooltip when click “?” button that placed next to “Order an Audit” button (screenshot: 12Control-Panel_Question-Tip.jpg)
6. New Rating
screenshot: 13New-home-rating.jpg
- This is new Rating page
- On header area, there’s menu button in the left side and “My Homes” and “New Home” text links in the right side
- Both “My Homes” and “New Home” can be dead link
- Below header, there’s “arrow” button that will take user to “Control Panel” page
- “Begin Rating” page take to another page with filled values on table form (screenshot: 13New-home-rating_2.jpg)
- New Rating page show table list information.
- Show 2 columns for “Informations” and “Input Here” columns
- “Informations” need show the label.
- Click on “?” buttons need show the tooltip. You can re-use tooltip from Control panel page.
- You can put dummy content for tooltips
- “Input Here” column consist of “input” and “dropdown”
- Show sample values for dropdown
7. Order and Audit
screenshot: 14Order-an-Audit.jpg
- User landed on this page after click “Order” and “Audit” on Control Panel page
- On header area, there’s menu button in the left side and “My Homes” and “New Home” text links
- Page show 2 big buttons for “Create New Home Audit Profile” and “Create Existing Home Audit Profile”
- For now, click both buttons need show “Appliances” screen
Appliances
screenshot: 15Appliances.jpg
- On header area, there’s menu button in the left side and “My Homes” and “New Home” text links
- Also, add new text link for “Control Panel” that will take user to “Control Panel” page
- This page show numbers of screenshot images.
- Make sure on Portrait layout, images remain show in single line
- Border and shadow need created use css stylesheet
- “Arrow” button take user to “Order an Audit” page
- User can select each images and show “checkmark” icon in the top left of screenshot image (screenshot: 16Appliances.jpg, screenshot: 17Appliances.jpg)
- “Done” button take user to “Indicate Year View” page
Indicate Year View
screenshot: 18Indicate-year-view.jpg
- “Arrow” button take user to previous page
- User can increase/decrease the year by press “+” and “-” buttons
- Also on Tablet/iPhone we need year changed when rolled or swipe to change the number
- Year text is view-only, not editable
- “Submit” button take user to next page. This is just prototype flow
Appliances Alt version
screenshot: 19Appliances2.jpg
- “Arrow” button take user to previous page
- Match screenshot content like storyboard look
- User can select each images and show “checkmark” icon in the top left of screenshot image (screenshot: 16Appliances.jpg, screenshot: 17Appliances.jpg)
- “Done” button take user to next page. This is just prototype flow
Text View
screenshot: 20Text-view.jpg
- “Arrow” button take user to previous page
- No interactions needed for all images
- Make sure this page support fluid width for “Portrait layout”
- “Continue” button take user to next page. This is just prototype flow
Misc View
screenshot: 21-Misc-View.jpg
- “Arrow” button take user to previous page
- Dropdown displayed in page, show sample value
- Each “Saved Bulbs” should let user checked more than 1 option.
- “Add Bulb” can be dead link
- For now, “Covered Fixture” button take user to next page. This is just prototype flow
Columns Sample
screenshot: Example-for-8-Columns.jpg
- You can re-use completed “New Rating” for this page layout
- Match title and table information like storyboard look
8. Additional Pages from GUI Kit
Error Page
screenshot: GUI-Kit/01 Appearance.png > See last row
- We need Error page designed based on GUI Kit
- This can be separated page
- Error icon placed in the left side
- Text need editable in the right side
- Continue button can be deadline
Model Number
screenshot: GUI-Kit/12 Model Number.png
- We need Model page designed based on GUI Kit
- You can re-use “Header” and “Bottom” bar from this page (screenshot: 02-Checklist2.jpg)
- Model screenshot image in the left side
- Text need editable in the right side
Comparison Slider
screenshot: GUI-Kit/12 Model Number.png
- We need Comparison Slider designed based on GUI Kit
- You can re-use “Header” and “Bottom” bar from this page (screenshot: 10 Slider.png)
- User can drag the slider to those 4 table columns
- Drag bar always placed centered of each column
- Match styling for table content
- Notice there’s arrow to indicate flow for each columns
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.
CODE REQUIREMENTS:
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.
Browsers Requirements
- Safari Browser on Desktop (Mac & Windows)
- Firefox Browser on Desktop (Mac & Windows)
- Chrome Browser on Desktop (Mac & Windows)
- Safari Browser on iPad Standard (Landscape & Portrait View)
- Safari Browser on iPhone (Landscape & Portrait View)