INTERNSHIP
The IPF Consortium is a group of 5 research labs under the National Heart, Lung, and Blood Institute working to create models of idiopathic pulmonary fibrosis. I designed the logo, external-facing website, and an internal scientific model management system.
DURATION

June 1, 2022 - July 28, 2022

TEAM

Kate Stewart (Director of Research Operations)
Apoorva Babu (Biostatistician)
Me! (Design & Web Developer)

ROLE

I designed the visual identity for this project, developed the research plan, and designed the user interface and experience of the Idiopathic Pulmonary Fibrosis Consortium. Currently, I am developing and implementing the site using HTML/CSS.

SKILLS

UX/UI Design
User Research
Brand Design
Web Design
Prototyping

TOOLS

Figma
GitHub

Overview

Problem
WHAT DO WE NEED TO FIX?

There is an absence of research models that can faithfully represent the complexity of Idiopathic Pulmonary Fibrosis (IPF), a chronic lung disease. Furthermore, due to its progressive nature, there is limited progress in the research of the disease. Lastly, as these complex models are interactive and web-based, there is no single platform that enables labs to request or store IPF models. Currently, research labs rely purely on sending or sharing model files to one another. The IPF Models Consortium is a group of 5 research labs working together to create a space for researchers to share data and models for understanding and distributing information about IPF.

Solution
WHAT DO WE PROPOSE?

The IPF Models Hub is a web-based platform that allows research labs to easily share scientific models with each other, ultimately building a repository of information for all. This web application will be used by both researchers who can request visualizations of molecules and discover the latest models through a research portal and for IPF patients who will be able to view the latest research and treatment options via a front-facing website. This way, IPF models easily accessible for scientists and general information would be made more approachable for patient and public understanding.

Research

Research Plan
INITIAL THOUGHTS

I initially had difficulty thinking about how I could conduct user research, as I am unfamiliar with biology, academia, and medical research. I decided to conduct an initial observational field study to better understand the big picture and learn more about biomedical research and how it is conducted. With my observations, I was able to refine my questions for user interviews. Through interviews, I was able to develop a better understanding of the pain points of lab researchers, doctors, and the general public.

Field Study
NEEDFINDING
Interviews
NEEDFINDING
Personas
Synthesis
Top Social Media Apps

Research Summary

Key Insights
RESEARCH SYNTHESIS

I used affinity diagramming to derive critical insights from the field study and interviews. I found themes in three primary areas: Collaboration, Education, Simplicity

KEY FUNCTIONALITY
Breakdown IPF into language that is understood by the general public

The jargon used to explain IPF creates a barrier for patients and the general public to understand what’s going on in the scientific world. The complex ideas in scientific research or news should be broken down into easily digestible information. 

Components
  • Empower patients to make informed decisions by providing them with vetted information and news
  • Balance jargon and abstraction so that patients and the general public are motivated to learn but aren’t overwhelmed
  • Include tooltip word definitions and references to define terms, encourage users to seek out  additional resources, and boost SEO
KEY FUNCTIONALITY
Ensure navigating the application is easy and intuitive

Simplicity in interfaces, language, and the overall experience was a commonly-mentioned theme and necessity for users, particularly for those who are not as tech savvy. Our interviewees confirmed this. Applications with the most straightforward interfaces perform the best.

Components
  • Use accessible design principles for interfaces and only present helpful, contextually relevant information to users
  • Replace over-complicated explanations with simple, intuitive explanations and visuals
KEY FUNCTIONALITY
Maximize impact through collaboration

Bringing together the expertise and resources of several researchers and labs can help answer more complex questions and expand the breadth of research.

Components
  • Encourage people to reach out and contact labs via an actionable contact page and individual contact information
  • Have a internal-facing management system that prioritizes and organizes data visualization requests, reviews, and completed models
  • Utilize tooltips to walk new researchers through the internally-facing data visualization tools step-by-step, speeding up the process

Wireframes

External Website
ESTABLISHING STRUCTURE

Based on the insights I gained from user research, I began drafting ideas for the external-facing website. With a focus on minimal, easily-digestible visual designs and putting content first, I came up with a wireframes for a five-page site, a straightforward, informative solution ideal for the consortium to fully control their digital reputation while generating enough visibility from search engines.

Internal Web Application
ESTABLISHING STRUCTURE

Based on the insights I gained from my field study and speaking with lab workers, I gained valuable insights about how I could design an internal, scientific model database. With these wireframes, I focused on creating an intuitive design such that onboarding new researchers and lab members onto the platform would require minimal work. Using familiar project management platforms as inspiration, I was able to come up with a simple model/task-driven application.

Branding

Logo
VISUAL IDEnTITY

Based on the insights I gained from user research, I began drafting ideas for the external-facing website. With a focus on minimal, easily-digestible visual designs and putting content first, I came up with a wireframes for a five-page site, a straightforward, informative solution ideal for the consortium to fully control their digital reputation while generating enough visibility from search engines.

Typography
VISUAL IDEnTITY

Based on the insights I gained from my field study and speaking with lab workers, I gained valuable insights about how I could design an internal, scientific model database. With these wireframes, I focused on creating an intuitive design such that onboarding new researchers and lab members onto the platform would require minimal work. Using familiar project management platforms as inspiration, I was able to come up with a simple model/task-driven application.

Features

IDEATING SOLUTIONS

With only content changes (e.g. picture sizes, including a Twitter feed, etc.) requested by my manager and other lab members, my initial page layouts and functionalities were approved. Keeping the requests of Kate and Apoorva in mind, I was able to build mockups based on the content (news articles, publications, photos, etc.) I was supplied with. I also designed a logo, a lung form created with nodes to represent the collaboration of people to further pulmonary research, and chose Titillium Web and Nunito as primary and secondary typefaces, respectively.

Education
INTERNAL & EXTERNAL SITE
  • Provide walkthroughts for navigation guidance: Uses tooltips to give a walkthrough of each screen to make onboarding for internal site easier
  • Latest relevant news: News page provides relevant, reviewed news articles that are backed by science
  • Translate jargon into everyday language: Gives a brief summary of each publication in everyday language for easier understanding
Collaboration
INTERNAL SITE
  • Synchronized model management: Allows users to manage and access models of interest through filtering and organize models by progress status
  • User Grouping: Utilizes colors to group users and models by lab, as most labs work within their labs to create models
  • Model file management: Researchers can easily see all of the uploaded model views and edit or review them in browser
Online Presence
External site
  • Social media awareness: By integrating Twitter, allows the consortium to share additional, digestible information through Tweets and Retweets
  • Latest announcements and news: Updates users on events open to the public and on recent accomplishments of lab members
  • Call to action: Encourages users to read more about the research labs, reach out to consortium members, or contact the lab for more information
Model View
INTERNAL SITE
  • View management: Organizes views and easily displays the number of views using a dropdown system
  • Tracking progress: Keeps track of status and the last time it was updated to boost productivity and manage progress
  • Upload to the cloud: Provides a direct, simple file upload system that ensures users can upload, manage, and view models quickly

Prototype

BRINGING DESIGNS TO LIFE

Upon approval from Kate and Apoorva, using Figma, I created animated prototypes. These prototypes proved to be valuable for lab members to better understand the upcoming platform prior to its public announcement and deployment (projected October 2022). In addition, they were helpful in giving administrators and developers a better idea of the technologies and frameworks that would be required to build the application. As I am currently working on developing the front-end of the external-facing site, it was nice to refer to a prototype when implementing interactions, like a horizontal scroll.

Home Page
External Site

Welcomed by the home page, users can learn about IPF, view the latest updates on Twitter, and identify schools the consortium is affiliated with.

Meet the Members
External Site

To encourage open conversations between the general public and consortium lab members, the external lab memory directory and contact page provide two opportunities to get in contact with the consortium.

User Flow
  • To further explore the consortium, users can navigate to the member directory, where they can find information or contact members
  • If the user wants to learn more or send a direct message, through the contact page, users can get in direct contact with the consortium.
Learning About the Consortium
External Site

Users have multiple methods of learning about the IPF Consortium and its members, bringing attention to the 5 labs and their researchers.

User Flow
  • Navigating to the research page via the call to action, users can read more about each individual lab and view their websites
  • To see the latest happenings and what the consortium is up to, users can check out the latest tab for featured events and announcements
Resources
External Site

Content in the resources section is tailored to patients and the general public, those without an academic or scientific background with the purpose of bringing trustworthy IPF news and resources to the general public.

User Flow
  • Users interested in exploring novel treatments and research breakthroughs can navigate to the Publications page for easy-to-understand summaries of publications published by consortium members
  • Navigating to the News page, users receive the latest news regarding trials, breakthroughts, or opinion articles
  • For visual learners, the directory of lab videos in the Videos page provides a third method of better understanding pulmonary scientific research
Dashboard
Internal site

On the main models dashboard, users can quickly organize and access the model they are searching for. If the model has yet to be requested, they can request a new model.

User Flow
  • Users can filter models using folders, such as by lab, by personal affiliation (favorited, contributions, requests), or by the most frequent type of reagent model
  • Users can also filter models by completion, emphasizing collaboration by using a familiar task management system view
  • If the user knows the name of the reagent, they can quickly access the model using the search bar
Reagent View
Internal site

When selecting a reagent, researchers can easily pick and choose the models they want to see or update, add, and edit existing models.

User Flow
  • Upon selecting the reagent, users are prompted to select the specific view they wish to see
  • As reagent models can vary, users can toggle on and off difference variances
  • Through editing or uploading a new view to the cloud, users can quickly update or complete the model
Team Directory
Internal site

To quickly find the contact information or role of a consortium member, the teams dashboard provides a filterable database of all members as well as a method of inviting new members. All members are color-coded by their lab affiliation.

Walkthroughs
Internal site

Utilizing tooltips, walkthroughs ensure that the onboarding process for new consortium members is quick. The tooltips explain each feature of the application.

Reflection

How did I feel when working on this project?
What could I have done differently?
What did I learn about working in a non-tech industry?
What did I learn about myself from this project?