Challenge Summary
Welcome to "F2F Asclepius - Updates Support Cases Apps Design Challenge". We are in progress developing new application in salesforce platform and in this challenge, we are looking for your help to create and updates several screens for this application. Join us NOW!!
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 design challenge you will be designing an APP for a Mobile and Desktop 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:
- Our Mobile and Tablet Screen design.
- Wireframes for Desktop version.
Design Goals:
- Your designs need to be responsive, for this challenge you will be design mobile and desktop views.
- 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
- Desktop Size : 1280px width with height adjusting accordingly
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.
Task Requirements :
01. Updates Existing Mobile Screens :
- Create Case Form Screen :
-- needs to be updated to be a dynamic form which loads the next question dynamically as the user selects answers (please see attached desktop mockup as they have the same desired functionality. Perhaps we can re-use the results of our desktop challenges (explained below) for this?)
-- Once all answers have been provided, the page will show the list of KB articles as it does today (though in some situations there will not be any relevant articles in which case that section should be skipped).
-- It will also dynamically update the buttons at the bottom (they may be added elsewhere in UI above footer if that looks better) based on the answers provided above, the options will be include any or all of the following (the original buttons we have today): Start a Chat, Create a Case, Call Support
-- Please note that not all buttons will be available in all situations. Another option is to have all 3 buttons available on Create a Case page but have them disabled until the user selects all answers and then only enabled required ones.
-- The buttons at the bottom need to change:
* When looking at the list of Cases (main page) the buttons need to be merged to a single button which simply says "Need Help?" and opens the current Create a Case page
* When looking at the create a Case page, the buttons should be removed (the green footer should stay without buttons per the above as the buttons get added later)
* When looking at an existing Case, the buttons should be two buttons (Start Chat, Call Support)
- Case List Screen :
-- Remove Title from messages at top (ie: System Message / System Alert)
-- Add a 3rd type of message (warning message) which has yellow color
-- Remove Icons from left of messages
-- For icons with numbers to right of Cases, show each as red with white text (same as the alert on the icon in the upper right)
-- Replace three buttons at bottom with a single “Need Help?” button
-- Replace Case title in list with {CASE_NUMBER} – {CASE_SUBJECT} (or otherwise make Case # visible)
- Case Detail Screen
-- Remove Case Comments/Activities Buttons from Case Detail page (we don’t need those pages any more)
-- Below the description (where the current Case Comments/Activities buttons are) add a Chatter Feed. The feed should have a header of some kind separating it from the Description
-- Replace the Type/Origin fields with Status and Priority fields
-- Replace the Case Title with the following: {CASE_NUMBER} – {CASE_SUBJECT} (or otherwise make Case # visible)
-- Add a help bubble or icon of some kind to the Priority field which pops up a modal with information about the different priority levels
02. Create Desktop version :
- After finished updating the mobile screens, we need your help to create the desktop version for the apps.
- You need to converted all mobile screens to desktop version.
- We have attached a mock up of the desktop experience and below are some additional details:
* The main panel is just a desktop version of the Create a Case scree described above.
* The mockup includes more detail on how it will function. It doesn't have to look like chat on mobile per our original design but consistency would be good.
* When a user clicks on an existing Case to View it, they should be taken a separate custom designed page (not included in mockup) which is a desktop version of the mobile view case page we designed.
* The lists of Comments and Activities should be visible at all times on this page along with field details due to the additional space available.
* The same Escalate, Solve, Hide, etc. buttons should also be available on desktop (desktop should include all functionality of mobile app + any additional functionality specified in mockup).
F2F GUIDELINES:
This F2F is subjective - so the first solution that the client likes and fulfill the required updates will win.
We will review ALL submissions until we declare a winner based on
1) Task Requirements
2) Client is happy with how it looks/works
3) Time the solution was submitted
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 an 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.
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.