Challenge Summary
Welcome to Medical Form iPad App UX Design Concepts Challenge. In this challenge, we are looking for your help to create a simple salesforce1 based iPad application for medical practitioners. As this is on the Salesforce1 platform, we are looking for best design practices and thought to leverage this platform.
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) Patient List (iPad Portrait)
2) Patient Details (iPad Portrait)
3) Survey / Form (iPad Portrait)
- 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) Patient List (iPad Portrait + Landscape)
2) Patient Details (iPad Portrait + Landscape)
3) Survey / Form (iPad Portrait + Landscape)
- 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 Description:
The purpose of this design challenge is to create a lo-fidelity mockup focusing on usability. The form is for medical uses. The users (or practitioners) will fill out the form on an iPad. Users will use these forms on site with patients and will be limited in the time they’ll have to fill out these forms. Therefore, ease of use and speed is a priority when going through the forms. Questions and answers on the form will be a combination of preselected text and freeform text.
Design Guidelines:
- Modern design with focus on usability (this means, the user should know what to do next)
- Keep things consistent. This means all graphic styles should work together.
- This app will be built on Salesforce1: http://www.salesforce.com/mobile/overview/, you can consider this when designing this application.
- Think simple but effective solutions
- Salesforce 1 Style Guide - learn this and be inspired!
- Fonts: Helvetica Neue or what works best for Salesforce1.
- Display examples using all data types listed given below
Screen size:
Design your screens for iPad
- 2048 x 1536px (landscape)
- 1536 x 2048px (portrait)
User Flow:
John Doe is a Therapist, he is on his routine job to visit patients and as a part of this, he is required to fill out this form/survey for each of them.
- He will already be logged into his iPad (This application will be built on the Salesforce1 platform)
- He views a list of patients and chooses the "patient's name" that he is with currently.
- He is able to view patient's information and also is able to edit their information.
- He taps on a button that launches the form/survey which need to filled out for that patient
- Within the survey form, he find few sections distributed across multiple screens and it provides a way to easily navigate back & forth between different sections thereby allowing him to finish or change answers as required.
- While submitting the form, it clearly indicates that certain mandatory fields were not completed - so he goes back to that step and completes those fields.
- He submits the form and a success message is shown!
Required Screens:
We need below screens to be designed as a part of this application...
1) Patient Selection:
- User is presented with a screen that allows them to choose a patient.
- This list should be easy to navigate, consider how this will be done, (i.e., search tool, A-Z filter, etc)
- Try to come with a solution that provides great user experience.
2) Patient Details:
- Once the patient is selected, they will be presented with the patient's information.
- Examples for patient information: First Name, Last Name, Date of Birth, Primary doctor, gender, home/cell number, physician name, physician NPI and you can use a few Lorem Ipsum fields as well. (Feel free to show fields that you think would be appropriate for this section - so it gives us a impression that we are looking at patient details)
- Try to keep this as simple as possible as we are just looking to show better user experience through this application.
- The therapist will also have access to edit the patient's information.
- From this screen, the therapist should have the ability to launch the form/survey.
3) Survey / Form: (IMPORTANT SCREEN)
- Once they choose "Survey/ Form" they will land in this screen.
- The survey should be easy to navigate (it could grow to have up to 10 sections/screens and shouldn’t take a lot of time for the therapist to navigate), show us few to many sections and how a user will be able to switch between those sections. (keep it simple)
- Therapist should be able to edit any form, that means they should be allowed to jump back and forth between screens if they need to finish or change answers.
Form Validation:
- This should be considered (alerts, warnings)
- There could be required field, or all field might become required and therapists shouldn’t be prompted to finish and easily identify what is missing.
Action Buttons:
- If button are used, visibility is important and understanding what they do (active / disabled states)
- Back and forth transitions between the sections/screens should be considered.
- Example: buttons to navigate back and forth, button placement, swipe left/right, progress bar, breadcrumbs.
- Be creative, you may feel the need to use all the elements or none at all.
Input Fields:
- Each input should be as easy as possible to enter patient data
- Data types listed below, show an example of each input type. You can use dummy text (lorem ipsum..)
- Screens showing survey data (design sample for each data type)
Data Types:
- Date: xx/xx/xxxx
- Time: Hours & Minutes
- Short Text: Free form (example: names)
- Long Text: Free form (example: descriptions)
- Numbers: Numbers
- Percentage: %
- Letters & Numbers: Mix between letters and numbers
- Dropdown Selection: Yes/No (or) Medium Text (Lorem ipsum dolor sit amet)
- Dependencies: If I click Yes, then another question appears
- Ratings: Example "Select your activity level between 0 and 6 (0 = not limited at all and 6 = totally limited or unable to)
Target Audience:
- Medical Therapist
Judging Criteria:
- How well you plan the user experience and capture your ideas visually
- Does your design follow salesforce1 guidelines?
- 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 files.
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.