Challenge Summary
Welcome to AHM Scoreboard Design Concepts Challenge. This challenge is focused on creating designs for an inline visualforce display within a Salesforce page, you need to design based on the given requirements - you will be designing a small area within a Salesforce page.
In this challenge we are looking for DESIGN CONCEPTS on how UI/UX of this Scoreboard should be designed in order to help achieve our business goals.
Round 1
Submit your initial design for Checkpoint feedback
- Initial scoreboard design concept for checkpoint review.
Notes.jpg: Any comments about your design for the Client
Round 2
Your Final design for all the required pages with all checkpoint feedback implemented.
- Final scoreboard design concept.
Notes.jpg: Any comments about your design for the Client
Challenge Details:
In this challenge, we are looking forward to your creative designs for an inline display within salesforce’s Contact page layout and Customer Service Console. This inline display will have key consumer information that will be displayed at the top of the Contact details as well as displayed at all times while Customer Service Reps are working on a case (using the Salesforce Console for Service). The purpose is to build a customer scoreboard that provides key indicators of the relationship health at a glance so that Reps can quickly assess the status of the customer when interacting with a customer.
About this Project:
Customer Service agents need an “At a Glance” view of key information about a customer who is calling in. The scoreboard highlights important issues and can be digested with a short glance (usually while speaking to a customer on the phone).
We want the reps to be able to see a visual representation of key customer data, so that they can quickly identify any issues that needs their attention in the process.
The key to winning this challenge is to truly build an “At a glance” view (using the least amount of page space) that can be consumed in a split second at which point the rep will make the decision to drill deeper or move on. The viewers thought process will end up going two ways: 1) key customer data looks good and there is nothing I need to do - or 2) Something is / may be wrong and I need to see what it is and see what I can do to help the customer.
- Example: Rough Mockup.png (please do not duplicate this)
- Example: Rough Mockup within the Salesforce Console for Service.png (please do not duplicate this)
Supporting Documents:
- Rough Mockup screenshots (Screenshots.zip)
Branding Guidelines:
There are no specific branding guidelines for the contest, but a ‘cockpit’-style theme (e.g., airplane or high-tech vehicle’s dashboard) would likely be well received.
Design Requirements:
Design a visualization of specific account details using icons and colors to represent information for quick understanding. The height limit is 115 px while the width needs to be responsive as it will always be the browser width.
The Scoreboard should display the following data:
- Contact Info
- Contact Name
- Primary Contact Phone Number
- Primary Contact Email Address
- Customer “Flashes”
- Caution indicator - Notification to look for additional warning signs of trouble with this customer, such as (actual examples)
- Previous or current executive-level escalations
- Pending legal action
- A dispute that is currently in mediation or a mediation that happened previously, etc.
- Caution indicator - Notification to look for additional warning signs of trouble with this customer, such as (actual examples)
- Products - ownership/purchase history (think of these as consumer products with recognizable shapes - use a manufacturer’s line of cars and trucks as an example.)
- Current Product - Caller will likely have at least one current product, possibly more than one.
- Recency - It is useful to know when the current (or historical) products were purchased.
- Historical Product(s) - Caller may have owned 0 or more products in the past
- Campaigns - Indicator of
- Currently unresolved actions against a currently owned product (these are high-priority for agents to see). A short text description of the action would be helpful to provide (as a tooltip?). Actions are notifications that something about the product needs to be fixed at a service partner.
- Resolved actions against a currently owned product (useful, not as high a priority)
- Current Product - Caller will likely have at least one current product, possibly more than one.
- Services
- Most recently used service partner (eg. taking a car in for service at a dealership)
- Indicator of total amount spent in services on this product with a channel service partner.
- Key Customer Details
- Customer Loyalty
- How valuable of a customer is this? Base data is a numeric score.
- Goodwill
- Dollar amount ($USD) granted to this customer by the client. May not always be present. Will be pulled from a field in Salesforce.
- Latest NPS Score
- Values 0-6 = detractor and red
- Values 7 or 8 = passive and yellow
- Values 9 or 10 = promoter and green
- Customer Loyalty
- Customer Support Summary (feel free to find a way to gracefully combine these)
- Number of Open Cases
- Displays a number of open cases on an account
- Based on how many open cases there are, colors or icon should represent a problem
- i.e. 1 open case is green while 5 open cases is red
- Awaiting Callback from company
- Is the customer waiting to speak to someone about a case
- Only options are yes or no
- Yes could be red
- No could be green
- Days Awaiting Callback
- How long has the customer been waiting to hear from someone
- i.e. 1 day could be green or 3 days could be red
- Number of Open Cases
Contest Deliverables:
- The winning entry will show the above Scoreboard details across their various states. Please provide multiple examples of your Scoreboard with different account - i.e. make multiple copies that allow us the visual how this will look with various states in each field. Please see design considerations below as they will be part of judging as well.
- We are only concerned with Scorboard design, the rest of the page can be an image placeholder.
IMPORTANT Design Considerations:
- Since your designs will be used inline within Salesforce, we don't have any fixed width for the designs.
- Vertical space is limited - you have 115 px of vertical (height) space (max).
- Make sure your designs will get adjusted in a fluid layout.
- Note that your designs will be used within the Salesforce page above customer information, think on how best to display them.
- Web-safe fonts are required for all areas that display variable text.
- This will also be used for a mobile display as a secondary, less important use case. Please provide a mobile option of the design as well which is optimized for vertical scrolling on an iPhone-format device.
Target User:
- Busy call-center employees, both placing and receiving customer calls.
Judging Criteria:
- How well you create the inline display.
- Cleanliness of your graphics and design.
- Design looks and User Experience.
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.
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.