Challenge Overview
Welcome to Affiliate Relationship Visualizer - UI Prototype Challenge!!
Currently within Salesforce, an end user can view a related list on a contact record to see which accounts (Organizations) he or she is related to. But there is no representation of these relationships for a quick, visually appealing view. So, through a design challenge we have designed a visualization that helps a user visulize the accounts they are related to and vice versa.
The main task of this project is to create the Affiliate Relationship Visualizer - UI Prototype based on the provided PSD Storyboard design. In this prototype, we need you to develop the prototype that works within Desktop/Tablet and Mobile Platform.
In the end of this challenge we need solid UI prototype result with best practice solution, that can be updated easily in the future challenges.
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.
- You’re encouraged to use HAML to make the HTML code clean, provide source files on your submission.
CSS3 and JS
- You MUST USE LESS when create stylesheet for this challenge
- Provide comments on the CSS/JS code. We need CSS/JS 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/JS so developers can easy to read the code.
- All CSS/JS naming should not have any conflicts.
- As possible use CSS3 style when create all styling for rounded corner shape.
IMAGES
- Images should be properly compressed while still having good visual quality.
- Use best practice repetition usage of background based image.
- Use sprites when using icons for your submission.
PAGE REQUIREMENTS:
General Notes
- FYI: Storyboard use “Proxima Nova” which is not free web font. You need replace the font with this font http://www.google.com/fonts/specimen/Montserrat on your prototype submissions.
- Make sure to go through the interactions given for each page and anything which does have any interaction mentioned but if the text for it is shown as in blue color, then have it as a dummy link (#).
- We would like you to concentrate on the mobile view as well as the desktop view as a part of this challenge.
- We have provided PSD Sources as well as the AI files..
- Salesforce1 mobile application is completely separate from the desktop salesforce view, so this can be separate code (HTML5/CSS3/JS) from that of the desktop and need not be linked.
A. Salesforce1 Mobile App View:
- Kindly make this as responsive, it is fine if it stretches the full-width of the browser, we will be resizing the browser to mobile size width to see the required screen and will be reviewing it in the actual mobile device..
- Standard Salesforce1 developer/style guide can be seen here: http://sfdc-styleguide.herokuapp.com/
- To make it easy should, we have some built in salesforce styles available through these plugins - feel free to use whichever you are comfortable with:
- http://developer.salesforcefoundation.org/bootstrap-sf1/index.html (salesforce1 styled theme for bootstrap) (or) https://github.com/joshbirk/onestarter (jQuery plugin for creating HTML appear in salesforce1 styles)
- Not everthing in this mobile app need to be functional..
1. Default Contact View (01_0_Contact_Affiliations_mobile.png):
- A user starts from 01_0_Contact_Affiliations_mobile.png and clicking on "Contact's Affiliation" will expand to show this view to 01_1_Contact_Affiliations_mobile.png...
1.1 Contact Affiliation - expanded (01_1_Contact_Affiliations_mobile.png):
- Within the expanded view, a user will see a single affiliation with below links (follow contents from storyboard)
- Show All (4): Clicking on this takes the user to 01_2_Contact_Affiliations_mobile.png (see below for more information on this view)
- "3 accounts more": Tapping on this will show 01_2_Contact_Affiliations_mobile.png
- "Right Arrow": Clicking on the right arrow will take the user to that particular Account Screen (02_0_Account_Affiliation_mobile.png)
1.2 Contact Affiliation - full view (01_2_Contact_Affiliations_mobile.png):
- This is the full view of contact affiliation, where all the affiliations of the contact is shown -follow the storyboards
- We need below links..
- Top Left Back Arrow: Clicking on this should take the user back to Contact Affiliation - expanded (01_1_Contact_Affiliations_mobile.png)
- Right Arrow: Clicking on the right arrow will take the user to that particular Account Screen (02_0_Account_Affiliation_mobile.png)
2. Default Account View (02_0_Account_Affiliations_mobile.png):
- Assume a user has clicked an account from the contact affiliation view, then we show this default account view..
2.1 Account Affiliation - expanded (02_1_Account_Affiliations_mobile.png):
- Within the expanded view, a user will see a single affiliation with below links (follow contents from storyboard)
- Show All (4): Clicking on this takes the user to 02_2_Account_Affiliations_mobile.png (see below for more information on this view)
- "Right Arrow": Clicking on the right arrow will take the user to that particular Contact Screen (01_0_Contact_Affiliation_mobile.png)
2.2 Account Affiliation - full view (02_2_Account_Affiliations_mobile.png):
- This is the full view of account affiliation, where all the affiliations of the account is shown -follow the storyboards
- We need below interactions...
- Top Left Back Arrow: Clicking on this should take the user back to Account Affiliation - expanded (02_1_Account_Affiliations_mobile.png)
- Right Arrow: Clicking on the right arrow will take the user to that particular Contact Screen (01_0_Contact_Affiliation_mobile.png)
B. Desktop View:
- Feel free to use the screenshot for the top section contact/account details (please see the PSD), you will be working mainly on the small area showing affiliation relationship (see attached screenshot highlighting this area)
- Note that height of this area "Affiliation Relationship Area" is fixed (follow the height from storyboard) and a user should just be able to scroll to the left or right..make the area responsive..
3. Default Contact Affiliation View (03_0_Contact_Affiliations_desk.png):
- This view will allow the user to view the affilation of a contact with organizations..
- By default, user sees this view..follow the contents from the storyboards..
- We need below interactions in this view..
3.1 Clicking "Down Arrow" under Alice Kim (bottom of 1st column) will slide down all contacts/their designations shown to the right and shows this view 03_2_Contact_Affiliations_desk.png, this just shows other companies "Alice Kim" is affiliated with.
- 03_2_Contact_Affiliations_desk.png: When the user has clicked the down-arrow, then we need a way to go up as well, so we show the "up arrow" icon as well
- Clicking on the "Up arrow" icon should move the list up and show 03_0_Contact_Affiliations_desk.png...and hide "up arrow"
3.2 Clicking Down Arrow under Jack Jackson (bottom of 2nd column) will show 03_1_Contact_Affiliations_desk.png, need to slide the list down to show other people in this company..
- 03_1_Contact_Affiliations_desk.png: Note that, we need to show a "up arrow" icon next to the down arrow as the user need a way to move up..
- Clicking on the "Up Arrow" should slide the list up and show 03_0_Contact_Affiliations_desk.png..and hide "up arrow"
3.3 Clicking on a company name (Burlington textiles corp, Salesforce Foundation...etc) should show 04_0_Account_Affiliations_desk.png (see below for more information on this page)..
3.4 Clicking on a "Contact Name" (Mario Marso, Lisa Luison, Jack Jackson....) shows 03_3_Contact_Affiliations_desk.png..
- 03_3_Contact_Affiliations_desk.png: Clicking "Chairwomen" should take the user back to 03_0_Contact_Affiliations_desk.png
3.5 Clicking on the designation name (CFO or Volunteer) should take the user to 03_4_Contact_Affiliations_desk.png
- This view is similar to 03_0_Contact_Affiliations_desk.png, but just that we are viewing affiliations of people in another company
- Even this view will need to have all the above interactions.. (see if its possible to show them - this is optional)
4. Account Affiliations Desktop/Tablet View (04_0_Account_Affiliations_desk.png):
- This view will allow the user to view the affilation of a account with contacts..
- By default, within account details user sees this view..follow the contents from the storyboards..
- Clicking on the "Contact Name" should show 04_1_Account_Affiliations_desk.png
- We need below interactions in this view..
4.1 Clicking Down Arrow under Mike Wolberg (bottom of 2nd column) in 04_0_Contact_Affiliations_desk.png should show 04_2_Account_Affiliations_desk.png
- 04_2_Account_Affiliations_desk.png: Note that, we need to show a "up arrow" icon next to the down arrow as the user need a way to move up..
- Clicking on the "Up Arrow" should slide the list up and show 04_0_Contact_Affiliations_desk.png..and hide "up arrow"
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.
- Documentation of your prototype
Final Submission Guidelines
HTML/CSS Requirements:
You're encouraged to use and take advantage of CSS3 and Use LESS
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.
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.
No inline CSS styles- all styles must be placed in an external stylesheet.
Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
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)
Label all CSS, Javascript, or HTML hacks with explanations so others will understand.
Your code must render properly in all browsers listed in the Browser Requirements section.
Browsers Requirements
- Safari, Firefox & Chrome (Desktop)
- Safari Mobile, Chrome Tablet & Mobile