Beer CRM Salesforce1 Design Concepts Challenge

Welcome to Beer CRM Salesforce1 Design Concepts Challenge. This challenge is focused on creating design concepts and visual solutions for our Beer CRM (Customer Relationship Management) application. We are looking to build this on the Salesforce1 platform so we are looking for best design practices and thought to leverage this platform.

Beer CRM is a system for managing a company's relationships and interactions with current and future customers. It involves using technology to organize, automate and synchronize sales, marketing, customer service, and technical support.

For this challenge we are providing you with User Stories, Wireframe guidance and Accepted Criterias to help you understand exactly what we are looking for!

In this challenge we are looking for design solutions on how our Salesforce1 application could look and work. What should the user see and experience when using the application?

Round 1

Submit your initial design for Checkpoint feedback and guidance:
1. Navigation & Global Actions    
2. Homepage/Dashboard Interface
3. Account List View Page
- If you have time - please provide us with a click map for your design.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

 

Round 2

Final Designs plus any Checkpoint Feedback:
1. Navigation & Global Actions
2. Homepage/Dashboard Interface
3. Account List View Page
4. Account Detail Page
5. Contact Detail Page
6. Visit Log Page
- If you have time - please provide us with a click map for your design.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

 

Challenge Details
Beer CRM is an application for managing a company's interactions and relationships with current and future customers. It involves using technology to organize, automate and synchronize sales, marketing, customer service, and technical support.

For this challenge we need your help to interpet the following User Stories, Wireframes and Accepted Criterias that will help you get better understanding of application functionality and design the application with good user experience (UX) techniques and user interface (UI) design.

Design Guidelines:
- Salesforce 1 Style Guide - learn this and be inspired!
- Fonts: Helvetica Neue or what works best for Salesforce1
- Color Theme: Refer to our brand (brand reference): We are open right now - want to make sure it looks good and works well on Salesforce1
- BEERCRMICONS.zip - The client has another similar application and would like to leverage the provided icons for this challenge submission.
- Screen size: Salesforce1 Responsive Tablet: 1024px by 768px

Wireframe Guide:
- (Wireframe Link) This URL points to a concept that we initially created - think of this as a Wireframe.
- This is solely for reference purposes but designs should be aligned to this concept at a high level

Design Goals:
- How should Beer CRM application look and feel - leveraging Salesforce1 platform?
- Read the provided User Stories and Wireframes and design for the priorities of the applicaton.
- Think simple but effective solutions
- Focus on modern mobile and flat design techniques

Beer CRM Design Requirements
1. Navigation
User Story:
"As a Beer CRM user I need the ability to access the major functional components of the application from a single menu so that I can quickly and easily navigate the application"

Criteria:
- When the application first loads it will display a navigation menu icon in the upper left hand corner of the application
- When the application first loads it will default all users to the Dashboard page

IF the user clicks the navigation menu icon
- The system will display the navigation panel with the following options:
- Dashboard
- Accounts
- Contacts
- Constellation Contacts
- Follow Ups
- Activity Feed
- Compass
- Custom User Settings

IF the user clicks on any of the navigation items
- THEN the application will navigate the user to that page
- ALSO the application will collapse the primary navigation menu

IF the user clicks on the Compass menu option
- THEN the system will navigate the user to the external Compass application

2. Homepage/Dashboard Interface

Message Center    
User Story:
“As a Beer CRM user I need the ability to view messages on the dashboard so that I can quickly see important information that is distributed to me or the groups that I am a member of.”

Criteria:
- When the Dashboard page first loads the message center will be collapsed
- When the Dashboard page first loads the message center will contain the 10 most recent messages
- GIVEN that the messages have not previously been cleared
- GIVEN that the messages are targeted at the user or a group that the user is a member of

IF the message center is collapsed
- GIVEN that the user has messages in their message center
- THEN the message center will provide an indicator that shows the quantity of messages available
- ALSO the user can click on the message center navigation item to expand the message center

IF the message center is collapsed
- GIVEN that the user has no message in their message center
- THEN the message center will provide an indicator that shows a '0' for the quantity of messages available
- ALSO the user can click on the message center navigation item to expand the message center

IF the message center is expanded
- GIVEN that the user has messages in their message center
- THEN the system will display the users message sorted in ascending order by publish date
- ALSO the user can click on the message center navigation item to collapse the message center
- ALSO the user can scroll within the message center to view message content that is outside of the current viewable section of the page
- ALSO the user can click on an individual message to navigate to a page with additional details about the message
- ALSO the user can click on a 'View All' link to navigate to a page with all of their available messages
- ALSO the user can click on a 'Clear' action to remove the message from their message center
- NOTE:  The message center counter should always reflect the total message, not previously cleared, that are available to the user and not just the total loaded during the initial dashboard page load.

Open Tasks Panel    
User Story:
“As a Beer CRM user I need the ability to view my open tasks on the dashboard so that I can quickly see what tasks need my immediate attention.”

Criteria:
- ON LOAD of the dashboard page the open tasks panel will load the 10 most recent tasks sorted by Due Date in ascending order

IF the user does not have any open tasks
- THEN the open tasks panel will display the following message:  "No Open Tasks"

IF the user is on the dashboard
- GIVEN that the tasks have not been previously closed
- GIVEN that the tasks are assigned to the user
- THEN the system will display records with the following columns Task Description Customer Due Date
- ALSO the user can click on the Task Description field to navigate to the Task Detail page
- ALSO the user can click on the Customer field to navigate to the Customer Detail page
- ALSO the user can scroll within the open tasks panel to view content that is outside of the current viewable section of the page
- ALSO the user can click on the global action menu to create a new task

IF the user clicks on Due Date column header
- GIVEN that the user has open tasks displayed in the panel
- THEN the system will sort the list of tasks in descending order by Due Date
- ALSO the user click the Due Date column header again to sort the list of tasks in ascending order

IF the user clicks on Customer column header
- GIVEN that the user has open tasks displayed in the panel
- THEN the system will sort the list of tasks in descending order by Customer
- ALSO the user click the Customer column header again to sort the list of tasks in ascending order

IF the user clicks the 'View All' navigation item
- THEN the system will navigate the user to the View All Tasks page

IF the user clicks on the 'Close' button for an individual task
- THEN the system will close the task
- THEN the system will update the task panel to no longer show the closed task
- THEN the system will load the next task available in the system"

Activity Feed Panel    
User Story:
“As a Beer CRM user I need the ability to view my activity feed on the dashboard so that I can quickly see what activities have occurred in my accounts.”

Criteria:
- ON LOAD of the dashboard page the activity feed panel will load the 10 most recent activities sorted by Create Date in ascending order

IF the user does not have any activities
- THEN the activities panel will display the following message:  "No Activities"

IF the user is on the dashboard
- GIVEN that the user has activities
- THEN the system will display records with the following columns  Customer Owner Description
- ALSO the user can click on the Customer field to navigate to the Customer Detail page
- ALSO the user can click on the Owner field to navigate to the Owner Detail page
- ALSO the user can click on the Description field to navigate to the Activity Detail page
- ALSO the user can scroll within the activity panel to view content that is outside of the current viewable section of the page
- ALSO the user can click on the global action menu to create a new activity

IF the user clicks on Customer column header
- GIVEN that the user has activities displayed in the panel
- THEN the system will sort the list of activities in descending order by Customer
- ALSO the user click the Customer column header again to sort the list of activities in ascending order

IF the user clicks on Owner column header
- GIVEN that the user has activities displayed in the panel
- THEN the system will sort the list of activities in descending order by Owner
- ALSO the user click the Owner column header again to sort the list of activities in ascending order

IF the user clicks the 'View All' navigation item
- THEN the system will navigate the user to the View All Activities page

Favorite Accounts Panel    
User Story:
“As a Beer CRM user I need the ability to view my favorite Accounts and their related Compass performance information on the dashboard so that I can quickly see a performance snapshot for my favorite accounts.”    

Criteria:
- ON LOAD of the dashboard page the favorite accounts panel will load the 10 most recently modified favorite accounts sorted by Last Modified Date in ascending order"

IF the user does not have any favorite accounts
- THEN the activities panel will display the following message:  "No Favorite Accounts"

IF the user is on the dashboard
- GIVEN that the user has favorite accounts
- THEN the system will display records with the following columns:
-- Customer
-- Address
-- City
-- Trade Channel
-- ASA/APA YTD
-- Volume YTD 90 Days
- ALSO the user can click on the Customer field to navigate to the Customer Detail page
- ALSO the user can scroll within the favorite accounts panel to view content that is outside of the current viewable section of the page

IF the user clicks on Customer column header
- GIVEN that the user has favorite accounts displayed in the panel
- THEN the system will sort the list of favorite accounts in descending order by Customer
- ALSO the user click the  Customer  column header again to sort the list of favorite accounts  in ascending order

IF the user clicks on City  column header
- GIVEN that the user has  favorite accounts  displayed in the panel
- THEN the system will sort the list of  favorite accounts  in descending order by City
- ALSO the user click the  City  column header again to sort the list of  favorite accounts  in ascending order

IF the user clicks on Trade Channel  column header
- GIVEN that the user has  favorite accounts  displayed in the panel
- THEN the system will sort the list of  favorite accounts  in descending order by Trade Channel
- ALSO the user click the  Trade Channel  column header again to sort the list of  favorite accounts  in ascending order

IF the user clicks on ASA/APA  column header
- GIVEN that the user has  favorite accounts  displayed in the panel
- THEN the system will sort the list of  favorite accounts  in descending order by ASA/APA
- ALSO the user click the  ASA/APA  column header again to sort the list of  favorite accounts  in ascending order

IF the user clicks the 'View All' navigation item
- THEN the system will navigate the user to the View All Accounts page"

Nearby Accounts Panel    
User Story:
“As a Beer CRM user I need the ability to view nearby Accounts on the dashboard so that I can quickly see what other accounts are around my current location.”

Criteria:
- ON LOAD of the dashboard page the nearby accounts panel will load the 10 most nearby  accounts sorted by Miles in ascending order

IF the user does not have any nearby accounts
- THEN the activities panel will display the following message:  "No Nearby Accounts"

IF the user is on the dashboard GIVEN that the user has nearby accounts
- THEN the system will display records with the following columns 
-- Customer
-- Address
-- City
-- Trade Channel
-- Miles
- ALSO the user can click on the Customer field to navigate to the Customer Detail page
- ALSO the user can scroll within the nearby accounts panel to view content that is outside of the current viewable section of the page

IF the user clicks on Customer column header
- GIVEN that the user has  nearby accounts  displayed in the panel
- THEN the system will sort the list of  nearby accounts  in descending order by Customer
- ALSO the user click the  Customer  column header again to sort the list of  nearby accounts  in ascending order

IF the user clicks on  City  column header
- GIVEN that the user has  nearby accounts  displayed in the panel
- THEN the system will sort the list of  nearby accounts  in descending order by  City
- ALSO the user click the  City  column header again to sort the list of  nearby accounts  in ascending order

IF the user clicks on  Trade Channel  column header
- GIVEN that the user has  nearby accounts  displayed in the panel
- THEN the system will sort the list of  nearby accounts  in descending order by  Trade Channel
- ALSO the user click the  Trade Channel  column header again to sort the list of  nearby accounts  in ascending order

IF the user clicks on  Miles  column header
- GIVEN that the user has  nearby accounts  displayed in the panel
- THEN the system will sort the list of  nearby accounts  in descending order by  Miles
- ALSO the user click the  Miles  column header again to sort the list of  nearby accounts  in ascending order

IF the user clicks the 'Map All' navigation item
- THEN the system will navigate the user to the Map Nearby Accounts page

3. Account List View Page    
User Story:
“As a Beer CRM user I need the ability to see high level information about an account on the Account List View page so that I can quickly view account name, last visit date, favorite status, and address information.  "

Criteria:
- ON LOAD of the Account List View page the system will display the 'My Retail Accounts' list of accounts sorted in ascending order by Account Name
- GIVEN that there is account data in the system
- THEN each account panel will contain the following information:
-- Account Name
-- Street Address
-- City
-- State
-- Zip Code
-- Favorites Indicator
-- Last Visit Date
- ALSO the Account Name field will be color coded to reflect the performance status from Compass (i.e. Top 60%, Next 20%, Bottom 20%)
- ALSO the account panel will be shaded a different color to reflect its channel type (i.e. On Premise, Off Premise)

IF the user clicks on change list view dropdown menu
- THEN the system will present the user with the following list view options
-- My Retail Accounts
-- My Favorite Accounts
-- All Retail Accounts
-- All Distributor Accounts
- ALSO the user can select one of the list view options
- THEN the system will update the records on the list view page to reflect the accounts that meet the selected criteria

IF the user clicks on list view sort dropdown menu
- THEN the system will present the user with the following list view sorting options
-- Account Name Ascending
-- Account Name Descending
-- Last Visit Ascending
-- Last Visit Descending
- ALSO the user can select one of the list view sorting options
- THEN the system will update the records on the list view page to reflect the sorting sequencing that the user selected

- IF the user does not have any favorite accounts
- THEN the Account List View page will display no account records

- IF the user does not have any my (i.e. owned) accounts
- THEN the Account List View page will display no account records

- IF the user clicks on an individual account panel
- THEN the system will navigate the user to the Account Detail page

4. Account Detail Page
User Story:
“As a Beer CRM user I need an individual account page for retail, accounts, and sub-accounts that displays critical account information as well as last Visit Log snapshot, Compass performance snapshot, account contacts, distributor contacts, internal Constellation contacts (i.e. users), top opportunities, open follow ups, and supporting account information so that I leverage the information in my day to day activities. “

Criteria:
- ON LOAD the system will display the following sections:
-- General Account Information
-- Last Visit Log
-- Snapshot
-- Compass Performance Snapshot
-- Account Contacts
-- Distributor Contacts
-- Constellation Contacts
-- Top Opportunities
-- Open Follow Ups
-- Supporting Account Information

IF the user is on an individual retail/account/sub-account record
- GIVEN that there is data in the system
- THEN the system will display values in the General Account section for the following fields:
-- Account Name
-- Street
-- Address
-- City
-- State
-- Zip Code
-- Favorites Icon  

- ON LOAD of the retail/account/sub-account page the Last Visit Log Snapshot section will load the 3 most recent visit log activity dates sorted by Create Date in descending order
- GIVEN that there are visit log activity in the system
- THEN the system will display records with the data in the following columns Create Date
- ALSO the user can click on the Last Visit Log link/button to navigate to the Visit Log detail page

5. Contact Detail Page
User Story:
“As a Beer CRM user I need an individual contact page for retail contacts that displays critical contact information as well as open follow ups, closed follow ups, notes, and attachments so that I leverage the information in my day to day activities.”

Criteria:
- ON LOAD the system will display the following sections:
-- General Contact Information
-- Open Follow Ups
-- Follow Up History
-- Notes & Attachments

IF the user is on an individual retail contact record
- GIVEN that there is data in the system
- THEN the system will display values for the following fields:
-- First Name
-- Last Name
-- Title
-- Account Name
-- Street Address
-- City
-- State
-- Zip Code
-- Phone Number
-- Email Address
-- Contact
-- Record Type
-- Birthday Spouse's Name
-- Working Days
-- Working Hours
- ALSO the user can use an action button to edit the contact record

IF the user edits a contact record
- THEN the system will display input fields for the contact fields
- ALSO the user can input values into those fields
- ALSO the user can save the changes to those fields
- ALSO the user can cancel/discard the changes to those fields

- ON LOAD of the retail contact page the open follow ups panel will load the 10 most recent follow ups sorted by Due Date in ascending order
- GIVEN that there are open follow ups in the system
- THEN the system will display records with the data in the following columns
-- Subject
-- Due Date
-- Assigned To
-- Priority
-- Status
-- Category
- ALSO the user can click on the Follow Up Subject field to navigate to the Follow Up Detail page
- ALSO the user can scroll within the open follow ups panel to view content that is outside of the current viewable section of the page
- ALSO the user can click on the global action menu to create a new follow up
- ALSO the user can click on a View All link to navigate to a page that displays all open follow ups for the contact

IF the user does not have any open follow ups
- THEN the open follow ups panel will not display any follow up records��� IF the user clicks on the 'Close' button for an individual open follow up
- THEN the system will close the follow up
- THEN the system will update the follow up panel to no longer show the closed follow up
- THEN the system will load the next follow up available in the system

- ON LOAD of the retail contact page the follow ups history panel will load the 10 most recent follow ups sorted by Complete Date in ascending order
- GIVEN that there are closed follow ups in the system
- THEN the system will display records with the data in the following columns
-- Subject
-- Complete Date
-- Assigned To
-- Priority
-- Status
-- Category
- ALSO the user can click on the Follow Up Subject field to navigate to the Follow Up Detail page
- ALSO the user can scroll within the open follow ups panel to view content that is outside of the current viewable section of the page
- ALSO the user can click on a View All link to navigate to a page that displays all closed follow ups for the contact

IF the user does not have any closed follow ups
- THEN the open follow ups panel will not display any follow up records���

- ON LOAD of the retail contact page the notes & attachments panel will load the 10 most recent notes and attachments sorted by Last Modified Date in descending order
- GIVEN that there are notes & attachments in the system
- THEN the system will display records with the data in the following columns Type Title Last Modified Date Created By
- ALSO the user can click on the Title to navigate to open the notes & attachments record
- ALSO the user can scroll within the notes & attachments  panel to view content that is outside of the current viewable section of the page
- ALSO the user can click on the global action menu to create a  notes & attachment record
- ALSO the user can click on a View All link to navigate to a page that displays all notes & attachments for the contact

- IF the user does not have any notes & attachments
- THEN the open follow ups panel will not display any follow up records

6. Visit Log Page    
User Story:
"As a Beer CRM user I need an Visit Log page for retail/account/sub-account and distributor accounts that displays critical account information as well as notes, photos, files, and Visit Recaps so that I leverage the information in my day to day activities. "

Criteria:
- ON LOAD the system will display the following sections:
-- General Account Information
-- Last Visit
-- Snapshot
-- Notes
-- Photos
-- Files
-- Visit Recaps

~
Target Audience:
- Beer CRM Customers

Judging Criteria:
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- Your design should possible to build and make sense as a mobile application

Submission & Source Files:
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.

Submission File
Submit JPG/PNG for your submission files.

Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.

Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.