Challenge Summary
Welcome to “VA Memorial App Responsive UI Design Challenge”. In this challenge we are looking to conceptualize the final look and feel of one section of a larger application for the VA (The Department of Veterans Affairs, National Cemetery Administration). The VA Memorial App will serve as a means for families and the public to leave stories, photos, and comments on a veterans profile. We already ran a wireframe challenge where the main concepts and functions have been implemented. You will be focused on creating how this application should look and represent all the data.
Let us know if you have any questions!
1. Home
2. Login/ Signup user Flows
3. Search
4. Veteran Details/ Profile
- 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)
1. Home
2. Login/ Signup user Flows
3. Search
4. Veteran Details/ Profile
5. User Profile
6. Notifications
- 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 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)
Background Overview
The U.S. Dept. of Veterans Affairs (The VA), are developing an application that will allow registered family members and the general public to find deceased veterans that buried at national cemeteries around the United States, and leave stories, photos, comments, memories, etc. to that person's profile. Approved family members or Next of Kins (NOKs) will be allowed to edit and update the person's profile information, included profile image, live events, and additional details about the person. The NOK will act as the "moderator" for the profile.
Things to think about
- We are looking for a nice clean, modern and easy to use experience. Users of all age ranges and skill levels need to be able to easily understand how to use this app.
- This will be a responsive application, even though the initial scope of this challenge is Desktop views, design having mobile first in mind.
- Your design must look 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.
User Personas
1. Next of Kin (option to show this in the user's profile with an icon or some other method)
- Can manage/ edit a veteran profile/ record
- Can provide/ upload photos and edit bio
- Can select a posted photo and mark that as a "profile" image
2. Logged in user (has a username and account)
- Just need to confirm email address
- Can post anonymously, as an option
- Ability to become a Next of Kin. Need to send a request to the admin
3. Admin/ Historian
- Should have visibility into anonymous posts
- Admin privileges across the entire application
Required Screens
1. Home
- Follow the content on Wireframes as reference:
https://marvelapp.com/4b3g03j/screen/36892400
However if you have better ways to represent the information you can propose it, don’t let the wireframe limitate your creativity.
2. Login/ Signup user Flows
- Follow the content on Wireframes as reference:
https://marvelapp.com/4b3g03j/screen/36892398
- Sign Up requires email and password
- Email will need to be verified
- Username: email, and password to login
3. Search
- Follow the content on Wireframes as reference:
https://marvelapp.com/4b3g03j/screen/36892404
- Simple search field with the option to refine and filter further
- Refinement/ filtering: https://marvelapp.com/4b3g03j/screen/36892406
- Branch of service
- Division, squadron, ship (This may not always be available or helpful as an individual person could be apart of several units and the system might have incomplete information.)
- Location served (free text)
- Date of birth
- Date of death
- Burial location
4. Veteran Details/ Profile
- Follow the content on Wireframes as reference:
https://marvelapp.com/4b3g03j/screen/37310050
- Basic bio information will be automatically populated from NGL (National Gravesite Locator)
- Information includes: Name (First, Middle, Last), Branch of Service, Rank, Campaign (war, conflict, etc., if available), Date of Birth, Date of Death, Buried at Location
- Example information can be seen here: https://gravelocator.cem.va.gov/index.html (search a last name)
- Profile picture. NOK can upload or "mark" a previously uploaded photo as the official profile picture
- Posts. Users can make posts and upload photos.
- Open to other ideas, like timelines, cross linking between profiles, etc.
5. User Profile
- Follow the content on Wireframes as reference:
https://marvelapp.com/4b3g03j/screen/37310033
- Profile area for the a registered user
- Email preferences
- General profile information/ update information
- Notification settings
- NOK request
6. Notifications
- NOK approval/ Deny
- Memory posted selected as "NOK view only"
- Open to other notification types that make sense for the application/ user
Post Types
- Any registered user can make a post on any profile. There should be an option for anyone to "mark" a post as inappropriate, similar to Facebook.
1. Memories or Notes
- Stories or short comments
- Potential grief or painful experiences/ stories could be shared (how to handle that)
- Option to only allow a NOK to view? Sort of like a Direct Message
- Open to other ideas
2. Events
- Could this map to a timeline or some visual representation of time that relates to the person's life?
- Ex. Wedding Date, birth, death, date enlisted
3. Photos
- Have in mind that every post must be approved by an admin before being published.
Target Devices
- We are targeting desktop only for this challenge, but there will be a mobile version, so think in responsive UX/ UI flows, features, and best practices.
- Desktop: 1366px width (height adjusting accordingly)
Branding
- Your design must be designed according VA Mobile Branding Requirements.
- 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.
- Try to use the colors from the "Veterans Memorial" section if possible, but don't feel limited by just using 2 colors
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.
Downloads
- You can find the wireframes on the following link:
https://drive.google.com/open?id=1AFxEYF-UuKI4xZ-4uienXCLcGm8HOeeV
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 checkpoint review:1. Home
2. Login/ Signup user Flows
3. Search
4. Veteran Details/ Profile
- 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 for checkpoint review:1. Home
2. Login/ Signup user Flows
3. Search
4. Veteran Details/ Profile
5. User Profile
6. Notifications
- 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 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)
Background Overview
The U.S. Dept. of Veterans Affairs (The VA), are developing an application that will allow registered family members and the general public to find deceased veterans that buried at national cemeteries around the United States, and leave stories, photos, comments, memories, etc. to that person's profile. Approved family members or Next of Kins (NOKs) will be allowed to edit and update the person's profile information, included profile image, live events, and additional details about the person. The NOK will act as the "moderator" for the profile.
Things to think about
- We are looking for a nice clean, modern and easy to use experience. Users of all age ranges and skill levels need to be able to easily understand how to use this app.
- This will be a responsive application, even though the initial scope of this challenge is Desktop views, design having mobile first in mind.
- Your design must look 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.
User Personas
1. Next of Kin (option to show this in the user's profile with an icon or some other method)
- Can manage/ edit a veteran profile/ record
- Can provide/ upload photos and edit bio
- Can select a posted photo and mark that as a "profile" image
2. Logged in user (has a username and account)
- Just need to confirm email address
- Can post anonymously, as an option
- Ability to become a Next of Kin. Need to send a request to the admin
3. Admin/ Historian
- Should have visibility into anonymous posts
- Admin privileges across the entire application
Required Screens
1. Home
- Follow the content on Wireframes as reference:
https://marvelapp.com/4b3g03j/screen/36892400
However if you have better ways to represent the information you can propose it, don’t let the wireframe limitate your creativity.
2. Login/ Signup user Flows
- Follow the content on Wireframes as reference:
https://marvelapp.com/4b3g03j/screen/36892398
- Sign Up requires email and password
- Email will need to be verified
- Username: email, and password to login
3. Search
- Follow the content on Wireframes as reference:
https://marvelapp.com/4b3g03j/screen/36892404
- Simple search field with the option to refine and filter further
- Refinement/ filtering: https://marvelapp.com/4b3g03j/screen/36892406
- Branch of service
- Division, squadron, ship (This may not always be available or helpful as an individual person could be apart of several units and the system might have incomplete information.)
- Location served (free text)
- Date of birth
- Date of death
- Burial location
4. Veteran Details/ Profile
- Follow the content on Wireframes as reference:
https://marvelapp.com/4b3g03j/screen/37310050
- Basic bio information will be automatically populated from NGL (National Gravesite Locator)
- Information includes: Name (First, Middle, Last), Branch of Service, Rank, Campaign (war, conflict, etc., if available), Date of Birth, Date of Death, Buried at Location
- Example information can be seen here: https://gravelocator.cem.va.gov/index.html (search a last name)
- Profile picture. NOK can upload or "mark" a previously uploaded photo as the official profile picture
- Posts. Users can make posts and upload photos.
- Open to other ideas, like timelines, cross linking between profiles, etc.
5. User Profile
- Follow the content on Wireframes as reference:
https://marvelapp.com/4b3g03j/screen/37310033
- Profile area for the a registered user
- Email preferences
- General profile information/ update information
- Notification settings
- NOK request
6. Notifications
- NOK approval/ Deny
- Memory posted selected as "NOK view only"
- Open to other notification types that make sense for the application/ user
Post Types
- Any registered user can make a post on any profile. There should be an option for anyone to "mark" a post as inappropriate, similar to Facebook.
1. Memories or Notes
- Stories or short comments
- Potential grief or painful experiences/ stories could be shared (how to handle that)
- Option to only allow a NOK to view? Sort of like a Direct Message
- Open to other ideas
2. Events
- Could this map to a timeline or some visual representation of time that relates to the person's life?
- Ex. Wedding Date, birth, death, date enlisted
3. Photos
- Have in mind that every post must be approved by an admin before being published.
Target Devices
- We are targeting desktop only for this challenge, but there will be a mobile version, so think in responsive UX/ UI flows, features, and best practices.
- Desktop: 1366px width (height adjusting accordingly)
Branding
- Your design must be designed according VA Mobile Branding Requirements.
- 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.
- Try to use the colors from the "Veterans Memorial" section if possible, but don't feel limited by just using 2 colors
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.
Downloads
- You can find the wireframes on the following link:
https://drive.google.com/open?id=1AFxEYF-UuKI4xZ-4uienXCLcGm8HOeeV
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.