Challenge Overview
Welcome to Hercules Wifi Maps Mobile UI Prototype Challenge
The main task of this challenge is to create the Hercules Wifi Maps Mobile UI Prototype Challenge based on the provided wireframe basic layout and function.
On this challenge, we need you focus to create responsive prototype with Bootstrap base for MOBILE view only. In the end of this challenge we need solid UI prototype result with best practice solution, that can be updated easily in the future to support Tablet and Desktop version.
Final Submission Guidelines
Documentation Provided
Screenshots.zip - Screenshot Layout as Guideline to your prototype
XFinity-Sans-Fonts.zip - Client font
General Notes
- We not provided storyboard design in PSD/AI format like common UI Prototype format. For this challenge you need build the layout based on screenshot layout.
- All pages of UI Prototype must support responsive design solution, for this challenge you just make sure prototype look good on Mobile screen
- Make sure your prototype show fluid layout when opened in Desktop browser!
- Our main priority in this challenge need make sure all functions works properly
- All pages on this prototype need linked each other.
- Use provided font (XFinity-Sans-Fonts.zip), suggest proper typography!
- No framework allowed for this challenge, you need build using HTML plain UI Prototype
- Base of prototype need created using Bootstrap layout.
- All form element as possible need to use browser based style OR from bootstrap style
- Re-create all icons in your prototype based on XFINITY_Sans_Icon-Font OR Bootstrap Icons
- Create interaction/functions by using Bootstrap component and Bootstrap Javascript
- Use JSON to load and save all datas
- Please use your best judgement about consistency layout and functions. Let us know if you need clarification about via challenge forum.
UI PROTOTYPE PAGE REQUIREMENTS:
1). Home
screenshot: 1-MyAccount_Internet-Home.PNG
- This is the Home screen of application
- In the header bar, put dead link for Setting and Search button
- Page title placed centered
- Match gradient background color
- Use icon placeholder above the “Brutus Wi-Fi” text
- Show Wifi Settings can be dead link
- Message need to be centered
- Setup Wifi and No Thanks button need created with css styling
- All buttons can be dead link
- Show Settings and Support menu
- Only “Diagnose Wifi” menu is clickable, other menus can be dead link
- In the bottom, use fixed bar for menu navigation
- Re-create all icons in your prototype based on XFINITY_Sans_Icon-Font OR Bootstrap Icons
- Need create active & inactive state style
2). Diagnose Wifi
screenshot: 2-MyAccount_Internet-WifiTool_Splash.PNG
- User landed on this screen, after click “Diagnose Wifi”
- Back button take user to homepage
- Show title and description text
- “Go to Diagnostic Tool” take user to next screen
3). Wifi Measurer
- Back button take user to Diagnose Wifi screen
Empty Screen
screenshot: 3-MyAccount_Internet-WifiTool_Empty.PNG
- By default page show empty screen for Wifi Measurement list
- Add New Wifi Measurement take user to Add Screen
Add Screen
screenshot: 4-MyAccount_Internet-WifiTool_Add.PNG
- Back button take user to Empty Screen
- User can input Location Name
- Current Measurements show Latency and Download Speed
- Save button need capture new location and go to Added Screen
- Cancel button take user back to Empty screen
Added Screen
screenshot: 5-MyAccount_Internet-WifiTool.PNG
- This is screen after Wifi location added
- There’s colorful rounded in the right side of each location
- When click each row, need able to collapse and expand
- We also need create swipe function to show delete button and then delete related row
screenshot: 6-MyAccount_Internet-WifiTool_SelExpanded.PNG
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 consistent, pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.
- Using best practice of Responsive 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