Challenge Summary
Welcome to the Affiliate Relationship Visualizer - UI Design Concepts 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. Through this challenge, we are looking for a UI design to visualize relationships between affiliates (Individual contact) and customers (nonprofit organization).
We are excited to see your designs for this challenge.
Round 1
Submit your initial screen for Checkpoint feedback
1) Affiliation View for Contact (Mobile)
2) Affiliation View for Account (Mobile)
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Your Final designs for all the required page with all checkpoint feedback implemented.
1) Affiliation View for Contact (Desktop + Mobile)
2) Affiliation View for Account (Desktop + Mobile)
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Nonprofits will be using the Salesforce Nonprofit Starter Pack (NPSP) to track a contact’s affiliations. An affiliation is a many-to-many relationship between Contacts (Individual Contact) and Accounts (Organization). We need to come up with a design to represent the relationships between a contact and account for a quick, visually appealing view. Let’s come up with a way to easily see a contact’s affiliations!
IMPORTANT!! Design Concept Goals:
- Visualization design is open to members. Be creative!!
- Nodes should display brief information being shown Contact/Account (e.g. Name, Title, etc)
- User should be able to navigate to the detail page of the Node's record (e.g. clicking on a node takes user to that record’s detail page).
- We prefer to have Mobile first (Salesforce1 Mobile Card, intended for phone), Desktop 2nd.
- Branding should follow Salesforce1 Style Guide; should look as though it's part of the native Salesforce1 app, instead of embedded from third-party.
- We had attached few examples for visualization, make sure you DO NOT COPY and make sure your design follows the styles of Salesforce1.
Screen Sizes:
For the below two mentioned screens, we need to design two views..
Mobile View:
- Salesforce1 - e.g.: Extend Your Salesforce1 App with Mobile Cards
- 320 x 480px..
Desktop View:
- Inline Visualforce - e.g.: Salesforce Mock Inline VF Page and also the refer the attached inline visualforce page
- We have attached the Inline visualforce image, this is given to help you understand where on a standard detail page we might expect to have this inline visualization design.
- In the attached visualforce image, the account details above the red box need not be designed, but might be helpful to show your final visualization designs relative to this standard Salesforce.
- It shows a inline visualforce height space (red box) of 300px. This is flexible (it could be taller than 300px), but we don't want to have to force users to scroll too much.
Required Screens:
We need below screens in above sizes (Mobile and Desktop)..
1) Affiliation View for Contact:
- From a contact record, show a visual representation of at least all 1st level affiliations. You may show more levels, if you still have a good UX.
- Assume we see the "Contact" record and think on how to show this contact's affiliation with different organizations?
- Note that: Attached example image (Inline VF Page Placeholder.png.zip) shows Account details but we will have Contact details at the top instead of account details in this page..
- We don't need the details above the red box for the designs but might be helpful to show your final visualization designs relative to this standard Salesforce.
- For the account visualization nodes, you can show account details like "Name, Industry, Annual Revenue, Number of Employees, Website, Phone, Address", not all details are in the account nodes, you may be pick 3 to 5 important fields that need to be shown in each of the account nodes.
Sample Use-Case Scenario:
Researching Contact’s Affiliation...
- I work for a bank/credit union.
- I meet someone at my kid’s soccer game.
- I pull up her contact record in my Salesforce1 application on my phone.
- I swipe over to the Affiliations View Mobile Card, and can immediately see which other organizations she’s involved with, e.g. CFO of Burlington Textiles, Chairwomen of Salesforce Foundation, Volunteer for Red Cross, etc..
- In the visualization, we would like you to include the account details
- The visualization is easier to quickly consume the information than to scroll through and find the related list..
- I can also click on one of the organizations (account) and see other related contacts (see point 2 below)..
2) Affiliation View for Account:
- From an account record, show a visual representation of at least all 1st level affiliation contacts. You may show more levels, if you still have a good UX.
- Assume we are seeing the "Account" record and think on how to show contacts affiliated with this account?
- We don't need the details above the red box for the designs but might be helpful to show your final visualization designs relative to this standard Salesforce.
- Within this visualization, for each contact node, you can show contact details like "- Name, Title, Account, Email, Phone and Address", you may be pick 3 to 5 important fields and also show what their affiliations are.
Sample Use-Case Scenario:
Researching an Organization’s Affiliates..
- I work for a bank/credit union
- Burlington Textiles is applying for a business loan and I would like to see what people are involved through an affiliation with this company.
- I pull up the account record within Salesforce on my desktop
- On the detail page, I quickly see a visualization that shows the company has ties with the CFO of Salesforce, the CTO of Google, and the CMO of Workday, and what their affiliations are (e.g. Board Member for Burlington Textiles).
- You can use the below details for user's affiliations.
--
Affiliation Record (Many-to-many junction object between Contact and Account)
Below fields shows the general fields that exist in the affiliation record..
- Organization (account)
- Contact
- Role (e.g. CFO, CMO, Volunteer, Investor, free-form text)
- Status (Current, Former)
- Start Date
- End Date
Target Audience
- End Users looking at Customer and Account records via Salesforce1 on their phone
- End Users looking at Customer and Account records in Salesforce from their desktop web browser.
Judging Criteria
- How well you suggest look and feel
- Cleanliness of your graphics and design
- User Experience
Submission & Source Files
Preview Image
Create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Please upload PNG images in a zip file with all requested contest requirements stated above. Number your files (01, 02, 03, etc) this will help review them in order.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop or Illustrator and saved as layered PSD/AI files.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics, images (sizes or colors) or modify overall colors.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.