Challenge Overview
Welcome to IBM - SiBM Internet of Things Assessment Mobile App UI Prototype Challenge
The main task of this project is to create the IBM - SiBM Internet of Things Assessment Mobile App UI Prototype Challenge based on the provided PSD Storyboard design.
For this challenge you just need to focus on Mobile layout with fluid layout that works on all iPhone platforms. In the end of this challenge we need solid UI prototype results with best practice solutions
Final Submission Guidelines
Notes:
- All pages need use fluid layout when transform into Landscape or Portrait view.
- FYI: Provided storyboard is Retina version, your submission needs to support Standard version too
- Your Prototype need look good on iPhone 4, 4s, 5, 5s, and 6 screen size. Use best practice for fluid layout.
- As possible we need all pages on this prototype linked to each other. Let us know if you need clarification about the flow.
- Match fonts in the design in your prototype.
- Your prototype needs to be submitted with correct information. Pay attention to all small details, let us know if you need clarification.
- Expected frameworks for UI Prototype Challenge is AngularJS. You can also use jQuery as Javascript library
Files Downloadable
Storyboard Design download via Google Drive (.ai Adobe Illustrator format)
1. Landing Page
screenshot: 00 Landing Page.jpg
- On page load splash screen show up by default
- Building background image need display correctly when viewed on Landscape view
- Titles that placed on top of page are editable. Match the text coloring
- Below the background image, user can swipe to navigate between items
- Number and rounded need created as css based.
- Make sure rounded shape automatically expand when filled with more characters
- Start button need take user to Landing page
- Terms of Use is dead link and always placed in the left side
- Copyright is plain text and always placed in the right side
2. Homepage
screenshot: 02 Home page.jpg
- This Homepage look and feel
- Menu button placed in the top left of header bar
- MAP title placed in the center of header bar
- Create some list of menu for “Internet of Things”, “Assessment Type 2” and “Assessment Type 3”
- Show different icons for each menus
- User see menu navigation when click top left menu button (screenshot: 01 Navigation Page.jpg)
- Click right content area need close the menu
- In the sidebar menu navigation, logo placed on top of sidebar
- Show icons for each menus
- Start Assessment menu take user to Homepage
- Notice in the right side of “Past Assessment” there’s a number counter
- Help menu can be dead link
- About menu can be dead link
- Terms of Use is dead link and always placed in the bottom center of sidebar menu
- For each row, you need create swipe function to show up the button that will take user to Description page (screenshot: 03 Home Page Transition.jpg)
- Only one row swipe at the same time
3. Description of Assessment
screenshot: 04 Tile Description.jpg
- Please show icon and tile also the description of Assessment
- Match typography styling for all text
- “Assess Now” button placed below description and take user to Assessment page
4. Assessment Page
Assesment Tab
screenshot: 05 Assessment Page.jpg
- Assessment tab shows up by default when loading Assessment Page
- Header and footer need to be fixed
- Match tab active state with blue colored border
- There’s some rows placed inside tab content
- User need able to scroll the page to see another rows
- There’s floating progress and slider bar in the bottom of screen
- Each row consist of “Number”, “Text information ” and “Readiness Level”
- Active row indicated by 100% transparency style, and inactive rows with less transparent style
- Change the selected row need updated the selected active and inactive state (screenshot: 06 Assessment Page 02.jpg)
- When a user answers a question, the next question should automatically be highlighted and scrolled into the active area of the screen.
- Also the progress and slider bar need show different value for related rows
- Users need to answer statements by responding with their readiness level from 1-5
- Swiping in from the right side of a row will show additional information (screenshot: 07 Assessment Page 02 Transition.jpg)
- This is sample screen after user filled some row (screenshot: 08 Assessment Page 02 description.jpg)
- Screen when user scrolling to the bottom of page (screenshot: 09 Assessment Page.jpg)
- Screen when user select row (screenshot: 10 Assessment Page.jpg)
- Screen when user has answered all questions. (screenshot: 11 Assessment Page.jpg)
- User is prompted to “View Assessment” or go “Back” to questions.
- Back button need hide the pop up
- View button need take open the Report tab
- Before all rows completed, when user click the Report tab, need show this pop up (screenshot: Prompts - View Report.jpg)
5. Reports Tab
- When user click “Report” tab, need show pop up before can see the content (screenshot: 12 Report Page 01.jpg)
- Back button need hide the pop up
- View button need take open the Report tab
- Reports tab show Radar Chart on top of page (screenshot: 13 Report Page 02.jpg)
- You can use these plugins to build the chart. Make sure chart render correctly across browser!
- http://bl.ocks.org/tpreusse/2bc99d74a461b8c0acb1
- http://papermashup.com/demos/d3-radar-chart/
- Match radar chart legend and and label styling
- User can swipe to see another chart (screenshot: 14 Report Page 03.jpg)
- Overall progress bar with comparison for Your’s and Industry’s displayed in the bottom of screen
- When click shape inside the chart, need reflect different information for progress bar
6. Recommendation Tab
screenshot: 15 RecommendationPage 01.jpg
- User navigate to this tab via Recommendations tab
- There’s 2 extra icons that placed in the right side of header bar, Share and PDF icons
- Use consistent PDF icon without the arrow
- Each rows show different colored numbers
- Match text information for each row
- There’s floating action buttons for Delete and Save
- User can swipe from left side to show additional information (screenshot: 16 RecommendationPage Description.jpg)
- Row height need expanded when filled with longer text (screenshot: 17 RecommendationPage Long Description.jpg)
- Swipe from right side need show Industry Readiness level (screenshot: 17 RecommendationPage Transition 01.jpg)
- Notice Your’s text show up when user swipe from right side (screenshot: 18 RecommendationPage Transition 02.jpg)
- Show different content when swipe another rows (screenshot: 19Recommendation Page Transition 03.jpg)
- Delete button need show Delete Confirmation (screenshot: Prompts - Discard.jpg)
- This pop up show when click the PDF button (screenshot: Prompts - Save 1.jpg)
- Icon and title placed on header area
- User can select “Save to the App” and “Email Report” options (screenshot: Prompts - Save 2.jpg)
- Both option need show different flow
- When user select “Email Report” option, they will see another pop up to fill the Email Address (screenshot: Prompts - Email.jpg)
- Click Back button on this step need take user back to selection pop up, and click Submit button need close the pop up
- When user select “Save to the App” option, they will see another pop up to fill the title (screenshot: Prompts - Name Assessment.jpg)
- Click Back button on this step need take user back to selection pop up, and click Submit button need close the pop up (screenshot: Prompts - Saved Successfully.jpg)
- Back and Submit buttons need close the pop up
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.
Browsers Requirements
- Safari Browsers on iPhone (Landscape & Portrait View)
- Chrome Browsers on iPhone (Landscape & Portrait View)