2021 - Present

Janssen Global R&D

Using Data Science and Digital Health to Advance Medicines

I am working directly with the Director of Platform Operations within R&D Data Science at Janssen (now rebranded to Johnson & Johnson Innovative Medicine) to iterate on an internal data portal called Med.ai. Over the course of a multitude of sprints, I have: collected requirements, designed and iterated on the portal many times over based on user feedback and new leadership directives, drafted and conducted UAT testing, and worked with the engineering team to ensure design consistency upon deployment. Additionally, I worked with another team at Janssen to help them rebrand and redesign parts of a new data portal called Signify.

JUMP TO A PROJECT:
Med.ai PlatformSignify Platform

The Med.ai Platform

Designing the Med.ai Platform was my first big project at Janssen, and having overseen the platform for 3 years now, it's gone through a series of iterations and changes to date. It's sole purpose still remains clear as the "one-stop shop" for all available data-sets and data tools at Janssen, available to the R&D team.
DESIGN GOAL
Create a directory that is easy to navigate for users to both find and discover data tools that can supplement their technical toolkits.
JUMP TO:
  1. Sprint 1
  2. Sprint 2
  3. Sprint 3

Sprint 1

To start the project, I had a lot of meetings with various stakeholders on the team to understand the scope of the project and the first requested requirements. We landed on these first versions of the Homepage, the Full Directory Tool page, the Tool Details page, as shown below.

Med.ai Homepage - Sprint 1

Refreshed Business Listings Page

The Homepage

The goal of this first landing page was to communicate the value of the new portal and to showcase the most popular tools in the catalog. Other features included are:

  • Simple welcome screen with the title of the portal, brief tagline, and description to inform users what this portal is all about (copy provided by the client)
  • A search bar is shown to get users to search for their favorite data tools on the homepage itself without having to click to the full directory
  • If they want to explore all available tools, they can click the "See Full Catalog" CTA in order to be directed to the Full Directory page
  • All fonts, colors, icons, and images had to strictly adhere to Janssen's extensive brand guidelines and asset library

Full Tool Directory Page

After clicking on the "See Full Catalog" CTA on the homepage, a user would be directed to this page, where they could scroll and see all available tools that they have access to. A couple key decisions were made:

  • Grouped tools by category, to make it easier to understand which tools are related to each other
  • For the tool cards themselves, a header image was added to make it easier to visually distinguish one tool from another
  • The set up of this page was built to scale via the category sections, the "select a category" filter, and the search bar, as there were plans of adding more tools in the future

Tool Details Page - Sprint 1

Tool Details Page

After a user clicks on a tool card either on the Homepage or from the Tool Directory page, they are directed to that specific tool's detail page. Every tool detail page has the same format to maintain consistency throughout the platform, but has different inputs for both the "Getting Started" and "Resources" section.

  • Introduced breadcrumbs to make it easy to get back to the previous page the user came from
  • Details included were: Tool title, tool description, link to access the tool application, and specific resource links
  • Included additional tools at the bottom of the page from the tool's same category to encourage further user exploration and learning of related tools
  • Additional CTA of "See all of our tools" was added to make it easy for users to go back to the Full Directory page if they wanted to

Sprint 2

In the next iteration of the platform, myself and the Director of R&D of Platform Operations consolidated the user feedback we had received from both everyday users as well as new leadership initiatives to justify some key changes to this next version.

Med.ai Homepage - Sprint 2

Communications Corner - Sprint 2

The Homepage

The new version of the homepage features a few big changes that evolved user feedback from the first iteration:

  • The "See Full Catalog" CTA became "Search our Tool Directory" and was put directly below the head/subhead of the page, in an attempt to anchor it as a central functionality, among the additional action items added
  • Three "pillars" of the Med.ai platform were added in addition to the main function of searching the tool directory: Explore Data, Request Data Access, and Data Science Workbench
    • These news pillars were added to expand the functionality of the Med.ai platform, expanding the platform's scope from a more simplified tool directory into a more comprehensive data access platform
  • The "Popular Tools" section changed from two rows of three tool cards into one column of the three most popular tool cards, in which I gave each tool card a spotlight with a wider card and bigger image (specifically requested from leadership)

Communications Corner

This page was a new addition to the Med.ai platform, and served as a centralized archive location where users can go to find and access all relevant data materials, newsletters and resources. A few decisions were made:

  • Leadership wanted an easy way for users to filter by Platform type, Category, and Date range, as well as save their favorite platforms, resulting in a top filter bar that made it easy for users to find what they were looking for
  • Dealing with a variety of communication title lengths coupled with the addition of other lengthy columns as well, I decided to set a character count and have the full text show on hover, in order to save space within the table itself

Full Tool Directory Page Tool Cards - Sprint 2

Full Tool Directory Page

Leadership also wanted a way to showcase the technical status of each data tool on the cards themselves, so users could know in advance of clicking into the tool's detail page or data application itself.

The lack of space within the tool cards meant these indicators would have to be small, and both colored & labeled chips were the solution that best fit, especially for accessibility's sake

Sprint 3

For this next iteration, the main focus was to redesign the entire platform to align with Johnson & Johnson's new brand guidelines, which included a variety of new colors, new fonts, and new spacing rules, and new assets, as shown below:

Med.ai Homepage - Sprint 3

Med.ai Full Tool Directory Page - Sprint 3

Med.ai Tool Details Page - Sprint 3

Med.ai Communications Corner - Sprint 3

The Signify Platform

Worked directly with the Director of Data Science, Data Platforms & Privacy to revamp an old portal they had previously worked on with an external design agency, but weren't happy with the results. The Signify platform is a highly technical dashboard for data scientists to be able to access gene signature information, as well as upload their own gene signatures in order to conduct a variety of analysis tests.
DESIGN GOAL
Redesign the old platform to align with the new Johnson & Johnson design guidelines, reformat the gene signature detail pages, and make improvements to the existing gene signature upload flow.
JUMP TO:
  1. Home Dashboard
  2. Gene Signature Details Pages
  3. Upload a Gene Signature Flow

Home Dashboard

Upon logging into the Signify platform, this screen is the first screen users land on. The main redesign task here was to align this design with the new Johnson & Johnson brand guidelines, add some new sections to the left navigation bar, and reformat some elements within the "Shared Signatures" table itself that the team was hoping to change.

Old Signify Dashboard - Home

Redesigned Signify Dashboard - Home

Old Signify Login Screen

Redesigned Signify Login Screen

Gene Signature Details Pages

After a user would select a gene signature from the dashboard, they would be directed to that specific signature's detail page, that is comprised of three different sections: gene signature attributes, gene list, and full properties. The redesign of these pages was also to align them to the new brand guidelines, as well as incorporate some specific elements into each section, like the editability of the "Full properties" section, and more.

Redesigned Signify Dashboard - Gene Details - Gene Signature Attributes

Redesigned Signify Dashboard - Gene Details Page 1

Redesigned Signify Dashboard - Gene Details - Full Properties

Old "Upload a Gene Signature" Flow

Shown below is the old version of one of the most important functionalities of the platform itself, a multi-step upload flow in which users could add their own gene signatures to the "Shared signatures" section on the dashboard. There were some key issues with this flow that I addressed in my redesign:

  • Cramped preview sections made the data hard to review and confirm from a user's perspective
  • Confusing "Match attributes" section with cut off instructional action buttons
  • Impossible to decipher "Validate the results" screen, as all numbers were squished together
  • Poor use of space for user input and unnecessary preview screen on the "Tell me about your gene signature" page

Old "Upload a Gene Signature" flow

Redesigned Upload a Gene Signature Flow

Redesigning the older version of the upload flow was important as it is one of the most important functionalities of the entire platform. I addressed the shortcomings of the old version mentioned above by:

  • Separated out key screens, making sure there was only one action step per page (i.e. Upload and Preview now have their own dedicated pages)
  • Since the uploaded files contain so many columns and rows, it was important to have a vertical scroll as well as a horizontal scroll bar in order for the user to truly be able to review all contents of their uploaded file on any size computer screen
  • For the "Match attributes" screen, I made the necessary actions more clear by making the instructional buttons stand out more and connected them directly to their related column, also adding a necessary horizontal scroll bar in order to give every column an adequate amount of space for the user to interact with
  • The "Validate results" screen was designed to be editable and had some custom highlight features that were built in to flag users of data that had been previously changed, which was a consistent technical feature that had been implemented in previous related platforms
  • For the "Your gene signature's attributes" section, I removed the preview screen in an effort to focus the user's attention on simply filling in the required information

Review the full redesigned flow in detail below:

Redesigned "Upload a Gene Signature" flow