Submit a solution
The challenge is finished.

Challenge Summary

Welcome to “Best Practices Admin Web Application UI Design Challenge”.  In this challenge we are looking for your creativity to improve and update a selected group of key screens from an existing web application while designing and conceptualizing the UI/UX. You will be focused on creating how this application should look and feel. Even when this is a real web application on use right now, we are not looking for a re-branding or new theme, the key on this challenge is to improve significatively the overall user experience.

Let us know in forum if you have questions!

Round 1

Submit your initial designs for checkpoint review.
1) Login
2) Dashboard
3) Findings
4) Homecare

- Important: As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for a MarvelApp prototype link. You will receive 1 MarvelApp prototype for Desktop.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

Round 2

Submit your final designs plus checkpoint feedback implemented
1) Login
2) Dashboard
3) Findings
4) Homecare
5) History of Communication
6) Printed Page
7) Communication email
8) Notifications

- Important: As part of your final submission, you must update your submission to MarvelApp.     
- Use the same MarvelApp prototype you received in checkpoint.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Background Information
Success in dentistry is all about case acceptance: patients agreeing to have the dentistry that the dentist has presented done.  This is an application designed to effectively communicate diagnosis and treatment options from dental office to patient, as well as to promote good homecare practices to maintain oral health.

This is a communication app, there is a web app component that administers input data from the dental office to the mobile app that the patient uses.

This Web app has 2 functionalities:
Data Input: Photos, x-rays, annotations on pictures to display dentist’s findings, recommendations for solutions to findings, recommendations for homecare and recall interval frequency as well as general oral health recommendations.
Display of the data input in a patient facing display optimized format.  

We are not planning to re-design the complete web application, you will focus only on improving the UX on some key areas detailed on this challenge requirements and do a facelift of the UI.

Very excited to see your design for this challenge!

Key Items to Focus on
- Provide new and better icons for overall application. Should be provided in shape/vector format.
- This web application must look and feel modern, clean and professional.
- Make your design stand out on a first view!
- Focus on general navigation between all required screens and functionalities
- Easy and intuitive use for tech and non tech users.
- Please use only vector elements. We will ask to update this design to other devices on a follow up challenge.
- Target desktop web devices with a minimum resolution of 1280px width and height can be increased if needed.
- Work with provided color palette only. Do not reinvent colors! See branding requirements below for reference.
- For better understanding we are providing the existing screens to this challenge. Use them as your main reference. Do not copy everything exactly. Think on better ways to organize and distribute the information. This is the key to success on this challenge.

User Story
John is a dentist working in a dental practice.  He is using the application to mark his findings (the problems he discovers in the patient’s mouth eg cavities, crooked teeth, broken tooth, cosmetic concern, etc) easily into a display format to show the patient during the appointment.  

The findings are presented in visual format attached to photos from the patient’s actual mouth.  This creates ownership of the problem (finding).  The findings are presented in a format to satisfy informed consent for the finding (what was found, what solutions are available for it, what caused it as well as what the consequences are of doing nothing about it).  

There is an online library for the dentist to reference to create the asset library that dentist wants to use to support his practice.

Solutions are presented (filling, crown, braces, tooth extraction) and detailed information is available to be viewed by the patient if desired.  

A detailed print copy is provided to the patient of the findings and solutions appropriate to them.
The dentist also assesses the homecare status of the patient.

A 3 color circle rating system is used  just like when you take your vehicle in for inspection and maintenance.  Green (good), yellow (borderline) and Red (needs attention).

The dentist makes recommendations to improve homecare by altering the homecare procedures performed (tooth brushing, flossing, mouthrinse, anti-cavity program, etc) as well as products to use.

The recommendations are rich with detail if such detail is sought by the patient, otherwise if detail is not desired, the recommendations stand as clearly presented.

The dentist administers this information by inputting it into the web-app.

The web-app is used as a patient facing display to inform the patient of the data collected and how it relates to them.

This is the presentation display steps happening during an appointment.
  1. Display Findings of the Patient (the groups of 3 circles of the different categories, ranked by severity) and update those in current meeting
  2. Show Homecare summary from last Hygiene appointment (minus recommendations)
  3. The dentist(admin) will enter data for and recommendations for the homecare
  4. Display Summary from this appointment

Please visit the following link which have a video with a real time demo of the current web application:

1) Login

- User login with his credentials.
- Regular Login and recovery features are required.

2) Dashboard (Patients)
01 Dashboard.jpg

- Overall: we’d like to make this page cleaner
- Navigation:The menu can display only Patients and Settings, all the other navigation items can go under Settings: HC Procedures, HC Products, Findings, Procedures, Additional Resources because they will be used more for administrative functions. Feel free to improve the navigation as you see fit.
- Rename “Procedures” to “Solutions”
- Keep the logo and the logged in user as “Mike Hansford”, but remove the “You login as”
- You can also remove the location, email and phone number
- In the patient list, display the 2 sets of 3 circles for each homecare and findings to this layer for each patient.

3) Findings
01 Findings.jpg
-This is the library where the dentist can see the existing findings and add a new one
-We would like to improve the look and feel of this page
-The organization of the findings can be improved to show different categories as folders (The folders may be titled things such as 'tooth problems', 'gum problems', 'cosmetic concerns', 'medical issues' and have 1 or more findings in it). This way the items would be organized in a hierarchy and would be easier to find.
- The user should be able to create a new folder and name it as well as move any findings in it.

02 Patient Findings.jpg
-On this page, the dentist can add different problems he discovers for the patient during the appointment (eg cavities, crooked teeth, broken tooth) and rate by severity (green, yellow, red). At first, the user will upload an image of the patient’s mouth, then add annotation for it and select a procedure/solution. Default solutions will be pre-populated for each finding.  These default solutions can be added to or deleted as required.
-This page also represents a preview of how the patient will see the data on mobile (findings summary)
-We would like to improve the look and feel of this page
-Particularly the display should be optimized for patient facing screen.

03 Patient Finding Create Annotation.jpg
-Once the user has diagnosed an issue, he will have to annotate the image (select a finding from the list, or add a new finding to the list that is not currently on it, or select a finding from the web resource library to add to the list of findings)
- The Findings list displayed here should carry the same level of organization as the Findings screen
- Change user experience to allow copy-paste of tags (for example, when creating a new asset, the user has the ability to copy an existing asset and then edit it to satisfy the new asset requirement. This is for all assets including Findings. Here’s how editing of an asset is done.)
- Note: the tags that show in the pointed image in that list, are the ones from the Findings Library defined on 01 Findings.jpg

 04 Patient Finding Add Procedure.jpg
-Now the user has annotated, a finding and he will press the Add Procedure link to add one solution from the predefined ones (asset list). The annotated finding will pre-populate a selection of default procedures that can be added to/deleted as desired.
-We’d like to improve it this part with the following:
  -- Change user experience to allow copy-paste (for example, when creating a new asset, the user has the ability to copy an existing asset and then edit it to satisfy the new asset requirement. This is for all assets including Findings. Here’s how editing of an asset is done.)
  -- Higher level of tags organization, similar to Findings screen
  -- Allow backup of assets
  -- Allow assets to be re-ordered with drag & drop or by dropdown menu (alphabet, date)
  -- Enable default procedures to go with findings
  -- Be able to add an asset when choosing from the asset list
  -- Add a community share function (import/export)

4) Homecare
01 Homecare.jpg
-This is the summary the patient is viewing for the recommended procedures and products, as well for the recommended frequency to return to dental office for care. From this page, the admin can also add other homecare procedures
-We’d like to improve how this page looks
-The Patient Statistics can be collapsed and you can see on 02 Homecare Patient Stats Collapsed.jpg, how it looks
- History section: will include the information from previous visits with all related data. Now we’d like to see that displayed in a tabular format. Each history entry will have the following fields: Date of the appt, User (who entered the data), Recommended Frequency, Actual Frequency, Current Home Care Procedures, Note, Summary circle, Recommended Procedures, Next Frequency, AAP classification with modifier text, Note. This screen shows a patient with 2 previous visits (not all fields mentioned above are present here, but for our current design, please include them all).
- There is the need to have a display format for the Homecare section that is patient facing.

The user flow experience is:
  1. Summary from last Hygiene appointment (minus recommendations)
  2. Admin will add Data
  3. Display Summary from this appointment
1.Summary from last Hygiene appointment (minus recommendations) will show:
-The three circles (status indicator) from last appt Homecare Summary
-Faded off in the background is the AAP type classification either AAP1, AAP2, AAP3, AAP4 with modifier text HgA1c >7 or smoker >10 per day
-Next Cleaning:    due Dec 2019 (green) , Overdue 5 months (red)

2. Admin will add Data:
For each new entry the dentist will add: a summary circles of their clinical statue, recommended homecare procedures and products, AAP type classification with modifier, recommended frequency to return, and a note.

3. Display Summary from this appointment will show:
-The three circles (status indicator) from this appt Homecare Summary
- Faded off in the background is the AAP type classification either AAP1, AAP2, AAP3, AAP4 with modifier text HgA1c >7 or smoker >10 per day
- Next Cleaning    due Dec 2019 (green)
- Recommended Homecare Procedures and products (possibly as well as current Homecare Procedures and Products)
- Note

03 Homecare Add Procedure.jpg
-On this page, the recommended procedure is selected and the associated default products - see below
-Think about improving this page in a similar way like when adding procedures to the findings
-The procedures can be added from the existing library, added as a new procedure or selected from the online shared library
04 Homecare Add Product.jpg
- For each procedure, the dentist can recommend a particular product to his patient and on this page he can see the available options
- We’d like to enable default products to go with procedures
- The products can be added from the existing library, added as a new product or selected from the online shared library
-How can we improve the product selection even more?

05 Homecare Procedure Frequency.jpg
-Here, the user will select how often should the patient perform the recommended procedure
- Every procedure should default to a predefined schedule that can be changed if needed.
-We’d like to improve the selection a schedule to make it more simple
- Reference the screen flow here.

5) History of Communication
- View history of communication with patient (Datapoint that contains date and message sent) (This point should go under 06 Notifications)
- Block patient after a time has passed.  (This point should go under 06 Notifications)

- This section is a submodule of “Homecare”. Please refer to this link to see where is located. (see note under 01 Homecare.jpg)

- The following example has history of 2 appointments with the data from each appointment. Have in mind that this data is not in tabular format as desired.

6) Printed Page
- Improve visual output of findings & recommendations
- Reference the screen flow here.

7) Communication Email
- This is the email a patient receives when the "Send" button is clicked on their Main Info on Patient screen.
- This email contains a link to set their password as well as links to download the app on their device.
- See Email Activation screenshot here as your content reference. Keep it simple and also in brand!
- Remember that this is the email display, so keep show the design within 600px width content
- Allow admins to edit the content using a WYSIWYG editor

8) Notifications
- Add customizable notifications for upcoming appointments, outstanding treatment and overdue homecare appointment frequency (this is what is stored in above history of communication). Notifications (frequency and content) are based upon severity of finding and time and will be set by default in code.
- The way notifications are working is next:
   A) The Notification is sent after the time for the next assessment has passed. This notification is sent at 1 month after, then 3 months after, then 6 months after (these time intervals are editable and so is the number of time intervals that trigger a notification).
   B) The Notification at each time interval (above in a) is sent at a certain frequency (everyday, every 3 days, every week, etc)
   C) The Notifications are repeated a number of times (1 time, 2 times, 3 times, 5 times, etc).
-Notifications will also be sent for unaddressed Findings using a similar logic as above

Branding Requirements
- Use the same colors from the existing screens. Do not reinvent the colors.
- Font is open to your criteria. Make it elegant, clean and professional

Existing Web App
- We are providing these screens to be used as your main content reference, but the screens not mentioned above are not required to be designed:
(Remember we are asking to improve these)

Target Device and Size
- Web Standard: 1280px width and height adjusted and increased if necessary.

Target Users
- Dentists are the primary users and their patients are the secondary users.

Judging Criteria
- User Experience of the application
- Completeness and accuracy of your UI Design
- How well your design provide a consistent user flow
- How clean and modern your design is

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.
- Submit Marvel App for your design.

Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop, Illustrator, Sketch or XD.

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.

Stock Photography
Stock photography is allowed in this challenge. See this page for more details.

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.

How To Submit

  • New to Studio? ‌Learn how to compete here
  • Upload your submission in three parts (Learn more here). Your design should be finalized and should contain only a single design concept (do not include multiple designs in a single submission).
  • If your submission wins, your source files must be correct and “Final Fixes” (if applicable) must be completed before payment can be released.
  • You may submit as many times as you'd like during the submission phase, but only the number of files listed above in the Submission Limit that you rank the highest will be considered. You can change the order of your submissions at any time during the submission phase. If you make revisions to your design, please delete submissions you are replacing.

Winner Selection

Submissions are viewable to the client as they are entered into the challenge. Winners are selected by the client and are chosen solely at the client's discretion.


Topcoder Open 2019

Challenge links

Screening Scorecard

Submission format

Your Design Files:

  1. Look for instructions in this challenge regarding what files to provide.
  2. Place your submission files into a "" file.
  3. Place all of your source files into a "" file.
  4. Declare your fonts, stock photos, and icons in a "Declaration.txt" file.
  5. Create a JPG preview file.
  6. Place the 4 files you just created into a single zip file. This will be what you upload.

Trouble formatting your submission or want to learn more? ‌Read the FAQ.

Fonts, Stock Photos, and Icons:

All fonts, stock photos, and icons within your design must be declared when you submit. DO NOT include any 3rd party files in your submission or source files. Read about the policy.


All submissions are screened for eligibility before the challenge holder picks winners. Don't let your hard work go to waste. Learn more about how to  pass screening.

Challenge links

Questions? ‌Ask in the Challenge Discussion Forums.

Source files

  • Layered PSD files created in Adobe Photoshop or similar
  • AI files created in Adobe Illustrator or similar
  • Sketch

You must include all source files with your submission.

Submission limit

5 submissions

ID: 30083527