Challenge Overview
Welcome to IBM - Expense Pre-Approval Mobile Application UI Prototype Challenge
The main task of this project is to create the IBM - Expense Pre-Approval Mobile Application UI Prototype Challenge based on the provided PSD Storyboard design.
For this challenge you just need focus on Mobile layout with fluid layout that works all iPhone platfrorms. 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.
- Match similar fonts in your submission. "HelveticaNeue" & the iOS iPhones support this font.
- Your prototype need submit correct informations. Pay attention to all small details, let us know if need clarifications.
- Expected library for UI Prototype Challenge is HTML/CSS/JS, AngularJS or Jquery/Jquery Mobile
Files Downloadable
storyboard.zip - Storyboard Design
1. Login
screenshot: 00-Login-0-Splash-screen.png
- On page load splash screen show by default
- After some second, Login form show up (screenshot: 00-Login-1-default.png)
- Application Logo need remain centered when viewed on Landscape view
- Expense Pre-Approval Mobile App text need editable
- There’s text placeholder for both inputs.
- When user start typing on inputs, text placeholder become hidden (screenshot: 00-Login-2-input.png)
- When typing, right side should display the "X" button
- Login button use same width like the inputs
- Simulate preloading when post the login form (screenshot: 00-Login-3-loading.png)
- Animation need to be smooth.
- After some second, show Login Failed information (screenshot: 00-Login-4-invalid.png)
- Click OK button need hide the failed information
- After user typed on input, there’s “x” button in the right side to remove the values. (screenshot: 00-Login-5-retry-login.png)
- Click Login button again take user to Landing Page
2. First Launch
screenshot: 01-home-0-first-launch.png
- User landed on this page after logged in
- There’s list rows in page, user can scrolled the page, while the header “Expense Pre-Approval” and “Please Select An Application” remain fixed on top of page.
- Each row need clickable
- Match typography for title and sub-title properties
- Show different tap style (screenshot: 01-home-1-first-launch-selected.png)
- On click, there’s checkmark icon in the left side and take user to Homepage (screenshot: 01-home-2-select-another-application.png)
3. Homepage
- screenshot: 02-Sub-sequence-0.png
- This is homepage look and feel
- Application title need to be editable
- There’s checkmark in the top right side
- Main Action buttons need displayed in homepage:
-- Create New Request
-- Request Awaiting My Approval
-- My Requests
-- Logout
- Create New Request take to Create Request page
- Request Awaiting My Approval take to Request Awaiting My Approval page
- My Requests take to Manage Request page
- Logout take to Login page, notice there’s no arrow for this row
- There’s number indicator for “Request Awaiting My Approval” & “My Requests”. Number indicators need support max 3 characters.
4. Create Request
screenshot: 03-Create-Request-1-select-type.png
- Create Request flow need show different screen
- In this 1st step, user can select a request type
- Home button take user to Homepage
- There’s list rows in page, user can scrolled the page, while the header and “Please Select A Request Type” remain fixed on top of page.
- Click each type take user to Create New Request flow
Step 1
screenshot: 03-Create-Request-2-step-1.png
- Home button take user to Homepage
- Progress steps displayed below the header
- Each steps need use fluid width, so progress step show fluid layout on different screen sizes
- Show active state for Step 1
- Notice there’s “%” in the right side
- Header need remain fixed on top of browser screen
- Footer need remain fixed on bottom of browser screen
- Main content area can scrollable
- Required field indicate by “*” (red asterisk mark)
- Match how dropdown look for every field
- Click dropdown, need show some value (screenshot: 03-Create-Request-2-step-1-dropdown.png)
- Selected value show checkmark in the right side
- There’s Catalogue icon below the dropdown. Click this button need load the modal window (screenshot: 03-Create-Request-2-step-1-catalogue.png)
- Text input placed on top of modal
- You need build autosuggest function that will highlight (make the text bold)
- Below the input, there’s list that user can scrolled (screenshot: 03-Create-Request-2-step-1-catalogue-auto-suggest.png)
- Match scrollbar look and feel
- Cancel button need hide the modal
- on Step 1 page, there’s refresh button below “Div / Department” box, this can be dead link
- Back button need to take user to Select Request Type
- Click Save as draft on each page need show the modal (screenshot: 03-Create-Request-8-review-save-as-draft.png)
- Next button take to next step
Step 2
screenshot: 03-Create-Request-3-step-2.png
- This is the 2nd Step look and feel
- For completed step, color change into green and icon show “checkmark”
- User can click top green completed step to edit the form again
- Also in the right side of progress steps, percentage increased to 20%
- Match how selected look for radio button (screenshot: 03-Create-Request-3-step-2-radiobutton-textfield-active-state.png)
- Also when user focus on input, border turn into blue color.
- Date need by need show up native datepicker in modal format (screenshot: 03-Create-Request-6-step-5-show-calendar.png)
- User can navigate the month, by click “Next” and “Prev” button
- User can selected on date
- Cancel need hide the modal
- Done also need hide the modal
- Back button need to take user to Step 1
- Next button take to Next Step
Step 3
screenshot: 03-Create-Request-4-step-3.png
- This is Expense Amount Step
- For completed steps, color change into green and icon show “checkmark”
- Also in the right side of progress steps, percentage increased to 50%
- Show table format in page
- All values input must be numerical
- No need create sum function
- Match each vertical and horizontal content
- Back button need to take user to Step 2
- Next button take to Next Step
Step 4
screenshot: 03-Create-Request-5-step-4.png
- This is Step 4 look and feel
- For completed steps, color change into green and icon show “checkmark”
- Also in the right side of progress steps, percentage increased to 75%
- “Expense Description”, “Detailed Business Justification” & “Impact Statement” are textarea
- Supporting Document is upload field.
- Date need by need show up native datepicker in modal format (screenshot: 03-Create-Request-6-step-5-show-calendar.png)
- User can navigate the month, by click “Next” and “Prev” button
- User can selected on date
- Cancel need hide the modal
- Done also need hide the modal
- Apply datepicker for all datepicker input
- Back button need to take user to Step 3
- Next button take to Next Step
Step 5
screenshot: 03-Create-Request-6-step-5.png
- in this Step 5, match content for each fields
- Datepicker button need show up the modal
- Back button need to take user to Step 4
- Next button take to Next Step
Step Review
screenshot: 03-Create-Request-7-review.png
- This is the last step of Create New Request
- There’s edit button in the right side of each sections
- Click these buttons need take user to related pages
- User can expand/collapse each sections
- you need make sure it support multiple toggle elements
- Next button updated into Submit button for this last step
- Click Submit button need show the confirmation modal (screenshot: 03-Create-Request-9-review-submit-confirmation.png)
- Yes, Submit button take user to Information modal window (screenshot: 03-Create-Request-10-review-ID-request-information.png)
- No, Cancel button need hide the modal window
- On Information modal window (screenshot: 03-Create-Request-10-review-ID-request-information.png), click OK button take user to Manage Request page.
4. Manage Request
screenshot: 04-Manage-Request-0-default.png
- This Manage Request page
- Home button take user to Landing Page
- Dropdown need show the Filter (screenshot: 04-Manage-Request-1-show-filter.png)
- Selected option need show the checkmark
- Update dropdown need change content in Manage Request page by selected filters
- Icons placed in the left side
- All title need to be editable
- Click Each row take to different Request Details based on it’s own Request Status
5. Request Details
Request Details Approved
screenshot: 05-Request-Details-1-Approved.png
- This is Request Details page for Approved Status
- Approved icon placed in the right side
- Quick information placed on top of page
- User can toggle each sections
- User can scrolling the page, while header remain fixed on top of page
- Back button take user to Manage Request page
Request Details Rejected
screenshot: 05-Request-Details-2-Rejected.png
- This is Request Details page for Rejected Status
- Rejected icon placed in the right side
- Quick information placed on top of page
- Show additional reason of rejected
- User can toggle each sections
- User can scrolling the page, while header remain fixed on top of page
- Back button take user to Manage Request page
Request Details Open
screenshot: 05-Request-Details-3-Open.png
- This is Request Details page for Open Status
- Open icon placed in the right side
- Quick information placed on top of page
- Notice only need show “Type” and “Submitted On” for this page
- User can toggle each sections
- User can scrolling the page, while header remain fixed on top of page
- Back button take user to Manage Request page
Request Details Draft
screenshot: 05-Request-Details-4-Draft.png
- This is Request Details page for Draft Status
- Draft icon placed in the right side
- Quick information placed on top of page
- Notice only need show “Type” and “Last Created On” for this page
- Remove and Edit button show in this page
- Click “Remove” button need show Confirmation modal (screenshot: 05-Request-Details-5-Draft-remove.png)
- Yes, Remove button take user to Information modal window (screenshot: 05-Request-Details-6-Draft-removed-successfuly.png)
- No, Cancel button need hide the modal window
- Edit button can be dead link
6. Request Awaiting Approval
screenshot: 06-Request-Awaiting-approval-1-List.png
- This Request Awaiting page
- Basically this page show same layout like Manage Request page
- For the icons in the left side, there’s tag for “NEW” request
- User can scrolling the page
- Click each row take to request details page with “Open” status (screenshot: 06-Request-Awaiting-approval-2-Details.png)
- Reject and Approve button show
- Click Reject button need show up modal window(screenshot: 06-Request-Awaiting-approval-3-rejected.png)
- User can type text on Textarea
- Yes, reject button take to another information modal (screenshot: 06-Request-Awaiting-approval-4.png)
- Click Approve button show up modal window (screenshot: 06-Request-Awaiting-approval-5-approve-confirmation.png)
- Yes, approve button take to another information modal (screenshot: screenshot: 06-Request-Awaiting-approval-6-approved.png)
- Ok button need hide the modal
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)