Challenge Summary
Welcome to the SFDC Appointment Check-In UI and Medical Dashboard Design Concepts Challenge!
With the increase usage of Salesforce Communities, we need to have the same rich engagement when dealing with in-person sessions and a visual dashboard for personal health status. First, the challenge is identifying the right patient/member and the important information in a quick glance when you may have up to 12 unknown individuals. Second, is to create a sticky, highly visual dashboard to convey the current health status for a single individual.
The first part of this challenge is to build out a touch based “check in” module that would have the fundamentals of a responsive design for tablet and phone to view a photo, critical information and key actions. The interface will be used by receptionist who will be receiving patients as they arrive for a medical appointment.
The second part is to provide the patient view of their current health status. This health ‘dashboard’ is intended to be used to see a graphical view that will help identify the key areas of health which need focus first (fitness, diet, mental/stress, etc). This view will be used during the visit to the medical office but also focused on using on a daily basis as the patient tracks their health for the year.
We are looking for the [topcoder] design Community to help us with this cool new part of this opportunity!
Round 1
Submit your initial screen for Checkpoint feedback
1. Morning Check-in (Tablet - 10”)
2. Waiting Room Check-in (iPhone)
3. Create Health Dashboard Page (iPhone)
4. Create Health Detail Page (iPhone)
- Feel free to add any other additional screens which are necessary to explain your concept.
- Notes.jpg: Any comments about your design for the Client
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Your Final designs for all the required page with all checkpoint feedback implemented.
1. Morning Check-in (Tablet)
2. Waiting Room Check-in (Phone)
3. Create Health Dashboard Page (Phone + Tablet)
4. Create Health Detail Page (Phone + Tablet)
- Feel free to add any other additional screens which are necessary to explain your concept.
- Notes.jpg: Any comments about your design for the Client
- 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 two pairs of pages. The intent is to show a modern touch focused interface.
A) Appointment Check-in
This part of the design challenge is focused on creating the check-in tool that will allow receptionists to visually recognize individuals based on a photo and greet them by name. The tablet and desktop interfaces should be focused on showing about 10 or 12 people at the same time. The phone interfaces will only need to show 4 or 5 users concurrently. Each person is arriving for a medical appointment so we know we have the photo and height, weight, gender, and many other physical characteristics that could be used to help in the reception tool.
Once the individual is identified, the patient will be checked in and however, if the patient also provides some relevant information, a second screen that will allow the addition of capturing theses comments will also be required. These additional comments should be posted to a Salesforce Chatter Feed for interaction with the doctors and nurses. Example of additional information may be related to “I need the doctor to look at my ingrown toenail” or “I need to take a short phone call from 10am to 10:15.”
B) Health Dashboard
This component focus is for an individual to get a quick glance on the many areas of that make up their overall health. The interface should be modern and the evaluation will be based on the likely stickiness. Included any number of health categories to illustrate the design concept, some examples include; diet, weight, fitness, cardiovascular, weight, mental, vision, or blood glucose. The dashboard should convey the importance of that category for me (e.g. large tile or higher in the list with larger font). And for each category, various indicators to help know what is important to check out first. These indicators could included; Chatter message waiting, trending up/down, new test result, relevant news article, target or goal update.
What is Salesforce Chatter?
Chatter is the enterprise social network that allows teams to take action and sync up like never before. See how much more you can get done when you can create custom actions and deploy instantly to every desktop and device, and access any app from the social feed.
To learn more: https://www.salesforce.com/ca/chatter/overview/
IMPORTANT!! Design Guidelines:
Visualforce Reference: (Desktop)
https://developer.salesforce.com/page/An_Introduction_to_Visualforce
(This is a developer-focused site, but has UI guidelines...please also go through the attached blogging examples)
Salesforce1 (SF1) References: (Mobile)
http://sfdc-styleguide.herokuapp.com/assets/S1AppGuidelines.pdf
http://sfdc-styleguide.herokuapp.com/?id=examples
http://sfdc-styleguide.herokuapp.com/?id=style
Design Focus:
- Your designs need to be responsive, for this challenge you will be design both tablet and mobile view. The mobile and tablet view can look very similar or be very different. You can assume that the tablets will be iPads with iOS7 or later in landscape.
- While the style guidelines are limiting in some ways, we are looking for a creative customization
- The simple clean interface with graphical representation of key information will be a key factor in determining how quickly the to full profile of the patient can be understood and related to the individual arriving at reception.
- Professional and clinical brand for health focused medical company (not Emergency room style).
- Think about a clean but effective solutions! Have fun creating this - let us know how you think it should work.
- Feel free to suggest concepts you would like to see or use, this is about create a brand new interaction channel.
- We want this to be MODERN application design!
Screen Sizes:
- Tablet, iPad 3 or later (1024x768)
- Phone, iPhone 5/5c/5S (1136x640)
Branding Guidelines:
- Font: Open to designer
- Style: Open to designer
- Color: Please use RGB palette below (or very similar).
-- Dark Blue 000099
-- Light Blue 66CCFF
-- Dark Grey #A8A8A8
-- Light Grey #F8F8F8
-- Black
-- White
Note: these are the primary “corporate colors” but accent can be added.
Supporting Documents:
- Screenshots (Screenshots.zip), those screenshots are just to explain the idea and not a design requirement.
User Stories and Required Screens:
Below, we have couple of user stories along with the required screens.
A.1 Morning Check-in
- Elevator doors open and a person gets off.
- The receptionist looks at the individual and her screen. She then greets them by name and confirms basic visit criteria.
- “Good morning Ms. Highflyer, I see you are here to see Dr. Chow this morning at 10:00. I also wanted you to be aware that we have a kosher meal available for you at lunch.” (appointments often last 5hrs)
- The receptionist marks them as “arrived” on the screen by clicking the icon/button to initiate the back office notification to Dr. Chow.
- Ms. Highflyer says “Thank-you, and I am hoping that I will have a chance to have the doctor look at my toe.”
- The receptionist posts to Chatter the additional request as a note.
- The receptionist asks Ms. Highflyer to have a seat as Dr. Chow will be out shortly.
A.2 Waiting Room Check-in
- The nurse is going to get a patient from the waiting area using her iPhone or small tablet.
- The waiting area will only have 3-5 people waiting at any point in time.
- She wants to talk with Ms. Highflyer and the phone will highlight the appropriate person (a star, bolded name, top in the list). She also notices there is a Chatter icon indicating there are additional notes about the toe.
- As she enters the waiting area, she sees Ms. Highflyer but another patient poses a question as soon as she enters the room.
- The nurse can look at her screen and visually identify the other patient is Mrs. Patel.
- She is able to click on Mrs. Patel using her phone and post a note to Chatter indicating Mrs. Patel wants to know if she can eat now or has to wait until after her appointment. This will initiate a business process to Mrs. Patel’s nurse for assistance.
- She tells Mrs. Patel that someone will be out in a moment to give her the answer then goes over to Ms. Highflyer.
- She asks if Ms. Highflyer is ready for her appointment then click the check-in icon or button to initiate the back office process.
B.1 Health Dashboard
- The patient can open the health dashboard at home or while in the clinic and get insight into the following:
-- A single screen focused on the most important items related to “My Health” with a clearly understandable to know which should be looked at first.
-- Indicators to show what actions or new information is available on each item. The patient can see the top item on the screen is “Fitness”.
-- The Fitness item has multiple indicators to help the patient understand why it is so important today. These include:
--- Chatter - so they know there is a personal message from the Doctor or Nurse for them to read.
--- Results - to let them know their is either new input data from their Fitbit/Muse or updates from their last medical visit
--- Goal - shows that they need to update one of the goals for their Fitness
--- Trend - an indicator showing this item is getting better or worse over the last few days
--- Badge - Achievements recognized by completing goals or your Doctor’s feedback
B.2 Health Details
- Provides an understanding or details around the specific item selected from the dashboard. One possible example could be ‘Fitness’ which show the following expanded information. The following are only to help explain the concept - feel free to expand or change based on the best interface design.
-- Chatter: Direct messages for the patient such as:
--- “Your appointment went well yesterday. I hope you are happy with the progress. You can see all the Results but wanted you to remember to set at least one Goal around increased Fitness level, e.g. increasing your Fitbit steps by 30%. Let me know if you have any questions. Dr. Chow.”
--- “Your treadmill test results are now available, take a look at them in the Results area if you like but as we discussed, you do need to spend a little time each day increasing your activity levels. Nurse Nancy.”
-- News: List of articles and reasons they should read.
--- Men’s Journal - 40+ men with Celiac disease.
--- ABC News - New prevention for colon cancer.
--- GQ - Looking good means feeling good. Forty is the new 20!
--- Outdoor Magazine - Getting to started with cycling at mid-life.
-- Results: This is just a high level summary of the different results that are driving the current status for the overall Fitness Level. This could included
--- Treadmill Test - 6.3/10 {or yellow icon, or lazy looking symbol}
--- Fitbit - 2200 steps {or icon based indicator, yellow or red}
--- App - 78% {or icon} (this indicates they recently used an App like MapMyFitness and reach 78% of their goal)
-- Goals: Show their current goals and % complete or actions required
--- Increase steps to 5000
--- Get Blood Glucose test every month
---Bike to work twice in October
-- Badges: (icons representing achievement)
--- 2014 Health Assessment
--- Gluten Free Diet
--- 2000 Steps Every day
--- September Health Questionnaire (completed)
Target Audience:
- External customer who is interested in create a new engagement experience with their patients upon arrival
- Receptionists
- Patient
Judging Criteria:
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- Intuitive UI to make it easy for users to know what to do and where to focus without any training
- Your design should possible to build and make sense as a mobile application
- Is your design following the design guidelines (visualforce and salesforce1)?
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 (preferred), 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.