Challenge Overview
Welcome to IBM - DSW Mobile Application UI Prototype Challenge
The main task of this project is to create the IBM - DSW 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.
- Your prototype need submit correct informations. Pay attention to all small details, let us know if need clarifications.
Files Downloadables
storyboard.zip - Storyboard Design
1. Login
screenshot: 01-1_Login.png
- This is login page, IBM logo placed on top of page
- DSW Mobile Quotes need editable
- There’s icons for Intranet ID and password input fields
- Login button use same width like the inputs
- Show native validation error, Background need to become blur (screenshot: 01-2_Login.png)
- Press ‘OK’ need hide the validation error modal
- Click Login button again take user to DSW Quotes page
2. DSW Quotes
screenshot: 02-1_DSW Quotes.png
- User landed on this page after logged in
- Menu button placed in top left
- Press this button need show up left sidebar navigation (screenshot: 02-2_DSW Quotes.png)
- On sidebar navigation, application title show up on top
- Home menu showing active state
- Messages showing number indicators
- Match menu navigation need displayed in sidebar
- Transition when toggle the navigation need to be smooth and show no lag.
- Page title remain centered
- Email button placed in the right side, number indicator show 2 digits numbers
- Search button placed below the title, when press enter, need take to Search Result page. Refer details below
- Welcome message background is image based
- Welcome title need editable
- DSW Quotes showing 3 menu options:
-- All Quotes
-- Favorites Quotes
-- Recent Quotes
- Click on those menus need load separated page explained below
3. Search
screenshot: 03-1_Search.png
- User landed on this page after press enter on top search input
- Cancel button will take user to Home page
- Show sample of search result list
- User can drag search result list (screenshot: 03-2_Search.png)
4. All Quotes
screenshot: 04_All Quotes.png
- This is All Quotes page
- Search button will take user to Search Result page
- Numbers of quotes placed below the header
- Filter button placed in the right side, click this will take to Filter page
- Each row showing quote with different status
- User can toggle favorite button.
- Click on the arrow will take to Quote Detail page
- Match alternating row style
- Match margin/spacing for quote information
5. Favorite Quotes
screenshot: 05-1_Favorite Quotes.png
- This is Favorite Quotes
- Clear All button need show confirmation pop up (screenshot: 05-2_Favorite Quotes.png)
- Ok button will remove the favorites quotes
- Filter button in the right side
- All row in this screen showing Favorite Quotes only
- Unfavorited the Quote button need remove row from this page
6. Recent Quotes
screenshot: 06-1_Recent Quotes.png
- This is Recent Quotes
- Notice there’s multiple Status displayed in row
- Clear All button need show confirmation pop up (screenshot: screenshot: 06-2_Recent Quotes.png)
7. Filter
- In Filter page there are some options of Filter
- Cancel and Apply button take to previous page
screenshot: 07-1_Filter.png
- This is filter by Status
- User can select more than 1 option
- Click All need automatically select all options
- Unselected one item will also checked off the All option
screenshot: 07-2_Filter.png
- This is filter by Date
- There’s options by One Week and Month
- Month options can select more than 1 option
screenshot: 07-3_Filter.png
- This is filter by Country
- User search Country on top input field
- There’s alphabet indicator in the right side
screenshot: 07-4_Filter.png
- This is filter by Sort
- User can only pick one option at a time
8. Quote Details
- This is Quote Details page
- Tab navigations placed below the header
- Match Active and inactive state
Info Tab
- This tab need show up on page load (screenshot: 08-1_Quotes Details.png)
- Match Quote Info and Customer Information
- Phone number need trigger mobile calling function
Items Tab
- Items tabs load up (screenshot: 08-2_Quotes Details.png)
- Quote value show on top
- Each lost showing Quote item
- Arrow will take to detail screen (screenshot: 08-3_Quotes Details.png)
- Notice the back button take to Items tab
Bid Tab
- Bid Tab load up (screenshot: 08-4_Quotes Details.png)
- Quote Value on top of page
- Approval information, Justification and Edit History button show up in page
Status Tab
- This tab show all Quotes status (screenshot: 08-5_Quotes Details.png)
- Approve use green colored message
9. Message
screenshot: 09-1_Message.png
- User can see all messages
- Edit button placed on top right of page
- Search button displayed below the title
- Page divided by:
-- Messages
-- Favorite Quote
-- Responses to feedback/questions
- Unread message indicated by bold text
- Unread message indicated by regular text
- Show no message look at 1st section
- Click edit button will let user select the message in page by select checkmark button (screenshot: 09-2_Message.png)
- Selected message show different check mark style (screenshot: 09-3_Message.png)
- And there’s Delete All and Delete selected show in the bottom of page (screenshot: 09-4_Message.png)
10. Feedback
screenshot: 10-1_Feedback.png
- Feedback page divided by Feedback and Online Help
- Click the arrow need take to separated details page
- There’s icons on left of each sections
Feedback
screenshot: 10-2_Feedback.png
- User can rate the experience by tap on selected rate
- By default all rate show border only.
- On selected rate, box will show different background (screenshot: 10-3_Feedback.png)
- You need show different color rate
- User can type the message in textarea
screenshot: 10-4_Feedback.png
- This is Help message
- User can type on textarea
- Send button in the right side
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
- Android Browsers