Challenge Overview
Welcome ot the Beer CRM Salesforce1 HTML5 UI Prototype Challenge. The main task of this project is to create an HTML5 UI Prototype, based on the provided design storyboards and wireframes. This Prototype will utilize HTML5 and Responsive Design to simulate the appearance and behavior of the app in a tablet (iPad) and phone (iPhone 5/6).
Upon completion, the Prototype code and assets will be converted into an HTML5 Salesforce1 application. So please use best markup practices, as they will be leveraged in the final solution.
Beer CRM is an application for managing interactions and relationships with current and future customers. It involves using technology to organize, automate and synchronize sales, marketing, customer service, and technical support.
Final Submission Guidelines
Challenge Details
Beer CRM is an application for managing interactions and relationships with current and future customers. It involves using technology to organize, automate and synchronize sales, marketing, customer service, and technical support. This challenge is focused on taking the provided "designers vision" and converting it over to an awesome HTML5/CSS/JavaScript prototype.
Documentation Provided
storyboard.zip - Storyboard Design
Retina-Version.psd.zip - Storyboard Design (Retina version)
Fonts.zip - Application Fonts
IMPORTANT!
- Familiarize yourself with the Salesforce1 Styleguide - http://sfdc-styleguide.herokuapp.com/
- Use the latest version of Bootstrap as your responsive framework - http://getbootstrap.com/getting-started/
- Use can also utilize Bootstrap SF1 if it helps http://developer.salesforcefoundation.org/bootstrap-sf1/
- Leverage this plugin for responsive data tables: http://zurb.com/playground/responsive-tables | demo
- Embed Proxima Nova & Gotham Font families using @Font-Face into your submissions (Fonts.zip), and weight appropriately using "font-weight".
- All UI imagery, especially icons, should either be vector (SVG), or twice the pixel size they would appear on the monitor, as this app will be viewed on iPads and iPhones using retina display. For example, if a PNG icon appears on the screen at 40px wide, it's native size should at least be 80px. Of course, using an SVG would be optimal. Read site references below in "Code Requirements"
- Let us know if you have any questions about the design. We are happy to help!
MOBILE REQUIREMENTS
- We are currently creating the mobile storyboards - NO Mobile storyboard provided for this challenge. Here's our plans for mobile layout:
-- View these wireframes here to see how the application UI should respond on a phone: http://3nk0jo.axshare.com/#p=mobile_pattern
-- We want to make sure what you are creating supports the mobile responsive/break points (correct framework)
-- Make your best attempt at the Mobile design conversion (Use the wireframes as guidance and the color supplied by the tablet design)
-- We will not score down on the mobile "design" aspects (just if it has been implemented/breakpoints code is correct)
-- We will handle any mobile look and feel issues internally or with a follow-up challenge.
UI Prototype Requirements
1. Tablet Dashboard
screenshot: 01.a.dashboard.png
- This is the Tablet Dashboard page look and feel
- The page should be fluid (responsive is very key to this challenge)
- The overall UI Prototype theme uses the Salesforce Style Guide as a base
- User can swipe between pages, you can see the dots pagination in the bottom of content area
- Header: Left side contains "hamburger" menu item
- Header: The search box is placed in the center of the header bar
- Header: Help button in the right side of header bar can be dead link.
- Search Box: Input show “Search” text placeholder
- Search Box: When user start typing, text placeholder become hidden
- Search Box: Press enter and click Magnify icon will take user to the Search Result screen
- Left Sidebar: User will access sidebar by tapping the "hamburger icon" (screenshot: 01.d.dashboard-menu.png)
- Left Sidebar: When showing the left menu the page content is pushed to the right.
- Left Sidebar Menu Icons: Integrate them as background image
- Left Sidebar Menu: Each menu needs to be linked to provided storyboard screen
- Left Sidebar Menu: Click menu button need hide the sidebar (once the taken to the menu item)
- Subhead: Sub header bar contains page title in the left side and Message button in the right side
- Subhead: Number indicator need to support max to 3 digit, rounded shape width need auto expand
- Subhead Messages: Tap Message button need open the flyout (01.e.dashboard-message-notification.png)
- Subhead Messages: When message flyout opened, content area covered with overlay background
- Subhead Messages: Tap overlay need hide the message
Dashboard: Open Follow Ups
- Fluid: This box should is fluid width
- Fluid: This box needs to use fixed height
- Color Indicator: Each row shows color indicator of Priority.
- Add New: Hyperlink can be a dead link
- View All: Hyperlink can be a dead link
- Table: User can scroll table body. See this site for reference: http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/
- Table Sorting: No need create sort function. Just display static arrow for this challenge task.
- Action X: User can remove each row by tapping “x” button
- “Subject” and “Assigned To” are text links, and can be dead link
- Scrollbar: can use browser based style, since we only need works for Safari on Tablet and Mobile
Dashboard Messages
- Fluid: This box can be fixed width
- Fluid: This box needs to use fixed height
- Inline Swipe: User can swipe to see additional options: “Mark as Read” and “Delete” buttons (01.b.dashboard-in-menu-message.png)
- Unread Message use black colored text
- Click Mark as read will update the row into grey colored text
- Delete button need remove related message
- View All: Hyperlink can be a dead link
Dashboard: Activity Feed
- Fluid: This box should is fluid width
- Fluid: This box needs to use fixed height
- Add New: Hyperlink can be a dead link
- View All: Hyperlink can be a dead link
- Scroll: User can scroll within this area
Dashboard: Near Me
screenshot: 01.n.dashboard-scroll-4.png
- Fluid: This box can be fixed width
- Fluid: This box needs to use fixed height
- Select: Dropdown placed in the upper right side
- Select: When changing the dropdown the table content needs to be updated
- Dropdown content: 10mil, 5mil, 2mil and 1mil
- Show the content less than selected miles-
- Scroll: User can scroll within this area
Dashboard: Favorites Accounts
screenshot: 01.c.dashboard-swipe.png
- Fluid: This box should is fluid width
- Fluid: This box needs to use fixed height
- View All: Hyperlink is placed in the top right
- View All and Customer hyperlink take the user to the Account page
- Table Sorting: No need create sort function. Just display static arrow for this challenge task.
- Match font color for YTD and 90 Days columns
- Customer Link: Tapping on the Customer hyperlink takes the user to the Account Detail page
Dashboard: Compass Snapshot
- Fluid: This box should is fluid width
- Fluid: This box needs to use fixed height
- Map: Build map use Google Map Api
- Map is fluid width
- Show Full Map hyperlink can be a dead link
- Pin: Create and show the pin in the map
~
2. Accounts View
screenshot: 02.a.account-list-view.png
- Click-path: User lands on this page after click "View All"
- Subhead: Sub header bar changes into breadcrumb view
- Subhead: Click the left arrow takes the user back to Dashboard page
- Subhead Account Select: User can change Account Category (screenshot: 02.b.account-list-filter.png)
- Subhead Account Select: Selected option with checkmark icon and green colored text
- Subhead Account Select: When “All Accounts” option opened, content area covered with overlay background
- Table Sorting: No need create sort function. Just display static arrow for this challenge task.
- Account Listings: Below the sub-header, there is the Account Logo and other account information
- Account Listings: Match how the information is displayed in a grid format
- Account Listings: User can toggle Favorite by click favorite button
- Show Detail: Hyperlink will take the user to the Account detail page
- Show on Map hyperlink can be dead link
- Scrolling: User can scroll down the Account listing page, simulate this with more data
- Responsive: When we see on Portrait layout, boxes need automatically move down, and vice versa when viewed on Landscape
3. Account Detail
screenshot: 03.a.account-page 1.png
- Click-path: User will see this screen after click Show Detail button
- Interactions: User can swipe the page, refer dotted pagination in the bottom of content
- Content Area: Logo and other account information is placed on this screen.
Page 1
Account Detail: Follow Ups
- Fluid: This box should is fluid width
- Fluid: This box needs to use fixed height
- "Add New" and "View All" hyperlinks placed in the right side
- Table Sorting: No need to create the sort function. Just display static arrow for this challenge task.
- “Subject” and “Assigned To” content items are clickable. Both hyperlinks take the User to the Contact Details page
Account Detail: Opportunities
- Fluid: This box should is fluid width
- Fluid: This box needs to use fixed height
- Table Sorting: No need to create the sort function. Just display static arrow for this challenge task.
- Percent Change: Match text color for “Percent Change”. If value is negative, text need turn into red colored text
- Scrolling: User can scroll the content
Account Detail: Hierarchy
- Fluid: This box should be fixed width
- Fluid: This box needs to use fixed height
- Table Sorting: No need to create the sort function. Just display static arrow for this challenge task.
- Scrolling: If there are not a lot of rows/content the scroll bar will be hidden
Page 2 (swipe)
screenshot: 03.b.account-page 2.png
Account Detail: Visit Log
- Fluid: This box should is fluid width
- Fluid: This box needs to use fixed height
- Show Detail hyperlink can be a dead link
- Table Sorting: No need to create the sort function. Just display static arrow for this challenge task.
- Note: This content user hyperlinks
- Photos: This content uses image thumbnails displayed side-by-side
Account Detail: Visit Recap
- Fluid: This box should is fluid width
- Fluid: This box needs to use fixed height
- Show Detail hyperlink can be a dead link
- Table Sorting: No need to create the sort function. Just display static arrow for this challenge task.
- Scrolling: User can scroll the content
Page 3 (swipe)
screenshot: 03.c.account-page 3.png
Account Detail: Account Information
- Fluid: This box should is fluid width
- Fluid: This box needs to use fixed height
- Typograpy: Match the typography for each column
- Account Name and Store Code hyperlinks can be dead links
Account Detail: Customer
- Fluid: This box should is fluid width
- Fluid: This box needs to use fixed height
- Scrolling: If there are not a lot of rows/content the scroll bar will be hidden
- Zebra Stripes: Match alternating row background colors
- Customer Name hyperlink take user to "Contact Details"
Account Detail: Distributor
- Fluid: This box should is fluid width
- Fluid: This box needs to use fixed height
- User can use expand/collapse function for this box
- Each section is scrollable
- Distributor Name hyperlink take user to "Contact Details"
Account Detail: Manager (3rd box)
- Fluid: This box should is fluid width
- Fluid: This box needs to use fixed height
- Title: Update box title to “Manager”
- Zebra Stripes: Match alternating row background colors
- Manager Name hyperlink take user to "Contact Details"
~
4. Contact Detail
screenshot: 04.a.contact-detail.png
- This is Contact Details Page
- Page divided into 2 columns:
Left Sidebar: Contact Details
- Fluid: This box should is fixed width
- Content: Match the spacing and font typography for each section
Contact Detail: Content
- Fluid: This box should is fluid width
- Scrolling: User can scroll the content
- All boxes should auto expand height
- You need to show “Follow Ups”, “Follow Ups History” and “Note and Attachments” section
- View all hyperlinks can be dead links
- Show detail hyperlinks can be dead links
- For Note and Attachments, there are icons in the left side of table.
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient HTML5/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.
- Each of the HTML pages need adapted for both tablet and phone layout.
CSS3
- 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.
- You MUST use CSS media query for tablet and phone
JAVASCRIPT
- Provide comments on the JavaScript code, JS codes to give clear explanation of the code usage. The goal is to help future developers understand the code and know what needs to be developer further.
- Please use clean INDENTATION for all JavaScript code so future developers can follow the code.
- If you need to use an additional JS plugin not supplied by Bootstrap, try to find a jQuery solution.
IMAGES
- As mentioned above, all imagery should either be vector (SVG), or twice the pixel size it appears to be, to account for retina displays.
- Other imagery should balance visual quality with file size via compression.
- If you decide to utilize an image sprite for your icons, please reference one of these methods for retina display compatibility:
-- raster image sprites: http://www.andreasnorman.com/how-to-easily-create-image-sprites-for-retina-displays/
-- vector image sprites: http://css-tricks.com/svg-sprites-use-better-icon-fonts/
Browsers Requirements
Safari Browser on iPad: (Landscape is the priority but should also be responsive to Portrait)
Safari Browser on iPhone: (Portrait is the priority but should also be responsive to Landscape)