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!
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)
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:
- 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:
- 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:
- 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:
- 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:
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:
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.
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 implemented1) 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:
- Password
- Remember me
- 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
- 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”
- 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
- Website url
- 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
- 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”
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.