Challenge Summary
Welcome to 4Next - Care Transition Responsive Design Challenge.
4Next is a healthcare application used by some of the leading hospitals, rehabilitation, and nursing centers in the Northeastern U.S. This application enables healthcare providers to manage patient needs transfer patients from acute facilities (i.e. hospitals) to non-acute facilities (i.e. nursing facility, home care, durable medical equipment (DME), and hospice).
The design and function of the current application is dated, and we need to improve the user experience for our users. 4Next users are very passionate about their patients and use 4Next every single day to find the best solutions for their patients - your work will enable our users to help their patients in a very important way.
We need your help with the redesign and we encourage explorations with new UI patterns and layout options.
1. Dashboard (Active Case) - Desktop
2. Create a Case – Step 1 - Desktop
3. Case Details - Desktop
4. Search Providers - Desktop
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
1. Dashboard (Active Case) - Desktop
2. Create a Case – Step 1 - Desktop
3. Case Details - Desktop
4. Search Providers - Desktop and Mobile
5. Send Request Popup - Desktop
6. Provider Details - Desktop
7. Request Queue (List View) - Desktop
8. Request Details (Checklist View) - Desktop
- 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 improve the usability by reimagining the design of 4Next. The current application is dated and cumbersome to navigate. We would like to introduce modern UI patterns to improve the user’s efficiency and experience. Users are committed to using 4Next daily and we want to make the care transfer process seamless and enjoyable.
You are provided with a content document that contains information about the pages, features and user flow.
Wireframes
- Find wireframes online: https://invis.io/CNGHL7J3SUG.
- For this design exercise, ignore anything related to “additional tasks” in green.
- The first page contains a user flow. It’s important to understand the flow before proceeding.
- This application has two primary users, acute and non-acute users. You will be designing screens for both user roles (not all of them).
- Their experiences, landing pages, and navigation, are completely different. We’d like to have the same design system for both products.
- The process flow has been decided and should not change but you are encouraged to come up with a unique layout and UX engagement approach.
Concept Goals
Improve Efficiency and Effectiveness
We are focused on improving the care transition process. We encourage you to leverage modern design patterns and technology to improve efficiency. The new design should include layouts that will allow users to move through the application quickly while also accurately inputting and checking for correct information.
Modernize
We need to incorporate modern UI patterns that the users are familiar with in their personal life in order to create a robust and enjoyable user experience. Designs should be clean and intuitive and every feature should have a clear purpose.
Systematize functions
Our users have grown to using work-arounds for functions that are too limiting or non-existent in the previous application. We need to make information available, findable and trackable so as to improve knowledge transfer and transparency between users.
Allow for customizations
Due to the nature of healthcare, there will always be situations and conditions that are unique to particular patients. We want to encourage users to use systematic methods of transferring knowledge but we need to allow them to make custom notes wherever necessary in order to ensure a better placement.
Screens Requirements
Overall
- Show hover/active states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc.
- Navigation:
-- See Wireframes.
-- Additionally you can add the logo, user and standard footer.
-- We will need two header designs under the same style/system, one for acute users and another one for non-acute users.
-- Do not use profile picture.
1. Dashboard (Active Case) - Desktop
See page 11.
Considerations:
- Case duration (timeline) could be very short (inmediat) or as long as two or more years.
- We expect to have one case per hospital visit. We might not need a pagination control on this page.
- Care transitioning is a compact news section. Typical thumbnail, title, etc.
- When “Show all” toggle is clicked it shows all the cases (active, past), when its unclicked, it shows only active.
- Case status: accepted, confirmed, pending, declined.
2. Create a Case - Step 1 - Desktop
See page 4.
Considerations:
- All the collapsable panel options follow the same pattern. Once toggled, it displays an auto-complete box alongside with suggestions (quick add).
3. Case Details (Accepted) - Desktop
See page 6.
Considerations:
- Create both list and grid views.
- The thumbs icons mean to map the preference functionality, not liking/disliking, just FYI.
4. Search Providers - Desktop and Mobile
See page 7.
Considerations:
- Do not replace the search button from the main navigation with a search bar. This page should be accessed from the menu.
- LOC is Level of Care and has a hierarchy Level of Care and Patient Needs to select for their searching (two levels max).
- “Partners” is meant to be a logo (partners logo - provided).
5. Send Request Popup - Desktop
See page 8.
6. Provider Details - Desktop
See page 9.
Considerations:
- Add a “sent” status to the messages, besides “seen”.
- The contacts sections could allocate several contacts. Please create a design for that case.
7. Referral Queue (List View) - Desktop
See page 17.
Considerations:
- Program is the same as Patient Need/Services.
- Status is listed in the swim lane view.
8. Referral Details (Checklist View) - Desktop
See page 19.
Branding Guidelines
- Use attached branding book for 4Next’s parent company Partners for typography, color, layout and UI reference.
- Fonts are open to suggestions.
- Use attached 4Next logo or a knocked out white or black version of the logo. We are not tied to the logo so you can even modify it a bit if you want.
- Use the Partners logo as is to reference our parent company Partners Healthcare.
- Keep things consistent. This means all graphic styles should work together.
Design Reference
Some of our competitors do a good job of representing our design concepts, but we think we can do even better. Take a look at our competitor sites before starting. Just for reference.
DO NOT COPY anything from these sites:
- Ask myHR: 4Next’s parent company Partners Healthcare launched a new HR website that their internal users are very excited about. This can serve as an inspiration for potential color schemes and design aesthetic.
- Allscripts: We like the use of color and modern feel of their website. Some users use their also-dated application alongside ours.
- Trello: We like the swim lane concept for sorting statuses
-AngelList: The search function on this startup search is extremely powerful. We modeled our search after theirs because it offers many useful predetermined search terms and yet allows for the recognition of custom search terms.
Screen Specifications
- Desktop: 1280px 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 a MarvelApp prototype from me (mahestro@copilots.topcoder.com).
- Do not use the forums to request for MarvelApp.
- Provide clickable spots (hotzones) to link your screens and showcase the flow of the solution.
- 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
Carrie Anne the Case Manager
CarrieAnne is an acute user. She is a case manager in a hospital who is juggling multiple patients. For CarrieAnne, 4Next is housed in an iframe within a parent application. CarrieAnne enters the 4Next workflow with her focus on one patient. Her priority is to ensure the best placement for this patient by coordinating with non-acute facilities and supplying necessary information like the patient’s timeline, health insurance, services needed, clinical status, etc.
Goals:
- Ensuring patient satisfaction .
- Communicating with patient and patient’s family.
- Reducing patient length of stay by placing patient efficiently.
- Decreasing patient readmission by finding a good match for their patient.
- Increased access to provider information.
- Consider proximity of patient to care facility.
Alan the Admissions Coordinator
Alan is a non-acute user. He is an admissions coordinator at a hospice facility. Alan user typically accesses 4Next directly from a browser window. His priority is to review all of the patients that are referred to him and determine whether each patient would be a good match for his facility based on criteria mentioned above.
Goals:
- Accept well-matched patients to fill beds in his facility.
- Make sure he has accurate funding and clinical information for each patient.
- Decrease inappropriate referrals to reduce wasted time and effort.
- Have clinical information centralized.
- Consider proximity of patient to care facility.
Note: Other non-acute users may be a coordinators in hospices, homecare providers, medical supply companies, etc.
Judging Criteria
- How intuitive is it for the user to understand the process flow?
- Is it easy for users to identify the status of a case?
- Is the patient information digestible? Are the key pieces of information like clinical status, funding, and level of care properly called out?
- Is it easy for users to send information and find information they have been sent?
- Is the user clearly notified of messages and actions they need to take?
- Have appropriate modern UI patterns been utilized to improve efficiency and clarity?
- 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.
4Next is a healthcare application used by some of the leading hospitals, rehabilitation, and nursing centers in the Northeastern U.S. This application enables healthcare providers to manage patient needs transfer patients from acute facilities (i.e. hospitals) to non-acute facilities (i.e. nursing facility, home care, durable medical equipment (DME), and hospice).
The design and function of the current application is dated, and we need to improve the user experience for our users. 4Next users are very passionate about their patients and use 4Next every single day to find the best solutions for their patients - your work will enable our users to help their patients in a very important way.
We need your help with the redesign and we encourage explorations with new UI patterns and layout options.
Round 1
Submit your design for a checkpoint feedback.1. Dashboard (Active Case) - Desktop
2. Create a Case – Step 1 - Desktop
3. Case Details - Desktop
4. Search Providers - Desktop
- 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.1. Dashboard (Active Case) - Desktop
2. Create a Case – Step 1 - Desktop
3. Case Details - Desktop
4. Search Providers - Desktop and Mobile
5. Send Request Popup - Desktop
6. Provider Details - Desktop
7. Request Queue (List View) - Desktop
8. Request Details (Checklist View) - Desktop
- 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 improve the usability by reimagining the design of 4Next. The current application is dated and cumbersome to navigate. We would like to introduce modern UI patterns to improve the user’s efficiency and experience. Users are committed to using 4Next daily and we want to make the care transfer process seamless and enjoyable.
You are provided with a content document that contains information about the pages, features and user flow.
Wireframes
- Find wireframes online: https://invis.io/CNGHL7J3SUG.
- For this design exercise, ignore anything related to “additional tasks” in green.
- The first page contains a user flow. It’s important to understand the flow before proceeding.
- This application has two primary users, acute and non-acute users. You will be designing screens for both user roles (not all of them).
- Their experiences, landing pages, and navigation, are completely different. We’d like to have the same design system for both products.
- The process flow has been decided and should not change but you are encouraged to come up with a unique layout and UX engagement approach.
Concept Goals
Improve Efficiency and Effectiveness
We are focused on improving the care transition process. We encourage you to leverage modern design patterns and technology to improve efficiency. The new design should include layouts that will allow users to move through the application quickly while also accurately inputting and checking for correct information.
Modernize
We need to incorporate modern UI patterns that the users are familiar with in their personal life in order to create a robust and enjoyable user experience. Designs should be clean and intuitive and every feature should have a clear purpose.
Systematize functions
Our users have grown to using work-arounds for functions that are too limiting or non-existent in the previous application. We need to make information available, findable and trackable so as to improve knowledge transfer and transparency between users.
Allow for customizations
Due to the nature of healthcare, there will always be situations and conditions that are unique to particular patients. We want to encourage users to use systematic methods of transferring knowledge but we need to allow them to make custom notes wherever necessary in order to ensure a better placement.
Screens Requirements
Overall
- Show hover/active states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc.
- Navigation:
-- See Wireframes.
-- Additionally you can add the logo, user and standard footer.
-- We will need two header designs under the same style/system, one for acute users and another one for non-acute users.
-- Do not use profile picture.
1. Dashboard (Active Case) - Desktop
See page 11.
Considerations:
- Case duration (timeline) could be very short (inmediat) or as long as two or more years.
- We expect to have one case per hospital visit. We might not need a pagination control on this page.
- Care transitioning is a compact news section. Typical thumbnail, title, etc.
- When “Show all” toggle is clicked it shows all the cases (active, past), when its unclicked, it shows only active.
- Case status: accepted, confirmed, pending, declined.
2. Create a Case - Step 1 - Desktop
See page 4.
Considerations:
- All the collapsable panel options follow the same pattern. Once toggled, it displays an auto-complete box alongside with suggestions (quick add).
3. Case Details (Accepted) - Desktop
See page 6.
Considerations:
- Create both list and grid views.
- The thumbs icons mean to map the preference functionality, not liking/disliking, just FYI.
4. Search Providers - Desktop and Mobile
See page 7.
Considerations:
- Do not replace the search button from the main navigation with a search bar. This page should be accessed from the menu.
- LOC is Level of Care and has a hierarchy Level of Care and Patient Needs to select for their searching (two levels max).
- “Partners” is meant to be a logo (partners logo - provided).
5. Send Request Popup - Desktop
See page 8.
6. Provider Details - Desktop
See page 9.
Considerations:
- Add a “sent” status to the messages, besides “seen”.
- The contacts sections could allocate several contacts. Please create a design for that case.
7. Referral Queue (List View) - Desktop
See page 17.
Considerations:
- Program is the same as Patient Need/Services.
- Status is listed in the swim lane view.
8. Referral Details (Checklist View) - Desktop
See page 19.
Branding Guidelines
- Use attached branding book for 4Next’s parent company Partners for typography, color, layout and UI reference.
- Fonts are open to suggestions.
- Use attached 4Next logo or a knocked out white or black version of the logo. We are not tied to the logo so you can even modify it a bit if you want.
- Use the Partners logo as is to reference our parent company Partners Healthcare.
- Keep things consistent. This means all graphic styles should work together.
Design Reference
Some of our competitors do a good job of representing our design concepts, but we think we can do even better. Take a look at our competitor sites before starting. Just for reference.
DO NOT COPY anything from these sites:
- Ask myHR: 4Next’s parent company Partners Healthcare launched a new HR website that their internal users are very excited about. This can serve as an inspiration for potential color schemes and design aesthetic.
- Allscripts: We like the use of color and modern feel of their website. Some users use their also-dated application alongside ours.
- Trello: We like the swim lane concept for sorting statuses
-AngelList: The search function on this startup search is extremely powerful. We modeled our search after theirs because it offers many useful predetermined search terms and yet allows for the recognition of custom search terms.
Screen Specifications
- Desktop: 1280px 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 a MarvelApp prototype from me (mahestro@copilots.topcoder.com).
- Do not use the forums to request for MarvelApp.
- Provide clickable spots (hotzones) to link your screens and showcase the flow of the solution.
- 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
Carrie Anne the Case Manager
CarrieAnne is an acute user. She is a case manager in a hospital who is juggling multiple patients. For CarrieAnne, 4Next is housed in an iframe within a parent application. CarrieAnne enters the 4Next workflow with her focus on one patient. Her priority is to ensure the best placement for this patient by coordinating with non-acute facilities and supplying necessary information like the patient’s timeline, health insurance, services needed, clinical status, etc.
Goals:
- Ensuring patient satisfaction .
- Communicating with patient and patient’s family.
- Reducing patient length of stay by placing patient efficiently.
- Decreasing patient readmission by finding a good match for their patient.
- Increased access to provider information.
- Consider proximity of patient to care facility.
Alan the Admissions Coordinator
Alan is a non-acute user. He is an admissions coordinator at a hospice facility. Alan user typically accesses 4Next directly from a browser window. His priority is to review all of the patients that are referred to him and determine whether each patient would be a good match for his facility based on criteria mentioned above.
Goals:
- Accept well-matched patients to fill beds in his facility.
- Make sure he has accurate funding and clinical information for each patient.
- Decrease inappropriate referrals to reduce wasted time and effort.
- Have clinical information centralized.
- Consider proximity of patient to care facility.
Note: Other non-acute users may be a coordinators in hospices, homecare providers, medical supply companies, etc.
Judging Criteria
- How intuitive is it for the user to understand the process flow?
- Is it easy for users to identify the status of a case?
- Is the patient information digestible? Are the key pieces of information like clinical status, funding, and level of care properly called out?
- Is it easy for users to send information and find information they have been sent?
- Is the user clearly notified of messages and actions they need to take?
- Have appropriate modern UI patterns been utilized to improve efficiency and clarity?
- 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.