Challenge Summary
Welcome to “VA Kidney Nutrition Mobile App UI Design Challenge”. In this challenge, we are looking to conceptualize the UI for a native mobile application that patients and caregivers can use to make smart nutrition decisions informed by their own laboratory/biometric data and personal goals. You will be focused on creating how this application should look and represent the all the data.
Let us know if you have any questions!
1) Login
2) Home / Dashboard
3) User profile
4) Intake and Activity Tracking
- 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).
1) Login
2) Home / Dashboard
3) User profile
4) Intake and Activity Tracking
5) User History/Trend metrics
6) User Incentives
7) Nutrition Recommendations & Drug Interactions
8) Patient Resources
- Important: As part of your final 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)
Patients and their caregivers experience multiple challenges managing kidney disease. Treatment can change over time as the disease progresses, including fundamental nutritional requirements. Online nutrition tools exist but do not meet their specific needs. The VA Kidney Nutrition Mobile App UI Design Challenge aims to address these needs through the development of a mobile application that patients and caregivers can use to make smart nutrition decisions informed by their own laboratory/biometric data and personal goals.
We already run a wireframe challenge were the architects visualized how this application should work. You will be working using the winning submission as your main reference but is up to you to explore new concepts and propose the best approach on how this application should look and work.
Things to think about
- We are looking for a nice clean, modern and easy experience. A user needs to be able to easily understand how to use this app.
- This will be an iOS and Android native application. For this challenge you will focus on creating the experiences just for iphone 6/7/8.
- You can propose native interactions and functionalities.
- Your design must work and feel on brand. So work and use the color palette only. Do not reinvent colors. (See branding section on this requirements page for reference)
- Use the wireframes as your main reference, but if you have better solutions and concepts, use them.
- Keep things consistent. This means all graphic styles should work together.
Required Screens/Functionalities
1- Login
- Create a simple login that allows users access the application.
- Use common login features: email, password, remember, forgot password.
- Do not use social media login on this application.
- Show how the error messages/alerts should work.
- All users must agree to a Terms of Service/Liability Release prior to launching the app for the first time. Important
2- Home / Dashboard
- When users access this application they need to see a summary information related to User History/Trend metrics, Incentives and goals.
- Main Navigation to all required screens and functionalities.
- Global search that allows to search for Nutrition Recommendations & Drug Interactions and Patient Resources.
3- User profile
User will input profile data and each profile should include the following:
- Age
- Height
- Current weight: Daily for all and pre/post dialysis and daily values for those in ESRD and on dialysis. On Dialysis Days, there must be a way to record 2 weights (pre/post dialysis). They won’t enter their weight every day, perhaps, but they should be ABLE to enter it daily or >1 times/day.
- Disease category (early stage CKD, ESRD and change in kidney function over time)
- Presence or absence of diabetes and diabetic diet goals
- Lab values: eGFR, blood sugar, albumin, potassium, phosphorus, hemoglobin A1C,
- PTH, calcium, bicarbonate (CO2), uric acid, vitamin D
- The units of measurement for each will be automatically listed next to the item.
- Blood pressure
- Medications
- Goals: Users will be able to create and track goals. For example: Lose weight/input
desired weight, eat more add at least 2 cups of fresh fruits and vegetables to their existing diets daily if their remaining kidney function is sufficient to avoid hyperkalemia from the added potassium load , improve the lab levels, drink xx ounces of water/day.
- The App shall permit users to personalize profiles with an avatar.
4- User History/Trend metrics
App will have data calculators/trackers monitor and display past and current values for the
following data input by the user:
- Labs: eGFR, Albumin, phosphorus, potassium, bicarbonate (CO2), uric acid, A1c.
- Dietary and fluid inputs: grams of protein, milligrams of potassium, sodium, phosphorus, milliliters or ounces of fluids
- Body weight pounds or kilograms
- Blood pressure
5- Intake and Activity Tracking
App shall permit dietary and fluid intake tracking.
- For daily dietary intake the user will list the foods and fluids they have consumed throughout the day. Patients with kidney disease track fluid intake (fluid is anything that is liquid at room temperature. For example, ice cream, Jello, pudding, milk, juice, etc.)
- Search interface shall include an auto-populate feature that dynamically incorporates matches as the user is typing
App shall include a feature that permits users to include photos of food
- The user can take photos of their meals and the app will store the photos according to time/date and type of meal (breakfast, lunch, dinner) to allow for dietary recall
- This will serve as a daily consumption food journal feature
- App shall include an activity tracking component that includes user inputs as well as syncing of biometric data from devices such as a Fitbit and the Apple Watch.
6- User Incentives
The App shall employ a fun and positive gamification incentive approach to promote personal goal-setting and achievements. The gamification, goal-setting and reward structure will be tailored to the user’s disease category (early stage CKD, CKD, ESRD) allowable limits/requirements (see Table 1 in Attachment 1: Kidney Challenge Worksheet).
The features shall include (but not be limited to):
- Personal goal setting and prioritization
- Reward structure for specific achievements (for example: goal progress in lowering blood pressure or reducing body weight)
- The following data will be part of the gamification feature (please reference tables 1, 2 in Attachment 1: Kidney Challenge Worksheet for more info on tracking levels, also note Attachment 2 for examples of reports typically provided for patients to track progress):
- Labs: eGFR, albumin, phosphorus, potassium, bicarbonate (CO2), uric acid, A1c
- Dietary and fluid inputs: grams of protein, milligrams of potassium, sodium, phosphorus
7- Nutrition Recommendations & Drug Interactions
The app shall recommend food items based on individual lab inputs and disease stage, alert the user to unsafe levels of nutrient content, provide food and drug interaction warnings, suggest food substitutions, and input this information into individualized decision matrices based on individual labs, goals, and preferences (see Table 2 in Attachment 1 Kidney Challenge Worksheet). Also included in attachments as a reference, a monthly report card provided as an educational tool for updating patients on current labs and recommended foods.
The app shall notify users of nutrient intake precautions they should take with certain drug interactions. Medications and interactions are listed in Table 3 of the Attachment 1 Kidney Challenge Worksheet.
8- Patient Resources
The App shall include an information section with links to educational web content on kidney nutrition, a description of safe lab ranges for CKD patients, and tutorials on reading food labels, “kidney safe” recipes, and gardening. Examples for educational content locations include eKidney Clinic, Kidney SchoolTM, and the National Institute of Diabetes and Digestive and Kidney Diseases (NIDDK) education program.
Compliance
UI shall be 508 compliant. For details on 508 compliance requirements visit https://mobile.va.gov/content/my-app-section-508-compliant
App Name
- For this application name you can use: VA Nutrition App.
- We are not asking to design a logo for this application. So do not lose time on this. Use a placeholder or the name above.
Branding
- Your design must be designed according VA Mobile Branding Requirements. Important, if you design do not match these styles it won’t be presented to customer.
- For more reference about branding: https://mobile.va.gov/content/va-mobile-branding-requirements-resources
- If you don’t have the fonts from the branding document, you can use Open Sans as your main font. We might require to replace them on final fices.
Softwares and Stocks Icons
- You can design your artwork using Adobe Photoshop / Illustrator or Sketch
- You can use stocks icons from icon8 and flaticon. Remember to declare them.
Screen Sizes:
- This will be an native iOS and Android application. For this challenge you will be focused on working for latest iphones devices:
Design for iPhone 6/7/8: 750px by 1334px width.
Height can be increased if needed.
Downloads
- You can find the wireframes on the following link.
https://drive.google.com/open?id=1clFFaxdlksPn-FJTeCwB0uNGNjAC6Gsb
Target Audience:
- The application will be used by patients and caregivers from The Department of Veterans Affairs.
Judging Criteria:
- How well you plan the interactive experience and capture your ideas and experience visually.
- Overall design, UI and user experience.
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 Desktop PNG/JPG Screens. PSD source files
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as a layered PSD file, Adobe Illustrator as a layered AI file or Sketch.
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.
Let us know if you have any questions!
Round 1
Submit your initial designs for a checkpoint feedback:1) Login
2) Home / Dashboard
3) User profile
4) Intake and Activity Tracking
- 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:1) Login
2) Home / Dashboard
3) User profile
4) Intake and Activity Tracking
5) User History/Trend metrics
6) User Incentives
7) Nutrition Recommendations & Drug Interactions
8) Patient Resources
- Important: As part of your final 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)
Patients and their caregivers experience multiple challenges managing kidney disease. Treatment can change over time as the disease progresses, including fundamental nutritional requirements. Online nutrition tools exist but do not meet their specific needs. The VA Kidney Nutrition Mobile App UI Design Challenge aims to address these needs through the development of a mobile application that patients and caregivers can use to make smart nutrition decisions informed by their own laboratory/biometric data and personal goals.
We already run a wireframe challenge were the architects visualized how this application should work. You will be working using the winning submission as your main reference but is up to you to explore new concepts and propose the best approach on how this application should look and work.
Things to think about
- We are looking for a nice clean, modern and easy experience. A user needs to be able to easily understand how to use this app.
- This will be an iOS and Android native application. For this challenge you will focus on creating the experiences just for iphone 6/7/8.
- You can propose native interactions and functionalities.
- Your design must work and feel on brand. So work and use the color palette only. Do not reinvent colors. (See branding section on this requirements page for reference)
- Use the wireframes as your main reference, but if you have better solutions and concepts, use them.
- Keep things consistent. This means all graphic styles should work together.
Required Screens/Functionalities
1- Login
- Create a simple login that allows users access the application.
- Use common login features: email, password, remember, forgot password.
- Do not use social media login on this application.
- Show how the error messages/alerts should work.
- All users must agree to a Terms of Service/Liability Release prior to launching the app for the first time. Important
2- Home / Dashboard
- When users access this application they need to see a summary information related to User History/Trend metrics, Incentives and goals.
- Main Navigation to all required screens and functionalities.
- Global search that allows to search for Nutrition Recommendations & Drug Interactions and Patient Resources.
3- User profile
User will input profile data and each profile should include the following:
- Age
- Height
- Current weight: Daily for all and pre/post dialysis and daily values for those in ESRD and on dialysis. On Dialysis Days, there must be a way to record 2 weights (pre/post dialysis). They won’t enter their weight every day, perhaps, but they should be ABLE to enter it daily or >1 times/day.
- Disease category (early stage CKD, ESRD and change in kidney function over time)
- Presence or absence of diabetes and diabetic diet goals
- Lab values: eGFR, blood sugar, albumin, potassium, phosphorus, hemoglobin A1C,
- PTH, calcium, bicarbonate (CO2), uric acid, vitamin D
- The units of measurement for each will be automatically listed next to the item.
- Blood pressure
- Medications
- Goals: Users will be able to create and track goals. For example: Lose weight/input
desired weight, eat more add at least 2 cups of fresh fruits and vegetables to their existing diets daily if their remaining kidney function is sufficient to avoid hyperkalemia from the added potassium load , improve the lab levels, drink xx ounces of water/day.
- The App shall permit users to personalize profiles with an avatar.
4- User History/Trend metrics
App will have data calculators/trackers monitor and display past and current values for the
following data input by the user:
- Labs: eGFR, Albumin, phosphorus, potassium, bicarbonate (CO2), uric acid, A1c.
- Dietary and fluid inputs: grams of protein, milligrams of potassium, sodium, phosphorus, milliliters or ounces of fluids
- Body weight pounds or kilograms
- Blood pressure
5- Intake and Activity Tracking
App shall permit dietary and fluid intake tracking.
- For daily dietary intake the user will list the foods and fluids they have consumed throughout the day. Patients with kidney disease track fluid intake (fluid is anything that is liquid at room temperature. For example, ice cream, Jello, pudding, milk, juice, etc.)
- Search interface shall include an auto-populate feature that dynamically incorporates matches as the user is typing
App shall include a feature that permits users to include photos of food
- The user can take photos of their meals and the app will store the photos according to time/date and type of meal (breakfast, lunch, dinner) to allow for dietary recall
- This will serve as a daily consumption food journal feature
- App shall include an activity tracking component that includes user inputs as well as syncing of biometric data from devices such as a Fitbit and the Apple Watch.
6- User Incentives
The App shall employ a fun and positive gamification incentive approach to promote personal goal-setting and achievements. The gamification, goal-setting and reward structure will be tailored to the user’s disease category (early stage CKD, CKD, ESRD) allowable limits/requirements (see Table 1 in Attachment 1: Kidney Challenge Worksheet).
The features shall include (but not be limited to):
- Personal goal setting and prioritization
- Reward structure for specific achievements (for example: goal progress in lowering blood pressure or reducing body weight)
- The following data will be part of the gamification feature (please reference tables 1, 2 in Attachment 1: Kidney Challenge Worksheet for more info on tracking levels, also note Attachment 2 for examples of reports typically provided for patients to track progress):
- Labs: eGFR, albumin, phosphorus, potassium, bicarbonate (CO2), uric acid, A1c
- Dietary and fluid inputs: grams of protein, milligrams of potassium, sodium, phosphorus
7- Nutrition Recommendations & Drug Interactions
The app shall recommend food items based on individual lab inputs and disease stage, alert the user to unsafe levels of nutrient content, provide food and drug interaction warnings, suggest food substitutions, and input this information into individualized decision matrices based on individual labs, goals, and preferences (see Table 2 in Attachment 1 Kidney Challenge Worksheet). Also included in attachments as a reference, a monthly report card provided as an educational tool for updating patients on current labs and recommended foods.
The app shall notify users of nutrient intake precautions they should take with certain drug interactions. Medications and interactions are listed in Table 3 of the Attachment 1 Kidney Challenge Worksheet.
8- Patient Resources
The App shall include an information section with links to educational web content on kidney nutrition, a description of safe lab ranges for CKD patients, and tutorials on reading food labels, “kidney safe” recipes, and gardening. Examples for educational content locations include eKidney Clinic, Kidney SchoolTM, and the National Institute of Diabetes and Digestive and Kidney Diseases (NIDDK) education program.
Compliance
UI shall be 508 compliant. For details on 508 compliance requirements visit https://mobile.va.gov/content/my-app-section-508-compliant
App Name
- For this application name you can use: VA Nutrition App.
- We are not asking to design a logo for this application. So do not lose time on this. Use a placeholder or the name above.
Branding
- Your design must be designed according VA Mobile Branding Requirements. Important, if you design do not match these styles it won’t be presented to customer.
- For more reference about branding: https://mobile.va.gov/content/va-mobile-branding-requirements-resources
- If you don’t have the fonts from the branding document, you can use Open Sans as your main font. We might require to replace them on final fices.
Softwares and Stocks Icons
- You can design your artwork using Adobe Photoshop / Illustrator or Sketch
- You can use stocks icons from icon8 and flaticon. Remember to declare them.
Screen Sizes:
- This will be an native iOS and Android application. For this challenge you will be focused on working for latest iphones devices:
Design for iPhone 6/7/8: 750px by 1334px width.
Height can be increased if needed.
Downloads
- You can find the wireframes on the following link.
https://drive.google.com/open?id=1clFFaxdlksPn-FJTeCwB0uNGNjAC6Gsb
Target Audience:
- The application will be used by patients and caregivers from The Department of Veterans Affairs.
Judging Criteria:
- How well you plan the interactive experience and capture your ideas and experience visually.
- Overall design, UI and user experience.
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 Desktop PNG/JPG Screens. PSD source files
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as a layered PSD file, Adobe Illustrator as a layered AI file or Sketch.
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.