Challenge Summary
Welcome to the Ancestral Genome Lens App Design Challenge
For this challenge we need your help to design the initial screens of what this Ancestral Genome Lens App application will look like and how it will function. The overall experience should look professional, sleek and modern. Should be easy to navigate and understand. The Ancestral Genome Lens app is used to help people discover their ethnic background in relation to medication warnings.
Round 1
Your submitted design solution for client review:
1. Landing/Login Page
2. Input Look Up
3. Genetic Ancestry Visualizer
4. Medication Information
Readme.jpg : contains your notes about your submission.
Make sure all pages have correct flow! Use correct file numbering.
Round 2
Final design + updates from checkpoint feedback:
1. Landing/Login Page
2. Input Look Up
3. Genetic Ancestry Visualizer
4. Medication Information
Readme.jpg : contains your notes about your submission.
Make sure all pages have correct flow! Use correct file numbering.
Background/Description:
Currently, studies say that although self reported ancestry can facilitate assessments of epidemiological risks, it is not sufficient and it is necessary to use genetic information for more accurate association studies. We are going to be creating a web application that is going to be utilizing this genetic information to verify ethnicity.
Business Objective of Initiative:
We want to be able to determine a population’s genetic ethnicity with a greater confidence level than we would know by self-reported information. Basing analysis on genetic ethnicity reduces the proportion of false positives for genetic case control association studies. It will help us figure out patterns of modern human population structure that can be used to guide construction of historical models of migration and be useful in inferential studies of human genetic history.
File Downloadables
branding.eps - Required Logo, Primary Color and Fonts
wireframe.pdf - Wireframe Guideline
Design Requirements & Considerations:
- Design your submission on this screen size: 1024px width and height up to your design
- The client really likes the look of Uber.com for aesthetics.
- They like the dark backgrounds and more of subtle tech patterns and treatments
- Don't go overboard or too sci-fi. The site should still feel refined and professional
- We've included an Inspiration.pdf with specific examples and design notes.
- The overall UI and UX of the application.
- Ways to add/remove user
- How does the user search, navigate and view large amounts of data, graphs and visualizers.
Challenge Deliverables
Use the existing wireframes as a good starting point. If you feel there are other, more effective UX practices feel free to explore those. Use generic branding with a simple color palette and modern sans serif font. The name of the site with be “CIQAT”
1. Landing/Login Page
wireframe: pdf screen 1
- A simple landing page that has a prominent form to enter your username and password.
- Include the ability to sign up as a new user
- Forgot password or username
2. Input Look Up
wireframe: pdf screen 2
- This page will allow the user to search for a specific person based on name. The results are shown underneath the search bar. Once a name has been clicked the user is taken to the results page for that name.
- Design ways to add additional functionality. Is there a way to filter the results by A-Z, Z-A, Age, ID Number etc. Can you just search for these variables independently (just search by age or specific ID number)
- How are the results presented?
- Think about how the user will interact with this section and design to it make it as simple and easy to use as possible.
3. Genetic Ancestry Visualizer
wireframe: pdf screen 3
- This page will show a series of charts, graphs and map visualizers for the name that you chose on the Input Lookup screen. Different charts could include, percentage of all ethnicities, Map locations, genographic maps, population grids, chromosomal maps, etc. The main goal here is how do you design a page with various data maps and charts and how do you interact with them.
- How to various types of data and maps work together on the map
- How does the user switch views on maps? Are there separate tabs or view buttons?
- Think about how to add additional information. On a map graphic can the user click on the pins to expand the content or dive deeper into that specific area? On a pie chart can a section be clicked to bring up detailed information?
- Look at the supplied wires for additional chart and infographic inspiration.
- Needs to include a pie chart or graphic of some sort that shows “The Percentage Of Ethnicities” for the selected name. This graphic needs to include a button or something that will go to the Medication Information screen (Screen 4)
- These are site references to help you check latest Data Visualization
- https://github.com/mbostock/d3/wiki/Gallery
- https://developers.google.com/chart/interactive/docs/gallery
4. Medication Information
wireframe: pdf screen 4
- The user gets to this page by clicking on a button or link next to “The Percentage Of Ethnicities” found on Screen 3. This screen allows the user to see all of the medication warnings and information associated with each ethnicity present.
- Look at engaging and visual ways to interact and present this information
- Need to be able to select individual ethnicities and see all of the medication information associated with that ethnicity.
- This should be engaging, but not overwhelming or confusing.
- Refer to the Wireframes for more information and details about the specific information needed on this screen.
Additional Consideration (Not Required)
The client would also like to have you take a look at creating a simple logo. We've included a really rough idea of what they want.
- Clean, modern design
- Think about representing what is in the sketch, but simplify it alot
- A simple set of colors will work best
- Think about how the logo will work on dark backgrounds and/or as one color
- Again, this is NOT a requirement of the challenge and should not be a main focus.
- You logo will not "hurt you" during judging if you don't include one
- Some guidelines on what makes a good logo:
--- http://tannerchristensen.com/rules-for-logo-design/
--- http://justcreativedesign.com/2008/12/02/logo-design-resources/
--- http://www.smashingmagazine.com/2009/08/26/vital-tips-for-effective-logo-design/
Target User
Employees within Booz Allen. Anyone from upper level executives to entry level consultants.
Judging Criteria
- How well does your design align with the objectives of the challenge
- Cleanliness of your graphics and design.
- Overall Design and User Experience.
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
All Requested Challenge Submission Requirements stated above.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop or Adobe Illustrator and saved as layered PSD or AI file.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors.
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.