D2D Cure
Streamlining the database submission and curation process for 10,000+ users across 40+ institutions researching enzyme function.
Role
Product Designer
Timeline
Jan 2024 - Present
Team
2 PM's, 2 Designers, 7 Developers
Overview
Overview
Overview
What is D2DCure?
A public website and internal crowdsource tool used by laboratories across the nation to collect data on protein design.
What is D2DCure?
A public website and internal crowdsource tool used by laboratories across the nation to collect data on protein design.
What is D2DCure?
A public website and internal crowdsource tool used by laboratories across the nation to collect data on protein design.
What was our goal?
To overhaul the outdated structure and UI of the website to enhance usability and streamline workflow.
What was our goal?
To overhaul the outdated structure and UI of the website to enhance usability and streamline workflow.
What was our goal?
To overhaul the outdated structure and UI of the website to enhance usability and streamline workflow.
What did I do?
Transformed complex data sets and visualizations into intuitive solutions, allowing users to more easily navigate complicated flows, communicate status updates, and manage mass amounts of incoming data.
What did I do?
Transformed complex data sets and visualizations into intuitive solutions, allowing users to more easily navigate complicated flows, communicate status updates, and manage mass amounts of incoming data.
What did I do?
Transformed complex data sets and visualizations into intuitive solutions, allowing users to more easily navigate complicated flows, communicate status updates, and manage mass amounts of incoming data.
FINAL DESIGN
A sneak peek of the redesign.
FINAL DESIGN
A sneak peek of the redesign.
FINAL DESIGN
A sneak peek of the redesign.
USER RESEARCH
Understanding distinct use cases through interviews.
Before diving into the redesign, we first had to understand where the current problems were. Our primary users were students submitting data and faculty curating data to be displayed on their public databases.
We interviewed both types of users, acknowledging that they each have distinct use cases for the site, to gain comprehensive insights into its usability.
USER RESEARCH
Understanding distinct use cases through interviews.
Before diving into the redesign, we first had to understand where the current problems were. Our primary users were students submitting data and faculty curating data to be displayed on their public databases.
We interviewed both types of users, acknowledging that they each have distinct use cases for the site, to gain comprehensive insights into its usability.
USER RESEARCH
Understanding distinct use cases through interviews.
Before diving into the redesign, we first had to understand where the current problems were. Our primary users were students submitting data and faculty curating data to be displayed on their public databases.
We interviewed both types of users, acknowledging that they each have distinct use cases for the site, to gain comprehensive insights into its usability.
INSIGHTS
Our user's key pain points: Navigation, Communication, and Error Handling.
From our user interviews, we created a product requirements document where we recorded and categorized our user’s suggestions by priority.
We concluded that the current main issues of the site were organization, clarity and communication, and error forgiveness. Users needed better navigation and task flows, increased communication between researchers, and ability to edit and fix inevitable human errors during submission.
INSIGHTS
Our user's key pain points: Navigation, Communication, and Error Handling.
From our user interviews, we created a product requirements document where we recorded and categorized our user’s suggestions by priority.
We concluded that the current main issues of the site were organization, clarity and communication, and error forgiveness. Users needed better navigation and task flows, increased communication between researchers, and ability to edit and fix inevitable human errors during submission.
INSIGHTS
Our user's key pain points: Navigation, Communication, and Error Handling.
From our user interviews, we created a product requirements document where we recorded and categorized our user’s suggestions by priority.
We concluded that the current main issues of the site were organization, clarity and communication, and error forgiveness. Users needed better navigation and task flows, increased communication between researchers, and ability to edit and fix inevitable human errors during submission.
DEFINE
Mapping the site to identify core problem areas.
The existing website had three three main flows: enzyme profile, database curation, and enzyme characterization. To understand how and where to implement changes, we created a comprehensive information architecture of the current website.
Given the amount of information and unique functionalities of each of the pages, the information architecture helped us pinpoint which of our three main issues—organization, clarity, and forgiveness—we needed to focus on for the page.
DEFINE
Mapping the site to identify core problem areas.
The existing website had three three main flows: enzyme profile, database curation, and enzyme characterization. To understand how and where to implement changes, we created a comprehensive information architecture of the current website.
Given the amount of information and unique functionalities of each of the pages, the information architecture helped us pinpoint which of our three main issues—organization, clarity, and forgiveness—we needed to focus on for the page.
DEFINE
Mapping the site to identify core problem areas.
The existing website had three three main flows: enzyme profile, database curation, and enzyme characterization. To understand how and where to implement changes, we created a comprehensive information architecture of the current website.
Given the amount of information and unique functionalities of each of the pages, the information architecture helped us pinpoint which of our three main issues—organization, clarity, and forgiveness—we needed to focus on for the page.
IDEATE
Establishing a consistent design for current and new users.
A significant challenge we encountered was finding the optimal layout that not only met our users’ needs effectively but also ensured consistency and coherence across all pages. We began with sketches but did most of the iteration on Figma to get a sense of how much information there was to fit. This was especially important given the amount of data visualization elements that make the pages easily look cluttered.
It was important that we maintained a uniform design would establish familiarity throughout the website making it easy to use for current and even new members who join the lab.
IDEATE
Establishing a consistent design for current and new users.
A significant challenge we encountered was finding the optimal layout that not only met our users’ needs effectively but also ensured consistency and coherence across all pages. We began with sketches but did most of the iteration on Figma to get a sense of how much information there was to fit. This was especially important given the amount of data visualization elements that make the pages easily look cluttered.
It was important that we maintained a uniform design would establish familiarity throughout the website making it easy to use for current and even new members who join the lab.
IDEATE
Establishing a consistent design for current and new users.
A significant challenge we encountered was finding the optimal layout that not only met our users’ needs effectively but also ensured consistency and coherence across all pages. We began with sketches but did most of the iteration on Figma to get a sense of how much information there was to fit. This was especially important given the amount of data visualization elements that make the pages easily look cluttered.
It was important that we maintained a uniform design would establish familiarity throughout the website making it easy to use for current and even new members who join the lab.
MIDFI DESIGN
Balancing functionality and clarity in data presentation.
In this stage we focused on integrating the app's core functionalities with an optimized layout. We presented data in a digestible manner, addressing user needs for clarity and efficiency. We utilized various tables and cards that allowed the flexibility needed to display varying amounts of information across different pages. This approach allowed us to tailor the presentation of data to the specific context of each page which keeping a consistent user-experience.
MIDFI DESIGN
Balancing functionality and clarity in data presentation.
In this stage we focused on integrating the app's core functionalities with an optimized layout. We presented data in a digestible manner, addressing user needs for clarity and efficiency. We utilized various tables and cards that allowed the flexibility needed to display varying amounts of information across different pages. This approach allowed us to tailor the presentation of data to the specific context of each page which keeping a consistent user-experience.
MIDFI DESIGN
Balancing functionality and clarity in data presentation.
In this stage we focused on integrating the app's core functionalities with an optimized layout. We presented data in a digestible manner, addressing user needs for clarity and efficiency. We utilized various tables and cards that allowed the flexibility needed to display varying amounts of information across different pages. This approach allowed us to tailor the presentation of data to the specific context of each page which keeping a consistent user-experience.
USER TESTING
Observing how lab members used our new design.
Designing a clickable prototype for lab students to test helped us determine if could navigate each element of the new website. We specifically noted any comments related to navigation, priority and availability of information, and benefits of additional features.
Successes: Users enjoyed the updated UI, found the additional features such as searching and filtering intuitive, and navigated through the application smoothly.
Improvements made: Minor layout changes to display the most crucial information first, adding additional resource pages and general information on homepage. Any larger feature suggestions were put on hold for the future as they weren’t feasible given our current timeline.
USER TESTING
Observing how lab members used our new design.
Designing a clickable prototype for lab students to test helped us determine if could navigate each element of the new website. We specifically noted any comments related to navigation, priority and availability of information, and benefits of additional features.
Successes: Users enjoyed the updated UI, found the additional features such as searching and filtering intuitive, and navigated through the application smoothly.
Improvements made: Minor layout changes to display the most crucial information first, adding additional resource pages and general information on homepage. Any larger feature suggestions were put on hold for the future as they weren’t feasible given our current timeline.
USER TESTING
Observing how lab members used our new design.
Designing a clickable prototype for lab students to test helped us determine if could navigate each element of the new website. We specifically noted any comments related to navigation, priority and availability of information, and benefits of additional features.
Successes: Users enjoyed the updated UI, found the additional features such as searching and filtering intuitive, and navigated through the application smoothly.
Improvements made: Minor layout changes to display the most crucial information first, adding additional resource pages and general information on homepage. Any larger feature suggestions were put on hold for the future as they weren’t feasible given our current timeline.
DESIGN SYSTEM
Clean. Simple. Functional.
Our goal for our design system was to modernize the UI for a better user experience while maintaining core functionalities. We used NextUI components to streamline development, added subtle drop shadows and rounded elements for a contemporary look, and used a bright blue to highlight key interactions while incorporating the existing logo colors.
DESIGN SYSTEM
Clean. Simple. Functional.
Our goal for our design system was to modernize the UI for a better user experience while maintaining core functionalities. We used NextUI components to streamline development, added subtle drop shadows and rounded elements for a contemporary look, and used a bright blue to highlight key interactions while incorporating the existing logo colors.
DESIGN SYSTEM
Clean. Simple. Functional.
Our goal for our design system was to modernize the UI for a better user experience while maintaining core functionalities. We used NextUI components to streamline development, added subtle drop shadows and rounded elements for a contemporary look, and used a bright blue to highlight key interactions while incorporating the existing logo colors.
HANDOFF
Constant design enhancements and documentation.
We incorporated feedback from user-testing, development and our client, ensuring consistency across the design system. Some modifications included a condensed filter panel to reduce clutter, and consistent placement of buttons to improve usability.
To prepare for handoff, we ensured there was proper documentation of spacing, components and assets as well as annotations of final designs.
HANDOFF
Constant design enhancements and documentation.
We incorporated feedback from user-testing, development and our client, ensuring consistency across the design system. Some modifications included a condensed filter panel to reduce clutter, and consistent placement of buttons to improve usability.
To prepare for handoff, we ensured there was proper documentation of spacing, components and assets as well as annotations of final designs.
HANDOFF
Constant design enhancements and documentation.
We incorporated feedback from user-testing, development and our client, ensuring consistency across the design system. Some modifications included a condensed filter panel to reduce clutter, and consistent placement of buttons to improve usability.
To prepare for handoff, we ensured there was proper documentation of spacing, components and assets as well as annotations of final designs.
FINAL PROTOTYPE
Enzyme Variant Submission
For students submitting, we improved navigation through breadcrumbs and easy access action buttons in the table to enhance task completion. Status were added to indicate to researchers if the data was still in progress or if any edits were needed.
FINAL PROTOTYPE
Enzyme Variant Submission
For students submitting, we improved navigation through breadcrumbs and easy access action buttons in the table to enhance task completion. Status were added to indicate to researchers if the data was still in progress or if any edits were needed.
FINAL PROTOTYPE
Enzyme Variant Submission
For students submitting, we improved navigation through breadcrumbs and easy access action buttons in the table to enhance task completion. Status were added to indicate to researchers if the data was still in progress or if any edits were needed.
FINAL PROTOTYPE
Data Curation
For lab faculty/professors, the curation was improved through a more intuitive filters panel and status tags for faculty to distinguish complete from incomplete datasets that were submitted and improve communication between students and professors.
FINAL PROTOTYPE
Data Curation
For lab faculty/professors, the curation was improved through a more intuitive filters panel and status tags for faculty to distinguish complete from incomplete datasets that were submitted and improve communication between students and professors.
FINAL PROTOTYPE
Data Curation
For lab faculty/professors, the curation was improved through a more intuitive filters panel and status tags for faculty to distinguish complete from incomplete datasets that were submitted and improve communication between students and professors.
FINAL PROTOTYPE
Enzyme Characterization
The characterization page was restructured with clear chunking between the key information and the main data table. Filters were also condensed into a clickable panel to reduce space and improve decision making by indicating the action with an icon.
FINAL PROTOTYPE
Enzyme Characterization
The characterization page was restructured with clear chunking between the key information and the main data table. Filters were also condensed into a clickable panel to reduce space and improve decision making by indicating the action with an icon.
FINAL PROTOTYPE
Enzyme Characterization
The characterization page was restructured with clear chunking between the key information and the main data table. Filters were also condensed into a clickable panel to reduce space and improve decision making by indicating the action with an icon.
NEXT STEPS
Launching our product
This isn’t the end of this project! This project is extending into Fall 2024 where we will continue our progress, beta test with the lab's next wave of submissions, and prepare for launch around the end of the year. We will also continue our design dev handoff and the implementation of the remaining frontend, additional features, and client requirements, possibly addressing additional features we didn't get to this past term.
NEXT STEPS
Launching our product
This isn’t the end of this project! This project is extending into Fall 2024 where we will continue our progress, beta test with the lab's next wave of submissions, and prepare for launch around the end of the year. We will also continue our design dev handoff and the implementation of the remaining frontend, additional features, and client requirements, possibly addressing additional features we didn't get to this past term.
NEXT STEPS
Launching our product
This isn’t the end of this project! This project is extending into Fall 2024 where we will continue our progress, beta test with the lab's next wave of submissions, and prepare for launch around the end of the year. We will also continue our design dev handoff and the implementation of the remaining frontend, additional features, and client requirements, possibly addressing additional features we didn't get to this past term.
REFLECTION
Challenges and Takeaways
01 Understanding complex user flows
Due to the specialized and complex nature of our client’s work, I learned the importance of knowing your client’s product inside out and to never stop asking questions (!!). Before I could begin even thinking about designing, I first had to understand the background of their enzyme research and how members used the website for certain tasks. Once I accomplished this, it clarified the areas for improvement for design and product features and allowed us to make educated decisions.
02 Determining feasibility of additional features
While our user-interviews were extremely valuable to understand our users, we had to distinguish what suggestions were absolutely necessary vs nice-to-haves. To solve this issue, we created a product requirements document allowed us to categorize features by lowest and highest priority, and it ensured we had a defined end goal that was realistic for our short timeline.
03 Maintaining consistency
When ideating on design changes, we had to consider how one page would look and function in relation to other pages of the website too. This meant establishing a clear information architecture and not designing in isolation while other designers worked on different pages. Constant feedback and check-ins were key throughout the process!
REFLECTION
Challenges and Takeaways
01 Understanding complex user flows
Due to the specialized and complex nature of our client’s work, I learned the importance of knowing your client’s product inside out and to never stop asking questions (!!). Before I could begin even thinking about designing, I first had to understand the background of their enzyme research and how members used the website for certain tasks. Once I accomplished this, it clarified the areas for improvement for design and product features and allowed us to make educated decisions.
02 Determining feasibility of additional features
While our user-interviews were extremely valuable to understand our users, we had to distinguish what suggestions were absolutely necessary vs nice-to-haves. To solve this issue, we created a product requirements document allowed us to categorize features by lowest and highest priority, and it ensured we had a defined end goal that was realistic for our short timeline.
03 Maintaining consistency
When ideating on design changes, we had to consider how one page would look and function in relation to other pages of the website too. This meant establishing a clear information architecture and not designing in isolation while other designers worked on different pages. Constant feedback and check-ins were key throughout the process!
REFLECTION
Challenges and Takeaways
01 Understanding complex user flows
Due to the specialized and complex nature of our client’s work, I learned the importance of knowing your client’s product inside out and to never stop asking questions (!!). Before I could begin even thinking about designing, I first had to understand the background of their enzyme research and how members used the website for certain tasks. Once I accomplished this, it clarified the areas for improvement for design and product features and allowed us to make educated decisions.
02 Determining feasibility of additional features
While our user-interviews were extremely valuable to understand our users, we had to distinguish what suggestions were absolutely necessary vs nice-to-haves. To solve this issue, we created a product requirements document allowed us to categorize features by lowest and highest priority, and it ensured we had a defined end goal that was realistic for our short timeline.
03 Maintaining consistency
When ideating on design changes, we had to consider how one page would look and function in relation to other pages of the website too. This meant establishing a clear information architecture and not designing in isolation while other designers worked on different pages. Constant feedback and check-ins were key throughout the process!
