BONUS: 5‌ CHECKPOINTS AWARDED WORTH ‌$100‌ EACH

Register
Submit a solution
The challenge is finished.

Challenge Summary

Welcome to “Best Practices Web Admin Portal UI Design Challenge”.  In this challenge we are looking for your creativity to design and conceptualize the UI/UX for a Web Application Admin Portal of a large Dental Care Company. You will be focused on creating how this application should look and feel.

Let us know in forum if you have questions!

Round 1

Submit your initial designs for checkpoint review.
1) Login
2) Dashboard
3) Practices Detail
4) Practice Settings
4.1) Practice Deleted

- 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 Web.
- 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) Practice Detail
4) Practice Settings
4.1) Practice Deleted
5) Practice Admins
5.1) Practice Admins List
5.2) Practice Admin Detail
5.3) Add New Admin
6) Add New Practice

- 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
Recently we just finished the first challenge which was focused on Dentist Workflow for a web application, we would like to implement some of the overall styles from the winning design on this brand new admin portal.

This application will be used by the owners of the Best Practice brand, as they would like to sell their previous designed application to other practices (dental offices) so they can use it for their own patients.

For better understanding of the objectives on this challenge we are providing a very simple wireframe to guide you through the overall workflow of this admin portal; however you are encourage to improve and propose for the best layouts and interactions.

Very excited to see your design for this challenge!

Key Items to Focus on
- This application must look and feel modern, clean and professional.
- Simplicity should be your goal
- See Branding section for colors and style references.
- 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.
- Work with provided color palette only. Do not reinvent colors! See branding requirements below for reference.

REQUIRED SCREENS
1) Login

- For content reference check the following link: https://marvelapp.com/39ggabd/screen/50783833
- Regular login features are requested here:
  • Email
  • Password
  • Remember me
- Do not add any social media connection. This is an internal tool.
- Show how the error messages should look and work.
- Do not copy exactly the same login design from previous challenge, however make them look on similar look and feel; so both applications are part of the same company.

2) Dashboard
- Once user successfully logins they need to be able to quickly access all the features of this admin portal.
- A key requirement for this challenge are the “Practice Statistics”. You need to provide high level stats charts with the following data:
  • Number of files
  • Number of Activation Emails Set
  • Number of Activations
  • Number of Uses (files opened) per week
  • Number of Deactivated
  • Number of Printed Packages
  • Date of last activity
  • Number of Assets (Procedure, Product, Finding, Solution)
  • Recently added Asset (date and rate)
  • Asset list
- This screen will contain a list for all previous dental practices previously created. Those practices will have two states: “Active” and “Inactive”.
- For content reference check the following link: https://marvelapp.com/39ggabd/screen/50783840
- We need a way to quickly search and find a dental practice. Think on advance filters by location and other relevant statistics.
- User should be able to create or “add new practices” from this screen.

3) Practice Detail
- User can click on any dental practices (“Active” or “Inactive”) from previous screen to see and edit it individually.
- For content reference check the following link: https://marvelapp.com/39ggabd/screen/50783839
- Each practice might have:
  • Practice Name
  • Responsible Dentist(s): Ability to add one dentist name and then a button to add another dentist
  • Address
  • Logo
  • URL
  • Status: “Active” or “Inactive”
4) Practice Settings
- User should be able to “Permanently Delete” any “Active” or “Inactive” practice.
- For content reference check the following link: https://marvelapp.com/39ggabd/screen/50783834
- Think on the best UX for this feature. A confirmation prompt is needed Just a single click to delete a practice.

4.1) Practice Deleted
- Thinks this as a “Trash Bin” page. This is the page where every recently deleted practices will be storage.

5) Practice Admins
5.1) Practice Admins List

- User must be able to see all the admins assigned to a dental practice and “Add New Admins” from this screen.
- For content reference check the following link: https://marvelapp.com/39ggabd/screen/50783838
- We need a function to save practice data to a file. This can be done by adding an “actions” column on each row.

5.2) Practice Admin Detail
- User is able to see the details of selected admin
- For content reference check the following link: https://marvelapp.com/39ggabd/screen/50783838
- An admin will have the following information:
  • First Name
  • Last Name
  • Email
  • Website url
5.3) Add New Admin
- For content reference check the following link: https://marvelapp.com/39ggabd/screen/50783838
- User should be able to add a new admin by filling the following fields:
  • First Name
  • Last Name
  • Email
  • Website url

6) Add New Practice
- For content reference check the following link: https://marvelapp.com/39ggabd/screen/50783841
- User should be able to create a new “Practice” by adding information to the following fields:
  • Practice Name
  • Address
  • URL
  • Status: “Active” or “Inactive”
- They way how you treat this screen is up to you, i.e: Modal view, single screen, etc.

Branding Requirements
- Use the same colors of the winning design from previous challenge. Do not reinvent the colors.
- Font is open to your criteria. Make it elegant, clean and professional

Wireframes
- Admin Portal Wireframes:
https://marvelapp.com/39ggabd/

Branding
- New styles to have as reference. This is the winning submission from previous challenge, we encourage to use the same styles and layout as much as possible.
https://drive.google.com/open?id=1Sr5U9LQ75RLf8GwK5K7Tp_xM8aA0hnLh

- Use the “Best Practices” logo from this folder:
https://drive.google.com/open?id=1oxPHtBDiG-_4oiSOwgMpdoEZayBgyLnN

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

Target Users
- Owners are the primary users and dentists 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.

ELIGIBLE EVENTS:

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 "Submission.zip" file.
  3. Place all of your source files into a "Source.zip" 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.

Screening:

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
  • EPS files created in Adobe Illustrator or similar
  • Sketch

You must include all source files with your submission.

Submission limit

5 submissions

ID: 30089047