Challenge Summary
Welcome to the Salesforce1 Asclepius – Support Cases Mobile Design Challenge! This challenge is focused on creating visuals to create a Mobile Application that fits within the Salesforce1 design look and feel. (Salesforce1).
The goal of this APP is to provide the end user with the quickest way to Create/Check IT support cases, match the client current branding and provide a world-class support experience to their end user to interact with help desk.
For this challenge you are provided with client branding guidelines and the existing SF1 look and feel. Take a look at these following links as further reference as to how to refine your design:
http://sfdc-styleguide.herokuapp.com/assets/S1AppGuidelines.pdf
http://sfdc-styleguide.herokuapp.com/?id=examples
http://sfdc-styleguide.herokuapp.com/?id=style
Round 1
Submit your design for a Checkpoint feedback:
1. Home Screen. (iPhone + iPad)
2. Create a Case wizard. (iPhone + iPad)
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Final Design plus any Checkpoint feedback:
1. Home Screen. (iPhone + iPad)
2. Create a Case wizard. (iPhone + iPad)
3. View Case. (iPhone + iPad)
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Challenge Description:
For this design challenge you will be designing an APP for a Mobile that helps manage Create/Check IT Support cases for.
We are looking for the [topcoder] design Community to help us with planning our new digital sales aid application!
Design Guidelines:
- Branding Guideline (Branding Guideline.zip).
- Client Mockup (Mockups_from_Client); this is just to explain what the client is thinking of, please do not copy this.
- Home Screenshot (Home.png).
Design Goals:
- Your designs need to be responsive, for this challenge you will be design both iPhone and Tablet views.
- How should this mobile application look?
- Read the user story and decide what should the priority features be?
- How quickly could you find information? This app should be very easy to use.
- Think simple but effective solutions!
- We want this to be MODERN application design!
Screen Sizes:
- Mobile Resolution: Design for iPhone 6 Retina Display 750px x 1334px.
- Tablet Standard Size: 1024px x 768px
Make sure you create graphic in 'shape' format, so when resize for retina versions, graphic still look sharp! It will be great if you can provide the landscape version.
User Story:
- John is a doctor and opens the app (assume he is already logged in to salesforce).
- In home screen he will be able to see system messages and his open cases.
- If John clicks on a case he will be able to view the case in details.
- John can create new cases when he clicks on “Create” button from home screen.
Design Considerations:
- The client really wants something pretty and EASY for their customers. Most of their customers are Doctors who tend to be very busy and have very little patience, especially for technology. The simpler and more intuitive we can make it for them, the better.
- Most users will be using the app to either Create a New Case OR check the status of an existing one. It is important that we make these tasks easy,
- End-Users (customers) will not be editing cases. They probably wont post many activities or comments either so the most focus should go on the Home Page and the Case Creation wizard.
Required Screens:
Here's the basic flow and screen requirements of what we are looking for you to provide designs on:
1. Home Screen:
- Please refer to Home.png; this is just to explain what the client is thinking of, please do not copy this.
- Client wants to be able to display 1 or more customizable system messages prominently within the UI. And optionally allow the user to hide those messages.
- Most of the page should be devoted to a list of currently Open cases. This should display the following:
-- Subject.
-- Date of Last Activity.
-- Content of latest comment.
-- Indicator of unread comments/activities.
- App should include buttons/links to quickly do the following:
-- Create a Case.
-- Start a chat (link to another webpage which opens in a standard mobile browser).
-- Call Support (dials a number on the device’s phone).
2. Create a Case wizard:
- This page should show the user a small number of fields:
-- Subject. (Required)
-- Description. (Required)
-- Type. (Optional and should be a drop down list)
-- Origin. (Optional)
- Client has mentioned they like how this site’s form and how it looks like a chat:
-- http://www.mastercard.us/support/
-- We don’t have to make ours look like 2 people chatting but the way it asks questions and reacts to answers is what they like.
- At the bottom of the form there should be a Go or Submit button, when this is clicked they want it to popup a modal or go to another page that shows links to knowledge articles that might be related to the current issue. The user may either click one of the links or click another button to finish submitting the Case if none of the articles help them.
-- If a user clicks on an article link, it will open it in a separate link in a mobile browser, note that we don’t have a build a UI for that.
3. View Case:
- When a user clicks on a Case link from the home page, they want to be taken to a page where they can view some basic case details:
-- Subject.
-- Description.
-- Type.
-- Origin.
-- Created Date.
-- Last Modified Date.
- They also need to be able to switch to and view the following lists of related items:
-- Case Comments:
--- Comment content.
--- Comment posted by.
--- Comment posted date.
-- Activities:
--- Activity Status.
--- Activity Assignee/Owner.
--- Activity Details.
--- Activity Date.
- Each of the items in the above list does not HAVE to be a link or it can link to the standard SF1 view of the record in question.
Target Audience:
- Doctors and nurses who tend to be very busy and have very little patience, especially for technology.
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.
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.