Challenge Overview
Welcome to IBM - Blue Pulse Mobile Application UI Prototype Challenge
The main task of this project is to create the IBM - Blue Pulse Mobile Application UI Prototype Challenge based on the provided PSD Storyboard design.
For this challenge you just need focus on Mobile layout. In the end of this challenge we need solid UI prototype result 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 need support Standard version too
- As possible we need all pages on this prototype linked each other. Let us know if you need clarification about the flow.
- Fonts: You can use “Helvetica” in your submission
- Your prototype need submit correct informations. Pay attention to all small details, let us know if need clarifications.
Files Downloadable
storyboard.zip - Storyboard Design
1. Login
screenshot: screenshot: 01-1_Login.png
- This is login page, IBM logo placed on top of page
- Application Logo need remain centered when viewed on Landscape view
- Blue Pulse Polling Mobile App need editable
- Login button use same width like the inputs
- Show validation error with red background and red “x” button in the right side
- tap “x” button need clear the input value
- tap Login button again take user to Blue Pulse Landing Page
2. Landing Page
screenshot: 02-1_Home.png
- User landed on this page after logged in
- Background image need remain centered when viewed on Landscape view
- Message text need editable
- Landing page show list of various options available to the user:
-- Take a Poll
-- Manage My Polls
-- Create New Poll
- Make sure icons are easy to change in the future updates
- Arrow icon are clickable and take user to separated pages
3. Take a Poll
screenshot: 02-2_Home_enter pin.png
- User landed on this page after select Take A Poll menu
- You need make sure keypad layout adapt on Landscape and Portrait view
- When user tap each numbers on keypad need reflected on digit PIN placeholders
- tap Cancel button need remove numbers on digit PIN placeholders
- Show validation error message flow when tap Continue button ( screenshot: 02-3_Home_error pin.png)
- After that, tap Continue button take user to Take a Poll flow
1st Question
screenshot: 03a-1_Take a poll.png
- This is 1st screen of Take a Poll questions
- Notice progress steps placed in the bottom.
- You need make sure when we can set more than 3 questions. Progress steps need divided equally.
- Show easy configuration for easy updates in the future.
- Need this solution updated into all progress steps required in every pages.
- You can show animation progress step on page load
- When viewed on Landscape view, header and footer where buttons placed need remains fixed in page. But, content area need scrollable.
- Back button placed on top left and take user back to Landing Page
- Poll question need editable
- User can select more than one checkboxes
- Match style for selected and unselected checkboxes
- Previous button disabled in this screen
- Next button take user to next question
2nd Question
screenshot: 03a-2_Take a poll.png
- Question placed on top
- User can type on textarea
- Progress step filled more area on 2nd Question screen
- You can show animation progress step on page load
- Previous button enabled in this screen and take user back to 1st Question
- Next button take user to next question
3rd Question
screenshot: 03a-3_Take a poll.png
- This screen show question as radio buttons format
- Progress step filled whole area on 3rd Question screen
- You can show animation progress step on page load
- Previous button enabled in this screen and take user back to 2nd Question
- Next button disabled in this screen
- Submit button show up in top right of screen
- Click submit button need show native error message ( screenshot: 03a-4_Take a poll.png)
- Ok button need hide the message.
- Show Blur effect when message show up
- Then Click Submit button again, need show Thank you message ( screenshot: 03a-5_Take a poll.png)
- View Poll Result take user to Poll Result page
- Back to Home need close the message.
- FYI: There are 2 versions of Thank you message. What explained above is with View Results button
- After alert with "View Poll Result" message closed, click Submit button again need show another version without Thank you message (screenshot: 03a-6_Take a poll.png)
- Back to Home for this version need Take user back to Landing page.
5. Poll Result
- FYI: Back & Home button take user to Landing page
1st Poll Result
screenshot: 03b-1_Poll result.png
- This is 1st Poll Result page
- Poll result page also divided by numbers of Poll Questions
- In this 1st Result screen, User see some progress bar in some colors
- You can see animation progress bar on page load
- Previous button disabled in this screen
- Next button take user to next result
- You can show animation progress step on page load
2nd Poll Result
screenshot: 03b-2_Poll result.png
- This 2nd Poll result show list of Top Answers
- All row height should auto expand when filled with more data
- Progress step filled more area on 2nd Question screen
- Previous button enabled in this screen and take user back to 1st Poll result
- Next button take user to next question
3rd Poll Result
screenshot: 03b-3_Poll result.png
- This 3rd Poll Result show donut chart type
- You can show animation donut on page load?
- Progress step filled whole area on 3rd Poll result screen
- You can show animation progress step on page load
- Previous button enabled in this screen and take user back to 2nd Poll Result
- Next button disabled in this screen
6. Manage My Poll
screenshot: 04a_Manage My Poll.png
- This is Manage My Poll screen
- Back button take user to Landing page
- Tabs format placed on top of screen
- 1st tab need show all Polls with all status
- Navigate to each tab, you need show Poll with related status
- Header should fixed on top
- User can scrolling whole table row
- Notice there’s some status with different colors and icons
- Arrow in each rows are clickable
Poll Details (In Progress)
screenshot: 04b-1_In progress Poll.png
- User landing on this detail page after click arrow with Poll with InProgress status
- Click Back button take user to Manage My Poll
- Click Email Result buttons in every Poll Details page need native message, Users can type email address (screenshot: 04b-5_In progress Poll.png)
- Click Close Poll button nees show up Confirmation message (screenshot: 04b-2_In progress Poll.png)
- No button need hide the message
- Yes button take user to Manage My Poll
- Questions section placed in the bottom screen
- Each questions take user to details screen (screenshot: 04b-3_In progress Poll.png & screenshot: 04b-4_In progress Poll.png)
Poll Details (Closed Poll)
screenshot: 04c-1_Closed Poll.png
- This is Poll Details with “Completed” Status
- Delete Poll in the bottom. Click this button need show confirmation message ( screenshot: 04c-2_Closed Poll.png)
- Click Email Result buttons in every Poll Details page need native message, Users can type email address (screenshot: screenshot: 04c-5_Closed Poll.png)
- No button need hide the message
- Yes button take user to Manage My Poll
- Each questions take user to details screen (screenshot: screenshot: 04c-3_Closed Poll.png & screenshot: screenshot: 04c-4_Closed Poll.png)
Poll Details (Draft Poll)
screenshot: 04d_Draft Poll.png
- This Draft Poll Look
- Click Back and Cancel button take user to Manage My Poll
- Delete Poll in the bottom. Click this button need show confirmation message ( screenshot: 04c-2_Closed Poll.png)
- User can type on Poll name input
- “+” button can be dead link in this page
- Each question row can be dead link for
- Save and Publish button can be dead link
7. Create New Poll
screenshot: 05-1_Create New Poll.png
- This is 1st Screen of Create New Poll
- User can type on Poll name input
- Click Back and Cancel button take user to Landing Page
- Save button button take user to to Landing Page
- Publish button take user to Publish Screen page
- When user click “+” button need add new question row
- Click on each question take user to Question Detail screen
Create Question Details
screenshot: 05-2_Create New Poll.png
- User can type Poll Name
- Back and Cancel button take user to Create New Poll Screen
- Delete Poll in the bottom. Click this button need show confirmation message ( screenshot: 04c-2_Closed Poll.png)
- “?” button next to section title. Put dead link for now
- User can toggle Require Question option
- Show blue colored toggle on selected state
- Answers type placed in the bottom
- User can pick maximum 1 Answer Type option (screenshot: 05-3_Create New Poll.png)
- Match selected state styling for radio button
- When radio button selected need auto expand the row below it
- When user pick different radio, another radio need auto closed
- User can collapse/expand each type
- This screen showing “Single” type answer
- User can add/remove options by click “+” or “-” button
- User can type on each text placeholder
- This is screen when user select “Multiple” Type ( screenshot: 05-4_Create New Poll.png)
- User can add/remove options by click “+” or “-” button
- This is screen when user select “Binary” Type ( screenshot: 05-5_Create New Poll.png)
- Only 2 fields show in screen
- User can type on those rows
- This is screen when user select “Star” Type (screenshot: 05-6_Create New Poll.png)
- Click on each star need show checkmark in the right side
- User can only select 1 option for this type
- Click Save button on every steps as stated above take user to Create New Poll with saved Questions (screenshot: 05-7_Create New Poll.png)
8. Publish Poll
screenshot: 06-1_Publish Poll.png
- This is Publish Poll screen
- User can set Start Date and End Date
- Click input need show Native datepicker
- User can toggle option on “Allow Participants to see the result” row
- Publish button take user to Publish screen (screenshot: 06-2_Publish Poll.png)
- Poll PIN message show up on top of screen
- PIN and the URL are clickable, so they can be copied. You can create function so the values copied when user tapped and hold the links.
- You might need create tooltips to let users know that PIN and URL copied in device clipboard.
- Make sure style follow existing Blue Pulse Application Theme
- Share via buttons are clickable, put dead link for now
- Back to Home take user to Landing Page
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)