Challenge Summary
Welcome to OARS Responsive Application Design Challenge.
We need your help to come up with solutions for a dashboard-like design that works as a ServiceNow based application assisting patients and clinics with managing addiction rehabilitation process, considering mobile-first as the primary foundation of the concept.
Best of luck!
1. Admin > Dashboard (Desktop and mobile view)
3. Admin > Patient View (Desktop view)
4. Patient > Dashboard (Mobile view)
7. Patient > Journal (Mobile view)
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
1. Admin > Dashboard
2. Admin > Content View
3. Admin > Patient View
4. Patient > Dashboard
5. Patient > Educational Content
6. Patient > Contact Health Care Team
7. Patient > Journal
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
The goal of this challenge is to design the look and feel from scratch of a web application that will help healthcare providers to easily track patient progress through their program and patient performance. Patients will have access to a communication, educational, and journaling tool to help keep them on track.
You are provided with VERY ROUGH mockups (see PPT file attached). You are encourage to use the data as a start point but come up with your own solution from scratch. Don’t simply re-skin it.
Screens Requirements
Overall
- Show hover/active states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc.
- The design preference goes towards to “dashboard” style. Mobile experience is very important, consider making it very easy to use and scale.
1. Admin > Dashboard
- See PPT page #1.
- Admin should be able to see content by selecting date ranges (Day, Week, etc).
- Dashboard should have search capability.
- The top right graphic from the PPT (colored bars) should show the population's status in each of the 4 tracked data points: Journaling, Attendance, Participation, and Testing.
- Clicking on “Content Access” would activate page #2.
- Clicking on a patient’s name would active page #3.
- The main dashboard page displays a filter area, with the following parameters:
-- Group: group A, group B, etc.
-- Status of Journal: Green, orange, red.
2. Admin > Content View
- See PPT page #2.
- Show for a single patient what content they have access to.
- Also shows what the content is what type and when the person's access was last changed.
3. Admin > Patient View
- See PPT page #3.
- We ideally would have a calendar that showed 4 potential data points. Attendance, Participation, Journal activity, and Test Results. Admins will be tracking this information.
- We would like there to be a color coded visualization with green, yellow, and red. Green represents good results, while yellow is cautionary, and red requires attention.
- Calendars must be navigable (select next/previous month, etc).
4. Patient > Dashboard
- See PPT pages #4 and #8 (merge).
- Patient’s dashboard should show a quick navigation to the different areas of the application and a quick summary of his recent status.
5. Patient > Educational Content
- See PPT page #5.
- List of items a patient can read or watch.
- Each item should have a title and description.
6. Patient > Contact Health Care Team
- See PPT page #6.
- Patients have an inbox where they can start messages with selected doctors.
- On each thread they can exchange messages easily in a chat mode.
- The messaging feature should allow to attach links or files.
7. Patient > Journal
- See PPT page #7.
Branding Guidelines
- Colors are open to suggestions. We would avoid vivid, flashy, and earth tones/colors.
- We want it to feel light, professional, and clean.
- Use a placeholder for the logo.
- Keep things consistent. This means all graphic styles should work together.- Keep things consistent. This means all graphic styles should work together.
References
Some dashboard-oriented designs for inspiration. DON’T COPY ANYTHING.
- https://gojobhero.com
- https://www.docebo.com
- https://www.meetup.com
Screen Specifications
- Desktop: 1280px min width. Height as much as needed.
- Mobile: 750px width. Height as much as needed.
- Make sure your work is in a vector format, for retina scaling and high fidelity.
MarvelApp Presentation (request through email, NOT forums)
- Provide a MarvelApp presentation of your design to help us understand your design concept.
- Request a MarvelApp prototype from me (mahestro@copilots.topcoder.com) and/or Adroc (adroc@topcoder.com).
- Provide the MarvelApp shareable link in your notes during submission upload.
Stock Artwork (Illustrations, Icons, Photography)
- Stock artwork is allowed for this challenge.
- Make sure to declare all your assets properly or you might fail screening.
Target User
Addiction rehabilitation providers and their patients.
Judging Criteria
- Interpretation of the user experience.
- Is the website/application easy to use?
- Are mobile-first considerations appropriately applied to the design concept?
- Cleanliness of your graphics and design.
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, Illustrator or Sketch. Layers should be named and well organized.
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.
We need your help to come up with solutions for a dashboard-like design that works as a ServiceNow based application assisting patients and clinics with managing addiction rehabilitation process, considering mobile-first as the primary foundation of the concept.
Best of luck!
Round 1
Submit your design for a checkpoint feedback.1. Admin > Dashboard (Desktop and mobile view)
3. Admin > Patient View (Desktop view)
4. Patient > Dashboard (Mobile view)
7. Patient > Journal (Mobile view)
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Round 2
Submit your final design plus checkpoint feedback (ALL VIEWS).1. Admin > Dashboard
2. Admin > Content View
3. Admin > Patient View
4. Patient > Dashboard
5. Patient > Educational Content
6. Patient > Contact Health Care Team
7. Patient > Journal
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
The goal of this challenge is to design the look and feel from scratch of a web application that will help healthcare providers to easily track patient progress through their program and patient performance. Patients will have access to a communication, educational, and journaling tool to help keep them on track.
You are provided with VERY ROUGH mockups (see PPT file attached). You are encourage to use the data as a start point but come up with your own solution from scratch. Don’t simply re-skin it.
Screens Requirements
Overall
- Show hover/active states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc.
- The design preference goes towards to “dashboard” style. Mobile experience is very important, consider making it very easy to use and scale.
1. Admin > Dashboard
- See PPT page #1.
- Admin should be able to see content by selecting date ranges (Day, Week, etc).
- Dashboard should have search capability.
- The top right graphic from the PPT (colored bars) should show the population's status in each of the 4 tracked data points: Journaling, Attendance, Participation, and Testing.
- Clicking on “Content Access” would activate page #2.
- Clicking on a patient’s name would active page #3.
- The main dashboard page displays a filter area, with the following parameters:
-- Group: group A, group B, etc.
-- Status of Journal: Green, orange, red.
2. Admin > Content View
- See PPT page #2.
- Show for a single patient what content they have access to.
- Also shows what the content is what type and when the person's access was last changed.
3. Admin > Patient View
- See PPT page #3.
- We ideally would have a calendar that showed 4 potential data points. Attendance, Participation, Journal activity, and Test Results. Admins will be tracking this information.
- We would like there to be a color coded visualization with green, yellow, and red. Green represents good results, while yellow is cautionary, and red requires attention.
- Calendars must be navigable (select next/previous month, etc).
4. Patient > Dashboard
- See PPT pages #4 and #8 (merge).
- Patient’s dashboard should show a quick navigation to the different areas of the application and a quick summary of his recent status.
5. Patient > Educational Content
- See PPT page #5.
- List of items a patient can read or watch.
- Each item should have a title and description.
6. Patient > Contact Health Care Team
- See PPT page #6.
- Patients have an inbox where they can start messages with selected doctors.
- On each thread they can exchange messages easily in a chat mode.
- The messaging feature should allow to attach links or files.
7. Patient > Journal
- See PPT page #7.
Branding Guidelines
- Colors are open to suggestions. We would avoid vivid, flashy, and earth tones/colors.
- We want it to feel light, professional, and clean.
- Use a placeholder for the logo.
- Keep things consistent. This means all graphic styles should work together.- Keep things consistent. This means all graphic styles should work together.
References
Some dashboard-oriented designs for inspiration. DON’T COPY ANYTHING.
- https://gojobhero.com
- https://www.docebo.com
- https://www.meetup.com
Screen Specifications
- Desktop: 1280px min width. Height as much as needed.
- Mobile: 750px width. Height as much as needed.
- Make sure your work is in a vector format, for retina scaling and high fidelity.
MarvelApp Presentation (request through email, NOT forums)
- Provide a MarvelApp presentation of your design to help us understand your design concept.
- Request a MarvelApp prototype from me (mahestro@copilots.topcoder.com) and/or Adroc (adroc@topcoder.com).
- Provide the MarvelApp shareable link in your notes during submission upload.
Stock Artwork (Illustrations, Icons, Photography)
- Stock artwork is allowed for this challenge.
- Make sure to declare all your assets properly or you might fail screening.
Target User
Addiction rehabilitation providers and their patients.
Judging Criteria
- Interpretation of the user experience.
- Is the website/application easy to use?
- Are mobile-first considerations appropriately applied to the design concept?
- Cleanliness of your graphics and design.
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, Illustrator or Sketch. Layers should be named and well organized.
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.