UppBio Protein Designer
A user-friendly page for research scientists who are accustomed to clunky UIs
About
Uppbio is a company developing algorithms that are used by Researchers and Scientists in Biotech combining the latest of technologies in Algorithms, Machine Learning and Biotechnology and presenting it to them in an easy to use interface.
To comply with my non-disclosure agreement, some information in this case study has been omitted and obfuscated.
Original Role(s)
Designer (Algorithm Bias page)
Project Manager
Lead Researcher
Goal
Problem
The goal of the project is to develop the concept for the First-of-a-Kind Protein/BioMolecule designer that will integrate ideas from traditional protein design tools and MLOps Platforms.
UppBio needs a competitive analysis of MLops platforms to inform screen designs
UppBio needs low fidelity screens of a Protein Designer tool page to present to investors.
UppBio needs low fidelity screens of an Algorithm Bias page to present to investors
Timeline
Man (Designer) Down
New Scope
Two and a half weeks into the UppBio project, one of our team members dropped out. This left our design team of three people down to two. As a result, we needed to reassess the project scope and redefine our roles.
UppBio needs a competitive analysis of MLops platforms to inform screen designs
UppBio needs low fidelity screens of a protein designer tool page to present to investors.
UppBio needs low fidelity screens of a Algorthm Bias page to present to investors
New Roles
Designer ( Protein Designer page)
Project Manager
Lead Researcher
Discovery.
Competitive Analysis - Round 1
UppBio requested that we conduct a general competitive analysis of two companies, Weights & Bias and Arize. The analysis did not directly help with designing the protein designer, but it was important for the CEO's to know some specific information about their competitors. This was the first of 3 separate rounds of research done by us.
Competitive Analysis - Round 2
After our initial competitive analysis, the company requested additional information about five areas: file uploads, graphical visuals, mobile and tablet versions, partnerships, and promotions. As designers, we needed to know how companies allowed file uploads and if edge cases on mobile/tablet versions mattered.
User Interviews
We believed that user interviews would be beneficial to us as designers in creating a perfect protein designer page. Unfortunately, the CEOs were unable to provide us with any users to interview. They explained that it would be difficult to get users (professors and high-level students) as they are either too busy or would cost money. We proceeded without user interviews.
Upload Files
Mobile & Tablet Versions
Drag & Drop
Copy/Paste
Search Computer
NO
Design.
Based on research and meetings with the CEO's and project manager, we developed information architecture, user flows, and sketches.
Through this process, we gained valuable insights into the essential user flows, including the placement and functionality of the history and results pages, to ensure a seamless and user-friendly experience.
Navigating Complex Site Map for Effective Progress
Key User Flows Dictate Screen Requirements
The final site map within the information architecture (IA) reflects the complexity of the protein designer and its connections to other pages, including the results and history pages. The IA evolved through multiple iterations to ensure a user-friendly experience.
Protein Designer Flows
Edit Properties
Upload protein components
Edit components
Edit Sequence
Sketching and Iterations.
First iterations of screens.
Protein Designer Page
Edit Properties
Upload Protein Components
Edit Components - 2
“The protein designer page has excessive white space at the top. Additionally, we require a results page and history page.”
Optimizing white space for intuitive user interactions
We improved white space optimization by relocating the properties panel to the bottom. This allows users to edit five protein properties while providing ample space to view protein and its components.
First sketches of new History & Results pages
In the initial version, users could select a single result on the Results page and expand it for detailed viewing. The History page has been added to the sidebar, enabling users to quickly view or edit as per their requirements.
“Now that I am looking at the history and results pages, I think they should connect on some level. For the Results page, users should be able to perform more actions such as downloading, labeling, and adding experimental data. On the History page, it would be helpful for users to know which branch or subbranch their changes are coming from, along with other relevant information.”
Revamped: Integrated History and Results Pages
History page with descriptive text of changes and timestamps
Button to connect to the results page
Results page enabling selection of multiple radio buttons
"More actions" button for increased user freedom
Upload Protein Components - 2
Edit Sequence
Edit Components
Edit Sequence - 2
Results.
Protein Designer
Upload protein model
Upload protein model
Select protein component
Results page
Results page
Upload protein model
Edit/hover sequence
Results page
History page
Next Steps
Leverage Existing Research to Inform Toggling Options
Leverage research insights provided by us to determine user-friendly toggling options for "activities" in the protein designer (e.g., slider bar, plus/minus buttons, etc.).
Prototyping
Initiate prototyping to explore and implement all interactions within the designer interface.
User Interviews
User interviews remain valuable even at this stage before prototyping, allowing us to gather user sentiments and feedback effectively.
Usability Testing
Conducting usability testing is crucial for making informed design edits that effectively cater to the user base.
Lessons Learned
Leverage Available Resources
Understanding the intricate subject matter underlying UppBio's vision proved to be a significant challenge, given the CEO and many employees' expertise as PhDs in the field. However, through extensive communication with the CEO, including frequent calls outside of the weekly check-ins, we were able to grasp the subject matter effectively. Additionally, the project manager Antonio played a vital role in providing valuable insights, making him an invaluable asset to the project.
Discovering Inspiration from Unconventional Sources
With few comparable machine learning/protein designer companies to draw inspiration from, we explored alternative sources such as Adobe Photoshop and Google Meet. These diverse platforms proved to be ideal references, effectively addressing our specific UI/UX challenges.
Adapt to the evolving circumstances
The departure of a fellow designer just two weeks into the project came as a shock to both the company and my partner. We understood that significant adjustments would be necessary within the project's scope. However, maintaining flexibility and fostering an optimistic attitude played pivotal roles in propelling us towards our desired goal.
Thriving with an Exceptional Team
Working on a design project with exceptional designers and hardworking individuals was a truly enjoyable experience. My design partner, Sam, was remarkable to collaborate with, contributing fantastic ideas and consistently being available for brainstorming sessions. Additionally, our project manager, Antonio, played a crucial role as a bridge between subject matter expertise and guiding us through design-related queries. Overall, it was an immensely rewarding experience to work with such outstanding individuals and create a remarkable project
Design Thrives on Collaboration
Thanks!
I extend my gratitude to my mentor, friends, associates, and colleagues whose support and contribution were instrumental in making this project a resounding success.
Rebekka Z, Sam H, Antonio H, Krishna R, Ray R & Rob M
