Challenge Summary
Welcome to “Best Practices Mobile App 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 mobile application while designing and conceptualizing the UI/UX. You will be focused on creating how this application should look and feel. You will be focused on designing for both iOS (iPhone) and Android devices on this challenge.
Let us know in forum if you have questions!
- Patient’s Workflow -Mobile App
- 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 Mobile.
- 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).
- Patient’s Workflow -Mobile App
- 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).
This is the 3rd design challenge on this project, we have successfully designed two web portals and now we will focus on improving the mobile application. We are not planning to re-design the complete 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 application must look and feel modern, clean and professional.
- See Branding section for colors and style references.
- Make your design stand out on a first view!
- 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.
- Think Mobile First when designing your UI.
- Work with provided color palette only. Do not reinvent colors! See branding requirements below for reference.
- Have in mind that not all screens are being designed, so new and current (old) screens should still feel on same style and brand.
- Avoid iOS (iPhone) native behaviors/interactions, as this application should also work similar on Android Devices.
- 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).
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 patient, Anna, is using the mobile application away from the dental office, to see the diagnosis of the dentist of all the problems and the recommended solutions with details to treat them. She can also view her recommended homecare procedures and products as well as recommendations to improve oral health and keep track of her recommended frequency to return to the dental office for recare (cleaning).
REQUIRED SCREENS
Patient Workflow (Mobile App)
The patient, Anna, is using the application to see the findings (problems) discovered by his dentist on their appointments and the recommended solutions to these problems, along with homecare instructions to optimize oral health.
1) Dashboard
Once the user logs in, she’ll be taken to the Dashboard page, where she can see the Findings she has and the Homecare recommendations. She has the option to call to the practice, chat or email to get in contact.
- Please refer to the existing screen for reference
- Improve overall presentation
- Densify information, upregulate activity of information to allow more info to be available at each level. Decrease number of levels by displaying more info on each level.
2) Findings
From his dashboard page, Anna can go to findings to see all the problems she has, marked on images of her own teeths. She can select “Bottom Teeth” or “Upper Teeth” and she will select the Upper Teeth to see the findings (problems) on that area.
On this section can be displayed photos like “Close up” and “Panoramic X-Ray”. Have in mind that these photos can be any number and can have any label, so design thinking on this. Your design should be flexible enough.
- Please refer to the following screens for reference: Findings, Parts.
- Improve overall presentation
- Delete the two level nature of this place where the annotated image is presented. The first level of the non-annotated image needing to be clicked to display the annotated image is one click too many. The annotated image should be annotated with useful annotations like Broken tooth, abscessed tooth, Defective filling, etc instead of the numbers 1,2,3, etc as representations of the correct annotations.
3) “Upper Teeth” Assets
On this screen, she will notice that the findings are highlighted to make it easy to visualize. She sees there are 3 problems: on Cavity, Wisdom teeth and she has a Chipped Tooth. She goes to Cavity to get more details.
- Please refer to the existing screen for reference
- Improve overall presentation
- Remove the 1,2,3 representation for Cavity, Wisdom Teeth, and Chipped tooth and replace with the actual label.
4) Asset Selection / Details
This screen will show Anna the different options that she has to choose from as her solution to the finding of Cavity. For example: Shows the filling option, but there are also 2 other options that she could choose which are ‘Crown’ and ‘Extraction’.
Please notice that these other options are not listed on this page but are displayed by left swiping from cavity to crown to extraction.
- Please refer to the existing screen for reference
- Improve overall presentation
- If this action of displaying the solutions for her findings could be completed on the screen above, then please do so.
- Remove the ‘select’ from the functionality
- The details of ‘filling’ in this case has not been described, but the details page of the solution are listed with the group headings that can be exploded to maximize display per page.
5) Homecare
- Improve the user experience
- Improve overall presentation
- Have all data visible in one screen. The data is the status of homecare (circles green, yellow, red).
- Recommended procedures to be performed like toothbrushing, also add detailed information about how to perform the procedure. This section can have photos or videos.
- And finally the list of recommended products to perform the procedure.
6) Recommendations
Recommendations are those general information pieces that are not associated with a picture that is annotated. Things like Tooth Whitening, Sedation dentistry, Biteguard therapy, tooth cleaning, etc.
- Please refer to the existing screen for reference
- Improve overall presentation
7) Procedure Details
On this page, the user will read about what a Dental Cleaning procedure means and how it’s done.
-Please refer to the existing screen for reference
- Improve overall presentation
- The procedure details is grouped into segments. The headers of the segments are listed and can be exploded for easier presentation.
Branding Requirements
- Your design should match the style from the winning design of the previous challenge:
https://drive.google.com/open?id=1LdSkhqq6iCZMsAMhtARqAQ-S1CT58YW2
- Have in mind that we are not replacing all screens and everything should feel (New and current screens) in the same style.
- Font is open to your criteria. Make it elegant, clean and professional
Existing App
- We are providing these screens to be used as your main content reference:
https://drive.google.com/open?id=1Ejti1gqbWgrcuuCwArizYSV2VNxoDjpM
(Remember we are asking to improve these)
Target Device and Size
- Design for iPhone views at 750px width and height adjusted and increased if necessary.
- Design for Android views at 1080px 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.
Let us know in forum if you have questions!
Round 1
Submit your initial designs for checkpoint review.- Patient’s Workflow -Mobile App
- 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 Mobile.
- 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- Patient’s Workflow -Mobile App
- 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).
This is the 3rd design challenge on this project, we have successfully designed two web portals and now we will focus on improving the mobile application. We are not planning to re-design the complete 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 application must look and feel modern, clean and professional.
- See Branding section for colors and style references.
- Make your design stand out on a first view!
- 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.
- Think Mobile First when designing your UI.
- Work with provided color palette only. Do not reinvent colors! See branding requirements below for reference.
- Have in mind that not all screens are being designed, so new and current (old) screens should still feel on same style and brand.
- Avoid iOS (iPhone) native behaviors/interactions, as this application should also work similar on Android Devices.
- 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).
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 patient, Anna, is using the mobile application away from the dental office, to see the diagnosis of the dentist of all the problems and the recommended solutions with details to treat them. She can also view her recommended homecare procedures and products as well as recommendations to improve oral health and keep track of her recommended frequency to return to the dental office for recare (cleaning).
REQUIRED SCREENS
Patient Workflow (Mobile App)
The patient, Anna, is using the application to see the findings (problems) discovered by his dentist on their appointments and the recommended solutions to these problems, along with homecare instructions to optimize oral health.
1) Dashboard
Once the user logs in, she’ll be taken to the Dashboard page, where she can see the Findings she has and the Homecare recommendations. She has the option to call to the practice, chat or email to get in contact.
- Please refer to the existing screen for reference
- Improve overall presentation
- Densify information, upregulate activity of information to allow more info to be available at each level. Decrease number of levels by displaying more info on each level.
2) Findings
From his dashboard page, Anna can go to findings to see all the problems she has, marked on images of her own teeths. She can select “Bottom Teeth” or “Upper Teeth” and she will select the Upper Teeth to see the findings (problems) on that area.
On this section can be displayed photos like “Close up” and “Panoramic X-Ray”. Have in mind that these photos can be any number and can have any label, so design thinking on this. Your design should be flexible enough.
- Please refer to the following screens for reference: Findings, Parts.
- Improve overall presentation
- Delete the two level nature of this place where the annotated image is presented. The first level of the non-annotated image needing to be clicked to display the annotated image is one click too many. The annotated image should be annotated with useful annotations like Broken tooth, abscessed tooth, Defective filling, etc instead of the numbers 1,2,3, etc as representations of the correct annotations.
3) “Upper Teeth” Assets
On this screen, she will notice that the findings are highlighted to make it easy to visualize. She sees there are 3 problems: on Cavity, Wisdom teeth and she has a Chipped Tooth. She goes to Cavity to get more details.
- Please refer to the existing screen for reference
- Improve overall presentation
- Remove the 1,2,3 representation for Cavity, Wisdom Teeth, and Chipped tooth and replace with the actual label.
4) Asset Selection / Details
This screen will show Anna the different options that she has to choose from as her solution to the finding of Cavity. For example: Shows the filling option, but there are also 2 other options that she could choose which are ‘Crown’ and ‘Extraction’.
Please notice that these other options are not listed on this page but are displayed by left swiping from cavity to crown to extraction.
- Please refer to the existing screen for reference
- Improve overall presentation
- If this action of displaying the solutions for her findings could be completed on the screen above, then please do so.
- Remove the ‘select’ from the functionality
- The details of ‘filling’ in this case has not been described, but the details page of the solution are listed with the group headings that can be exploded to maximize display per page.
5) Homecare
- Improve the user experience
- Improve overall presentation
- Have all data visible in one screen. The data is the status of homecare (circles green, yellow, red).
- Recommended procedures to be performed like toothbrushing, also add detailed information about how to perform the procedure. This section can have photos or videos.
- And finally the list of recommended products to perform the procedure.
6) Recommendations
Recommendations are those general information pieces that are not associated with a picture that is annotated. Things like Tooth Whitening, Sedation dentistry, Biteguard therapy, tooth cleaning, etc.
- Please refer to the existing screen for reference
- Improve overall presentation
7) Procedure Details
On this page, the user will read about what a Dental Cleaning procedure means and how it’s done.
-Please refer to the existing screen for reference
- Improve overall presentation
- The procedure details is grouped into segments. The headers of the segments are listed and can be exploded for easier presentation.
Branding Requirements
- Your design should match the style from the winning design of the previous challenge:
https://drive.google.com/open?id=1LdSkhqq6iCZMsAMhtARqAQ-S1CT58YW2
- Have in mind that we are not replacing all screens and everything should feel (New and current screens) in the same style.
- Font is open to your criteria. Make it elegant, clean and professional
Existing App
- We are providing these screens to be used as your main content reference:
https://drive.google.com/open?id=1Ejti1gqbWgrcuuCwArizYSV2VNxoDjpM
(Remember we are asking to improve these)
Target Device and Size
- Design for iPhone views at 750px width and height adjusted and increased if necessary.
- Design for Android views at 1080px 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.