Challenge Overview
Welcome to IBM Castle - Mobile Responsive UI Prototype Foundation Challenge.
This UI Prototype is part of the IBM Castle Blitz Challenge Series. Make sure to check it out!
The main goal of this challenge is to start and create the foundation for a web-based responsive email application UI prototype. This challenge is focused on the Mobile design/layout only. We will have follow-up challenges tackling the Tablet and Desktop views.
Important! This is for IBM! Your code must be well documented so we can continue developing in future challenges.
Note: These challenges will be FAST and we will be providing FAST feedback! We will stay on schedule as there is no room to move our delivery dates!
At the of this challenge, we need a solid UI prototype using best coding practice/solutions. Good luck and we’re looking forward to your submissions!
Final Submission Guidelines
Downloadable Files:
Castle Mobile Designs.zip - PSD and Screens of the mobile design
Important!
- Great Responsive (commented) code
- You must include the Responsive Breakpoints for Mobile, Tablet, Desktop (best practice)
- We will eventually be converting this to Angular - please be mindful of best practices
- AngularJS is the preferred JavaScript framework for any JavaScript items
- JQuery should be used as a last resort and properly documented why it is being used (so we can remove it during the Angular build)
- The base prototype should be created using Bootstrap
- No need use JSON, you can hardcode the text on HTML
- Fonts should use the storyboard design: use Helvetica Neue, with fallback to Helvetica and Arial fonts
- Provided storyboard is using iPhone 6 Retina Portrait display (750px).
- Your submission must support Standard layout with 320px width
- Graphics look sharp on Retina and Standard version
- All pages need adapt fluid layout when transform into Landscape or Portrait view.
- You will need to adjust some page element placements for 320px width screen size. Let’s discuss any doubts about adjustments
- For tablet and desktop screen, re-use existing fluid solution from the mobile version (We need to be able to see the breakpoints)
- Next: We will have another challenge right after this one to implement the tablet/desktop designs.
UI Prototype Page Requirements
01. Landing Screen / Message list
Screenshot: 01_01Message List(Inbox).jpg
- This is the first screen user will see when they launch the app.
- Each sections explained below
Header Bar
- Header bar contains menu button on the left side, “Mail” title on center and search button on the right side
- Click menu button need show up the hamburger menu navigation. More info below
- Click search button need show up the search flow. More info below.
- Below the header bar, there’s Important People List. More info below
Hamburger Menu
Screenshot: 04_01Menu.jpg
- When hamburger menu show up you need use slide animation and overlapping the message list
- There’s blue colored background on content area
- User cannot scrolling the message content while menu show up.
- On top of menu navigation there’s user information area
- User thumbnail need auto generated into circle shape
- There’s an arrow on the right side of user thumbnail
- Click this arrow button need load the user menu (Screenshot: 04_02Menu_profile.jpg)
- Put dead links for now
- Set active state for current active page
- Match all menu navigation content. Put dead link for + New Folder
Search Panel
Screenshot: 05_01Search.jpg
- User need click search button to display search panel
- When search panel show up and replace the header bar
- Click “<” and “X” button need close the search panel
- You also need build autocomplete function for the input field
- Autocomplete result divided by 3 sections for People, Folders and Date
- Click the result need show up the search result screen. More info below
Important People List
- All user Important thumbnails need auto generated into circle shape
- User can swipe/scrolling Important People List area (Screenshot: 01_06Message List(ContactsScroll).jpg)
- Important People list consists of Favorited user with star icons and unfavorite user not using star
- White colored border and shadow need generated from css stylesheet
- Click each thumbnail need show up quick action panel (Screenshot: 01_04Message List(Clicked).jpg)
- When the important people panel show up, need push down the message list
- All buttons can dead links
- Click “-” button need close the panel
- On the last slide there’s “+” button that allow user to add Important People
- Click the button will bring the Input field (Screenshot: 01_07Message List(AddContact).jpg)
- Match default value for input field
- You need build autocomplete function that will return with list of user name (Screenshot: 01_08Message List(AddContact).jpg.jpg)
- For every autocomplete result, if no user thumbnail, place First and Last Name character on thumbnail.
- Click the search result need add to important people list
Message List
- Below the Important People list user see Message list area
- Inbox, Need Action and Waiting For works as tab functions
Inbox tab
Screenshot: 01_01Message List(Inbox).jpg
- User blue colored button for the active menu
- Compose button will take user to Create new Message page
- Red number indicator need auto-expand if filled with longer characters
- Message List area need scrollable while header bar, important people list, and message list buttons remain fixed in place
- For each message list, there’s blue border on the left side
- User thumbnail, display alphabet if thumbnail not exists
- First and last name placed on top.
- Message title need always display as single line. Use auto truncated function for longer text
- Message body need always display as single line. Use auto truncated function for longer text
- Unread message indicated by black colored text and blue colored icons
- Read message indicated by grey colored text and grey colored icons
- Date/time information placed on the right side
- Number of message thread need wrapped by blue colored rounded corner
- Press and hold button need able to select the message (Screenshot: 01_05Message List(Selecting).jpg)
- Selected message need use blue colored background and thumbnails turn into selected radio button
- User need able to deselect by click the radio button
- When user select multiple row, actions buttons show up in the bottom
- All buttons on the bottom can be dead link for now.
- Click message row that user to Message Detail.
- You need simulate Message detail with single and multiple message. Refer to the number of message thread that wrapped by blue colored rounded corner
Need Action Tab
Screenshot: 01_02Message List(NeedsAction).jpg
- This is Need Action Tab, on the right side there’s icon for Need action next to attachment link for every message
Waiting For Tab
Screenshot: 01_03Message List(WaitingFor).jpg
- This is Waiting For Tab, on the right side there’s red colored icon for Waiting for action next to attachment link for every message
- Also there’s another row with Due time icon
02. Message Detail
Single Message
Screenshot: 02_01Message Details(Single).jpg
- This is Message detail look for single message
- Back button placed on header bar and take user back to Inbox page
- Reply, Forward button can be dead links and placed on the right side
- Delete, Mark as unread and Share to teams placed on the left side.
- Inbox placed on the right side, Click “-” button need remove the Inbox tag
- Show more button need update “Brian Wright to me” into “From: Brian Wright” and “To: Me” in separated line
- Also, Show more text toggled into Show less text
- Message body need displayed in the bottom of page
Multiple Message
Screenshot: 02_02Message Details(Multiple).jpg
- This is Message detail look for multiple message
- Back button placed on header bar and take user back to Inbox page
- Reply, Forward button can be dead links and placed on the right side
- Below the header bar, re-use same actions buttons like Single Message
- Match Message title information. Re-use Show more link function
- User can expand/collapse each message
- Expanded message using blue colored arrow
- Match action buttons for each thread.
03. New Message
Screenshot: 03_01NewMessage_Form.jpg
- This how New Message screen look and feel
- Use blue background for the header bar
- Click “X” button take user back to message list
- To input field, on the right side there’s arrow button that will show addition CC and BCC fields (Screenshot: 03_02NewMessage_Form Cc Bcc.jpg)
- For To, CC and BCC input fields, create autocomplete function to load the contact list (Screenshot: 03_03NewMessage_Dropdown.jpg)
- Subject field is place for Message title
- There are action buttons to attach image, put link or attach file from cloud
- Click Attach image need open the modal window with take photo or upload from gallery (Screenshot: 03_06NewMessage_Upload.jpg)
- Attach files need open upload browser window
- Attach file from cloud: can be dead link
- In the bottom bar, there’s Tomorrow button that will open the calendar (Screenshot: 03_04NewMessage_Calendar.jpg)
- Current date need selected automatically.
- Match calendar styling
- Discard button take user back to Inbox page
- Send button take user back to Inbox page
04. Search Result
Screenshot: 05_02_SearchReslts.jpg
- This is how search result look
- Click “<” and “X” button need take user back to Inbox page
- Result need capture number of message list
- Filter By options place on the right works as toggle function to display message with link or attachment
- There’s also Refine button that will show up the Refine panel (Screenshot: 05_03_SearchResultsFilter.jpg)
- All Refine section need expanded by default
- Click Link or Attachment button need hide/show the icon on message list
- Message list area is scrollable, while the top bar contains result information and buttons remain fixed in place.
- For each message list, there’s blue border on the left side
- User thumbnail, display alphabet if thumbnail not exists
- First and last name
- Message title need always display as single line. Use auto truncated function for longer text
- Message body need always display as single line. Use auto truncated function for longer text
- Date/time information placed on the right side
- Number of message thread need wrapped by blue colored rounded corner
- Attachment and Link icons need display in same line if Filter By option selected
- You also need make sure multi-selection works like Inbox page
Client Priorities (The items that are considered highest prototype priorities)
- Code Documentation
- 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.
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
Browsers Requirements
- Chrome, Firefox and Safari on iPhone 4, 4s, 5, 5s, 6 and 6+ (Landscape & Portrait View)
- Android Browser