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

Register
Submit a solution
The challenge is finished.

Challenge Summary

Welcome to the GSK - Portfolio View Application UI Design Challenge!

GSK is a global leader in pharmaceutical development. In this challenge we would like you to conceptualize and design the UI for an application which will provide a strategic view into the data for their Research & development projects. Leadership needs clear access to this information in order to make faster and more accurate decisions about ongoing and future research and development. We have completed an initial DViz Design challenge. Focus on using the provided visualizations with best UX practices to help surface the data in a meaningful and dynamic way.

Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!

Round 1

Submit the following screen requirements for checkpoint feedback:
01) Portfolio Dashboard
02) Project Detail
03) Variations to Filtered and Comparison Views
  • As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
  • Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Round 2

Submit the complete screen requirements + interactions along with all feedback applied for final review: 
01) Portfolio Dashboard
02) Project Detail
03) Variations to Filtered and Comparison Views
  • As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
  • Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
  • If you're not submitting in the Checkpoint/Round 1, you are not eligible to submit in the Final/Round 2

CHALLENGE OBJECTIVES

  • UI design for a desktop web application
  • Create approximately 5-10 unique screens with variations (depending on your solution)
  • Use the provided data visualizations as a base for presenting the views needed.
  • Intuitive UI: must be very easy to use. Provide a clear and intuitive experience for users to examine and understand the health of their portfolio of projects
  • Revealing data visualizations: Surface key analytics insight and dynamics immediately.


EXPLORATION SCORE

  • Creativity: Impactful; the solution is different or unique from what has already been used.
  • Exploration: Flexible; use the provided screen requirements as a starting point, and propose improvements that positively impact the users’ goals.
  • Aesthetics: Hi-fidelity design; provide a top-notch finished-looking visual design.
  • Branding: Flexible; follow the provided guidelines and suggest improvements that seem appropriate and inline with the goals.


GLOSSARY

  • R&D = Research and Development. GSK is focused on R&D in the pharmaceutical industry.
  • Portfolio = A collection of active R&D projects. One user may have 20-50 projects within their portfolio.
  • Project = An active Research & Development effort aimed at developing a viable pharmaceutical product.
  • Governance Board = A group of GSK Leaders who determine if a project should continue in development or be terminated. Governance Board meetings occur regularly and address projects at multiple phases during their lifespan.
  • Phase = A defined portion of a project.
  • Cycle Time = The time from start to finish of one phase of a project.
  • RU (Research Unit) = An area of scientific research. For example: oncology, immunology, genetics.
  • eQBA (Question Based Approach) = A set of 23 standardized questions that gather data during the lifespan of a project to help provide a view into the potential for success.
  • DPP (Discover Project Profile) = A subset of eQBA. Nine (9) standardized questions that gather data during the lifespan of a project to help provide a view into the potential for success.
  • RAG = Colors: Red, Amber, Green. These color values are assigned to indicate the strength of the data collected for each DPP question. Red = weak, Amber = mediocre, Green = strong.


BACKGROUND OVERVIEW

  • GSK is a large global healthcare company focused on pharmaceutical Research and Development (R&D). Scientific innovation accelerates the pace at which GSK is able to develop and deliver transformational medicines. The company R&D supports hundreds of active R&D efforts at any given time.
  • Members of GSK’s leadership team each manage a portfolio of R&D projects. An individual Research Unit Head portfolio may have 20 - 50 active projects. Leaders must understand their portfolio’s progression and health in order to make effective decisions regarding ongoing project activity. They also must make recommendations during Governance Board meetings as to which projects should move forward. Leaders are looking to prioritize projects which have a higher probability of success over those which are less promising. The data that defines “project success” is complex and constantly changing.
  • Currently, the leadership team must engage in a cumbersome process to understand their projects at multiple stages during development. A great amount of data is captured around the details of each project. However, it is not standardized nor easily accessed in a meaningful way. Many discussions, meetings, and presentations are required to give a clear picture of project health to the leader responsible. Prioritizing projects within the context of their portfolio is even more difficult, as side-by-side comparison of data is not available on demand. This linear process is repeated continuously during a project’s lifespan - to help make regular operational adjustments, and to provide recommendations before Governance Board review meetings. 


DESIGN GOALS 

  • An application to consolidate data & analytics points into a single interactive tool for the leadership team. 
  • Reveal an IMMEDIATE view of the most critical information and key analytics.
  • Allow an EASY way for the user to select a view of unique details and comparisons.
  • Provide a standardized and accurate view of the data, with direct paths to supporting detailed information.
  • Allow users to easily identify areas where attention is required and instantly drill into the details. 


TARGET AUDIENCE

  • For this application we are focusing on GSK employees who have the responsibility to manage a portfolio of projects in development


PERSONA

Tracy Jones, VP,  Oncology Research Unit Head
  • A senior level employee with a leadership role
  • Large amount of responsibilities, very little time
  • Comfortable with technology and online applications

Tracy goals is to have a new application that should meet these objectives:
  • Understand project performance in the context of her portfolio, so that she can prioritize the portfolio to make investment/resource decisions.
  • Easily drill into details of reliable project data, so that she can be confident she is making smart decisions.


USER WORKFLOW

Tracy’s workflow will follow a path as she answers key business questions regarding her portfolio. By finding the answers to these questions, Tracy will be able to meet her objectives:
  • Question #1) How is my project doing vs. expected cycle time?
    • Relevant Visualization: Time in Phase
    • Tracy will look for a measure of the time a project has been in a specific phase. If she sees projects that have time greater than the Industry Target, she will know they need to be addressed at the next operational meeting.
    • Tracy will want to view multiple projects in the same phase, to compare their cycle times to one another.
    • Tracy may wish to drill deeper into one of the outlier projects to investigate: Why is the proposed time different from the Industry Target? Can adjustments be made?
 
  • Question #2) What is the Technical Readiness of my project vs. what is expected?
    • Relevant Visualization: DPP Completion
    • Tracy will look into the DPP (Discovery Project Profile) Progress for this specific project. Tracy will want to see a measure of this project’s DPP Completion related to the expected completion target point. Tracy hopes to see that this project’s DPP Completion is at or above the target.
    • If Tracy sees that this DPP Completion is low compared to the target, she will drill deeper into other metrics that indicate DPP Progress. For example, she may look at the eQBA Completion and the Strength of the data collected.
 
  • Question #3) How does one project compare against other projects in my portfolio?
    • Relevant Visualizations: eQBA Completion, DPP Completion, Strength of Data
    • Tracy will look at DPP Progress for a specific project and compare it with other projects in the same phase. She will want to look at all three metrics that make up the DPP Progress: eQBA Completion, DPP Completion, and Strength of the data collected.
    • For this project’s current phase, Tracy hopes to see a good level of eQBA Completion, DPP Completion and strong (green value) data collected compared to those measurements in the same phase of other projects.
    • Tracy may wish to compare DPP Progress against other projects for a single phase, or for the entire project duration.
    • It is helpful for Tracy to sort her projects by faster/slower cycle times so that she can address those that might be excelling or struggling in that aspect. If Tracy sees that a project is an outlier (For example: slower than expected with poor overall DPP Progress) she can drill deeper into the DPP Progress details and examine the Strength of data collected for various DPP questions.
 
  • Question #4) Is the project’s cycle time faster/slower than expected in current and previous phases? Is this because of gains/losses in a previous phase?
    • Relevant Visualization: Time in Phase
    • One of Tracy’s projects has a very fast cycle time for its current phase. She drills deeper into the details of that project for additional context to explain this exception. She will need a view to see and compare how the Actual Time of each phase in this project relates to the Industry Target.
    • Filtering options allow Tracy to choose which phases in the project to view and compare.
    • Comparing Time in Phase for multiple phases may reveal a trend or an anomaly that would support Tracy’s next recommendation for the project.
 
  • Question #5) How does my project compare with itself at a previous point in time? And, how does it compare with other projects in the portfolio?
    • Relevant Visualizations: eQBA Completion, DPP Completion, Strength of Data
    • Tracy is preparing for a meeting to discuss next steps for one of her projects. She needs to have a thorough understanding of how it has been progressing since it began. She needs a view to compare one project’s DPP Progress in its current phase to the DPP Progress from 6, 12 and 18 months earlier.
    • Tracy would also like to get an idea of how this progress compares to other projects in her portfolio. She is able to choose the phase from 6 months ago and compare that DPP Progress to that of several other projects in the same phase.
    • These more detailed comparisons could enable Tracy to better judge the potential of this project based on the known success of others in her portfolio.
 
  • Question #6) How quickly has my project changed from a previous point in time? And, how does this compare with other projects in the portfolio?
    • Relevant Visualizations: Rate of Change
    • To further understand the potential of a project, Tracy will be looking to see if it is making steady progress throughout its duration. The change could be measured as a Rate of Change based on three different metrics: DPP Completion, Strength of Data, or Time in Phase.
    • Tracy knows that this Rate of Change for these metrics should improve at an expected rate as time passes. By setting some parameters, she is able to see her project’s DPP Completion Rate of Change from the project start through its fourth phase. Or, she can adjust to see the change by month.
    • With more filter options, Tracy is able to compare this same Rate of Change with other projects sharing similar parameters.
    • If Tracy sees that her project’s Rate of Change for DPP Completion is not increasing as expected, she would look for other details to understand “slippage” and how much it may have impacted the project.
 
  • Question #7) How will I add filters to see more granular and/or summary views of the data reported for a project?
    • Filtering could be applied to all projects in the Portfolio to effect all of the screen views. For example: Dashboard list view, DPP Progress combined quadrant view, DPP Progress detail table, etc.
    • At any given time, Tracy may need a view of her Portfolio and all of the projects she has responsibility for. By using intuitive filters to combine properties, Tracy is able to access a more dynamic view into a project or group of projects. This level of control allows Tracy to make more meaningful comparisons and get faster access to the project details she needs at any time.


DATA VISUALIZATIONS EXPLAINED

The following Data Visualizations were developed in our first challenge. Use these as a base for your UI Design solutions. Feel free to adjust styling or add to the details to enhance your unique UI design solution.

1) Time in Phase: 
2a) DPP Progress (independent metrics): 
  • This concept is expressed with three independent metrics: eQBA Completion; DPP Completion; Strength of data.
  • eQBA Completion
    • Amount (i.e. percentage) of the eQBA questions that have been answered out of the full number expected per the project
  • DPP Completion
    • Amount (i.e. percentage) of the DPP questions that have been answered out of the full number expected per the project
    • Target amount (marker showing the expected completion amount for that phase)
  • Strength of data 
    • RAG value assigned to each of the completed DPP questions
    • Visual indication of the amount of each value per a phase or the entire project
  • Positive: eQBA completion should be high, DPP completion should be at or above to target, and majority of the data collected should be strong (Green).
  • A more detailed view of data will be available in 2c) DPP Progress Detail.

2b) DPP Progress (combined quadrant view): 
2c) DPP Progress Detail (table view):
3) Rate of Change:


SCREENS / FEATURES REQUIREMENTS

  • The number and structure of screen views will depend on your design solution.
  • IMPORTANT: Your solution should include views to allow the User Workflow described above. 
  • Sample content: GSK Portfolio View - UI Design Sample data
  • A general outline of required screens/features is listed below.

00. Global Elements
  • Title: Portfolio View
  • GSK Logo
  • Navigation as needed
  • User Identification: Tracy Jones, VP,  Oncology Research Unit Head

01) Portfolio Dashboard
  • Our user needs a landing page which gives them the most valuable information immediately. This is the primary view of the user’s Portfolio (group of projects). It should also allow them an easy path to access details and visualizations that are needed to answer the business questions defined in the User Workflow (above). This screen should include:
    • Display projects in portfolio 
      • Include key attributes (see Primary Project Info below in 02. Project Details)
      • Must provide the user access to see ALL of the projects in their portfolio (20-50).
    • Immediate visibility to key metrics for EACH project.
      • Must show clear visualizations for: Time in Phase, eQBA Completion, DPP Completion, and Strength of Data.
      • Arrange to allow easy visual comparison and understanding.
      • Give users clear controls to show / hide types of visualizations displayed at one time. I.e. checkboxes
    • Flexible and interactive filters - IMPORTANT! (see Project Dimensions in 02. Project Details)
      • Filter / Sort should allow the user to customize their view to specific projects and other attributes, and compare the exact data they wish to see.
    • A clear path to allow the user to quickly access the more detailed data views they need (see User Workflow). They should be able to easily get to the DPP Progress Detail table view. Or, get to the Rate of Change views that relate to their filtered content. Or, switch to the DPP Progress (combined quadrant view).
    • High level statistics reported for the Portfolio. For example: Total Projects, Projects in my portfolio, On time, etc.

02) Project Detail
  • This view should include comprehensive data regarding a single project. Users will find this useful for planning and discussions with specific project teams. 
  • Sample content: GSK Portfolio View - UI Design Sample data
    • Primary Project Info: 
      • Project Short Name
      • Project ID Number
      • Last Updated Date
    • Project Dimensions: This data may be used for filtering:
      • Research Unit
      • Project status
      • Disease area
      • Disease indication
      • Modality
      • Gene name
      • Biological target
      • Phase
      • DPP Question ID
  • Include data visualizations and content as described in the User Workflow. Keep in mind the various ways a user may need to filter these visualizations and compare them. For example: See only the DPP Completion and the Strength of Data, each month for the last 9 months of the project.
  • Think about how to show the user which other projects in their portfolio have similar characteristics (common values in some of the dimensions). This may allow a quick path to comparison if needed. 

03) Variations to Filtered and Comparison Views
  • The number of screens you create for these additional views may vary. As described in the User Workflow, users will select projects and data to compare. On the Dashboard they will filter specific project dimensions to narrow their view into select projects.
  • Some suggestions based on the User Workflow:
    • A sorted view of ALL projects in the portfolio, and a sorted view of a refined (filtered) list of projects. Think about what data and visualizations should appear as part of  the list items.
    • A side by side presentation of one data visualization across multiple projects and/or phases. For example: “Tracy may wish to compare DPP Completion against other projects for a single phase, or for the entire project duration.”
    • As mentioned in the Dashboard description, they should be able to easily get to the DPP Progress Detail table view. Or, get to the Rate of Change views that relate to their filtered content. Or, switch to the DPP Progress (combined quadrant view).
    • Additional exploration of Cycle Time (see description in UI Design Sample data).
    • Any other views that would help our user move through their Workflow...


CHALLENGE FORUM


BRANDING GUIDELINES

  • Please use the client’s corporate website (www.gsk.com) as a high-level guide to palette and visual style. Reminder that this application will be an internal tool rather than a consumer facing site.


DOCUMENTATION


TARGET DEVICES

  • Web/Desktop: minimum 1366px width and height as required


SUBMISSION AND SOURCE FILES

Submission File
  • Submit JPG/PNG image files based on Challenge submission requirements stated above
  • MarvelApp link for review and to provide feedback
  • Declaration files document contains the following information:
    • Stock Photos Name and Links from allowed sources
    • Stock Art/Icons Name and Links from allowed sources
    • Fonts Name and Links source from allowed sources
    • Full Details of the Topcoder Policy can be found in this LINK

Source Files
  • All source files of all graphics created in Adobe XD, Figma, or Sketch and saved as an editable layer


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.

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:

2022 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

  • Sketch
  • Adobe XD
  • Figma

You must include all source files with your submission.

Submission limit

Unlimited

ID: 30193969