BONUS: 5‌ CHECKPOINTS AWARDED WORTH ‌$200‌ EACH

Register
Submit a solution
The challenge is finished.

Challenge Summary

Another first of its kind [topcoder] Design Studio challenge is coming your way! We need inspirational designs, we need YOU! 

This time, we are asking you to do some amazing data visualization for the pharmaceutical industry! That industry brings billion dollar drugs to market and visualizing molecular data is a huge struggle for researchers across the globe. Without innovative data visualizations it hinders how discovery is made. It can cause delays in testing or worse yet, new breakthroughs might go undiscovered because the data simply can't be analyzed in effective ways.

[topcoder] continues to attract huge interest from the pharmaceutical industry, so we are looking to explore data visualization design and be part of helping researchers discover more breakthroughs!

Similiar to our past LUX challenges - the results of this challenge will be presented at a conference next week!  We will be showcasing your checkpoint designs to an audience at DIA 2014

Round 1

Checkpoint Designs - that will be shown at the DIA 2014 Conference
Note: These screens are suggestions - design and submit what you would like to present and receive feedback on
01. Dashboard
02. Comparison 
03. View Single Molecule
04. "Design Presentation Slide (1024x768)" that will be shown at the conference - you must include this!
For the Checkpoint Review please provide what you can of the requested screens for a client design review. The more you submit the more feedback we can provide!  

 

 

Round 2

Final Design
- Final Designs
- Include any updates, specification updates and feedback from the Checkpoint review.


Challenge Details
The main goal of this challenge is to take the provided information and create visualizations that can be displayed as a desktop or iPad application. We are looking for 2 things from this challenge:

1. A design that can show the information appealingly while using all the elements of good visualization. The information may be for a collection of molecules or for a single molecule

2. An interaction experience which is intuitive and much easier than anything currently used. Current experiences are very clumsy and do not allow the user to forget the UI and just focus on the data. 

Rolling Checkpoint Review 
- If you want to submit early for "rolling feedback" Blake Walles (bwalles) will provide a design review whenever you submit before the checkpoint deadline.

Design Problem 
Visualize the results of multiple assays across hundreds of compounds to help decide what to do next. Typically, chemists pore over well over a hundred molecules and their associated data every week in search of clues to design the next molecule. They often spend several hours daily on this analysis, interspersed with lab work.

Challenge Deliverables
A convincing visualization and user interaction interface design for the above process. We would like to see this for 2 platforms:
1. Desktop design (1024x768px)
2. iPad design (2048-by-1536 resolution at 264 pixels per inch (ppi), landscape)
3. Your design in a "design presentation" format (1024x768) to show at the conference (you must include this at the checkpoint)

Visualization Definitions and Details
Drug Discovery

The process of discovering a completely new drug molecule to cure a disease. It takes over a billion dollars and ~15 years to bring a new drug to market. An intensively intellectual part of this process is studying data about past molecules to design the next molecule which could be better. The data involve assays 

Assays
Assays are measurements of a molecule’s action in a test tube against known agents. These known agents serve as surrogates for the drugs true potential.

The Big Need in Drug Discovery
Make sense of data coming from multiple assays for each molecule. Look at data from 100’s of molecules, have the human mind analyze all the data and come up with new molecules to make and test. This is a very mind intensive process. Automated algorithms and machine learning have all desperately failed at replicating these efforts. Analysis of such data is an important step in the ideation, invention and design of new molecules to test for potential drug efficacy. 

The Data you can use
The dataset contains Identifier information associated with each molecule:

  • ID – the CAS Number, a unique identifier for each molecule
  • # - just an index
  • Name – the drug name
  • SMILES - a string representing the molecule structure
  • CAS – CAS number again (index number determined by the Chemical Abstracts Service)

Molecular properties and information associated with a molecule

  • VDss (L/kg) - the volume of distribution
  • CL (mL/min/kg) - the clearance
  • fu –the free fraction in plasm
  • MRT (h) - mean residence time
  • t1/2 (h) - half life
  • Reference – literature reference
  • Comments
  • CHARGE_STATE – acid, base, neutral, zwitterionic

You can use any subset of, or all of the molecules in the data set. But each molecule should have all the molecular property associated with it, represented in some form (abstractly as an color-coded image for example or as a text).

Graphic Design Direction
We are not looking for perfection! We are looking for visualization concepts and ideas on how we can help chemists consume information faster and better!
- Desktop page design should fit within a 1024px browser window
- iPad designs should enable easy navigation between multiple levels of data (lots of molecules to a few molecules to one molecule)
- Analyze the navigation - tell us what navigation items we should use
- No istockphoto allowed in this contest. Use your own designs and illustrations (we are a community of designers, digital creatives!)

General Requirements:
- Use the data provided in sample_files.zip.
- Explanation about identifier associated with each molecules can be seen above (in Definitions and Details section).
- Simplify the data visualization so our audience can see it much more easier

Application and Visualiztion Screen Suggestions:
We are suggesting some screens and ideas - but the amount of screens/solutions is up to you
01. Dashboard.
- Reference - 10-example.png
- Screen that by default could appear when user starts the data visualization.
- Spreadsheet view, thumbnail view, or both? choose which view is the best and easier way for our audience to check molecule information.
- Show only brief data information for the molecules. 
- Design it to accomodates hundreds to thousands molecule data. 
- Example: http://www.daylight.com/meetings/summerschool98/course/toolkit/bernd/WMSpread.gif, this design has problems - a lot of wasted screen real estate and comparing molecules that are not on the same page requires scrolling - which can be frustrating.

02. Comparisons. 
- One way to start analyzing molecule data is by comparing molecules
- Show us the easiest way for our audience to select and compares molecules - what is this visualization?
- Our audience can compares multiple molecules or more (unlimited).
- Could this work like a shopping cart?

Examples/ideas:
1) http://www.leadscope.com/demos/
- The first 2 videos on the list demonstrate a multi-window version.
- The videos show a slightly better way to compare the sets of molecules - but the design is still wasteful of screen real estate and is a very clumsy user experience.

2) http://www.idbs.com/en/videos/2012/01/activitybase-suite-for-sar-reporting-sarview-for-querying-and-reporting/
- Focus on the data visualization (we do not care about search functionality etc in this challenge).
- Use molecule images of different sizes within a view.
- The user selects which molecule gets larger in size. This also controls the information detail around a molecule - e.g. larger molecule images have numbers for properties, smaller molecule images have color bars.
- There should be some way for our audience to select one or more molecules in comparison screens to add them into collection screen.

03. View Single Molecule
- When designing the molecules image, use whitespace around a molecule to show some of the properties or identifiers, thereby reducing screen real estate used per molecule.
- Use color coding to represent some of the properties to reduce screen real estate. Use a color code based on properties when lots of molecules are viewed, but show real values when only a few are viewed.

04. Canvas. 
- Allow our audiences to add any molecules along with their associated information to a canvas in any location and orientation that they desire.
- This could help the user map and recall information easily across sessions.
- User can add as many as molecules they want in the canvas.
- Example: Arrange molecules on a sphere which can be rotated around, zoomed into, zoomed out like Google Earth.

05. Collections.
- A screen where user can see their molecules data collection for more deep analysis.
- Example : a Shopping Cart Idea - A shopping cart to collect molecules to compare - especially useful on an iPad - along with pinch and expand

06. History.
Store a history of previous actions and Shopping Carts
- it will store previous actions and Molecules in collection screen - Our audience often do this work in between periods of lab work.
- Our audience should be able to navigate easily from one collection screen to anothers that stored in this screens. 

More about our user
Typically chemists are less interested in the identifier information and more interested in the 2D molecular structure (provided in the images above) along with each molecule’s properties and associated information. 

- Also chemists are viewing all of this information in context i.e. they wish to see info on as many molecules as they can on a screen.
- Their typical viewing platform is a browser on a 19” monitor. 
- They view 100’s of molecules, at the beginning, then select 1-16 molecules to look at in greater detail and eventually zoom in on 1-6 selected molecules.
- Current UX’s are so bad, they often collect the 1-6 that they want on a PowerPoint slide.

Document References
sample_files.zip
- Contains 300 molecules samples from client data set, each row in spreadsheet associated with images in folder, for ex. row 1 associates with images 1 in the folder.
- Feel free to use it, trace it and use it in your design.

Data-Visualization-Inspiration.zip,
- Contains a references/inspirations of graphic design treatments to help visualizes the data. 

Target Audience
- Medicinal Chemists
- Molecular biologists
- Pharmaceutical scientists

Judging Criteria
- Ability to convey data in an accurate, meaningful and creative manner
- Overall design and user experience
- Use of high priority data sets
- Did you help solve our design & information consumption problem?

Submission & Source Files 
Please submit one set of images showing the UX on a browser and another showing the UX on an iPad.
Preview Image
Please create each preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.

Submission File 
Submit JPG/PNG image files based on contest submission requirements stated above.

Source Files 
All original source files. Original source files should be saved as layered Photoshop PSD files or AI / EPS (Illustrator) files.

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 concept or graphics based on other winning placements.

Stock Photography
Stock photography is not allowed in this challenge. All submitted elements must be designed solely by you.

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.

How To Submit

  • New to Studio? ‌Learn how to compete here
  • Upload your submission in three parts (Learn more here). Your design should be finalized and should contain only a single design concept (do not include multiple designs in a single submission).
  • If your submission wins, your source files must be correct and “Final Fixes” (if applicable) must be completed before payment can be released.
  • You may submit as many times as you'd like during the submission phase, but only the number of files listed above in the Submission Limit that you rank the highest will be considered. You can change the order of your submissions at any time during the submission phase. If you make revisions to your design, please delete submissions you are replacing.

Winner Selection

Submissions are viewable to the client as they are entered into the challenge. Winners are selected by the client and are chosen solely at the client's discretion.

ELIGIBLE EVENTS:

2014 TopCoder(R) Open

Challenge links

Screening Scorecard

Submission format

Your Design Files:

  1. Look for instructions in this challenge regarding what files to provide.
  2. Place your submission files into a "Submission.zip" file.
  3. Place all of your source files into a "Source.zip" file.
  4. Declare your fonts, stock photos, and icons in a "Declaration.txt" file.
  5. Create a JPG preview file.
  6. Place the 4 files you just created into a single zip file. This will be what you upload.

Trouble formatting your submission or want to learn more? ‌Read the FAQ.

Fonts, Stock Photos, and Icons:

All fonts, stock photos, and icons within your design must be declared when you submit. DO NOT include any 3rd party files in your submission or source files. Read about the policy.

Screening:

All submissions are screened for eligibility before the challenge holder picks winners. Don't let your hard work go to waste. Learn more about how to  pass screening.

Challenge links

Questions? ‌Ask in the Challenge Discussion Forums.

Source files

  • Layered PSD files created in Adobe Photoshop or similar
  • AI files created in Adobe Illustrator or similar

You must include all source files with your submission.

Submission limit

Unlimited

ID: 30043469