Challenge Overview
Welcome to Repost - Affiliate Relationship Visualizer - Mobile 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 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 may USE LESS for this challenge but we will need the native CSS as a part of the final fixes.
- 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 may 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 screen 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 have provided PSD Sources.
- Just make sure your prototype match the given storyboards.
- This prototype need to optimized to work on mobile platforms.
- We need only the below interactions in your prototype!
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 show this view to 01_2_Contact_Affiliations.png
1.1 Contact Affiliation (01_1_Contact_Affiliations_mobile.png):
- A user will see a single affiliation in this view..
- This is an alternative starting point. Tapping anywhere within the "Contact Affiliation" frame will also direct the user to 01_2_Contact_Affiliations_mobile.png
- Tapping anywhere within this "Contact Affiliation" frame will show 01_2_Contact_Affiliations_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
- Top Left Back Arrow: Clicking on this should take the user back to Contact Affiliation (01_1_Contact_Affiliations_mobile.png)
2. Default Account View (02_0_Account_Affiliations_mobile.png):
- A user starts from 02_0_Contact_Affiliations_mobile.png and clicking on "Accout's Affiliation" will show this view to 02_2_Account_Affiliations_mobile.png...
2.1 Account Affiliation (02_1_Account_Affiliations_mobile.png):
- A user will see a single affiliation in this view..
- This is an alternative starting point. Tapping anywhere within this "Account Affiliation" frame will show 02_2_Account_Affiliations_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
- Top Left Back Arrow: Clicking on this should take the user back to Account Affiliation (02_1_Account_Affiliations_mobile.png)
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 Mobile, Chrome Mobile