Using data science and digital health to advance medicines.
Choose a project to review:
Dashboard to streamline the accessibility and analysis of gene signature information.
Directory for data scientists to find and discover all available datasets and technical tools.
Primary Product Designer
2 months
UX Design
Visual Design
Accessibility
Figma
The Director of Data Engineering of was referred to me after his team had received mockups of an early Signify platform from a design agency they weren't happy with. The platform needed to accomplish some important goals: prioritize usability for data scientists doing data analysis within the dashboards, make adding gene signature data to the platform as seamless as possible, and have the platform's design align with J&J's new brand guidelines.
Home Dashboard
The main page where users can navigate to the different areas of the platform.
Gene Signature Details Page
A specific gene signatures page, consisting of three different sections: gene signature attributes, gene list, and full properties.
Upload a Gene Signature Flow
A multi-step flow in which users can add their own gene signatures to the "Shared signatures" dashboard section.
Old Signify Home Dashboard
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. See below:
New Signify Home Dashboard
The team also wanted a user login screen that matched the look and feel of the redesigned platform, so I chose this image from J&J asset library and aimed to make the screen as straightforward as possible as they wanted a Single Sign On option.
New Signify Login Screen
New Gene Signature Details Page - Gene Signature Attributes
This gene signature details section is the first of three different sections: gene signature attributes, gene list, and full properties. The main goal to accomplish, working with different lengths and types of data, was to make the page as scannable as possible. The team specifically asked to have two separate columns as shown.
New Gene Signature Details Page - Gene List
For the gene list section, the action of "search identifier" was introduced, as well as setting a range of min and max weight. The table, with its rows subtly distinguished by an alternating warm grey background, was made with the goal of displaying the numbers in a clear and concise format.
New Gene Signature Details Page - Full Properties
The full properties section had the most functionality of the three to accommodate, as the team wanted users to be able to live edit the data within the section itself and make changes accordingly. After a user made a change, the box in which they did would display a colored border signifying that it's data had been revised.
Old Upload a Gene Signature Flow
One of the most important functionalities on the platform is the ability for users to upload their own gene signature data. Shown above is the old multi-step upload flow— there were several key issues that I addressed in my redesign:
See how I addressed these issues in the redesign below:
New Upload a Gene Signature Flow
Thanks for reading! 🤠
Back to top
Primary Product Designer
2 years (on an as-needed basis)
UX Design
Visual Design
Accessibility
Figma
This started as one of my first big projects at Janssen, after I was referred to the team lead from someone I worked with at MIT. They wanted to create a directory that made it easy to find and discover all available Janssen datasets and technical tools. Over the course of two years on an as-needed basis, we went through a series of sprints that accounted for new requirements and requests from the leadership team.
Sprint 1
Set the foundation for the basis of the platform: the homepage, the tool directory, and the tool detail pages.
Sprint 2
The platform evolved from a simple directory into a "data science ecosystem" that included more types of resources outside of simply indexing the tools themselves.
Sprint 3
Design of the platform needed to be aligned with the updated J&J brand guidelines, and some new pages and resources were added as well.
Med.ai Homepage - Sprint 1
The goal of this homepage was to clearly communicate the value of the platform and showcase the most popular tools in the directory. Other features to note:
Med.ai Tool Directory Page - Sprint 1
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 in the directory. A couple key decisions were made:
Med.ai Tool Details Page - Sprint 1
After a user clicks on a tool card either on the homepage or tool directory page, they are directed to the tool's specific details page
Med.ai Homepage - Sprint 2
This new version of the homepage features a few big changes that were the result of user feedback and new leadership initiatives to evolve the platform from a simple tool directory into a more comprehensive data access platform. The main changes included:
Med.ai Tool Cards - Status Indicator Additions
Leadership also wanted a way to showcase the technical status of each data tool on the cards themselves, so users could know the tool's status before clicking into the tool's detail page or data application itself. The lack of space within the tool cards themselves meant these indicators had to be small, while still maintaining accessibility standards.
Med.ai Communications Corner - Sprint 2
The Communications Corner was a new addition to the Med.ai platform, and served as a centralized archive where users could go to find and access all past relevant data communications and newsletters. Some main features of the table include:
Med.ai Homepage - Sprint 3
Med.ai Communications Corner - Sprint 3
Med.ai Use Cases Section - Sprint 3
Med.ai Knowledge Center Page - Sprint 3
The entire platform had to be redesigned to account for J&J's new brand guidelines, which featured two new custom fonts and a new palette of colors, with the main accent color being a deep red. I wasn't a huge fan of the red on black, but it was a request by leadership to keep it that way.
The Med.ai platform has been constantly evolving over the past two years. The main challenges I ran into while working on this project were dealing with conflicting leadership priorities that overshadowed proper design decisions and working with an offshore engineering team that required a lot of quality assurance throughout the development process. As for next steps, I'm excited to see how the Med.ai platform continues to evolve and will push the team towards making the best design decisions possible.
Thanks for reading! 🤠
Back to top