ProteomeX
Redesign an outdated suite of web software for scientific researchers.
Role
UX/UI Designer
‍
Team
D. Schwartz - Associate Professor, COR²E Director, Software Engineer
B. Norris - Software Engineer
Background Context
Proteomics is the systematic, large-scale analysis of proteins. The analysis of proteins and protein interactions allow discovery of new drugs and the development of diagnostic techniques and disease treatments.
‍
‍Proteome-X is a suite of web software that allows researchers to identify, predict, and visualize key amino acid patterns within large biological datasets.
‍
‍The suite is composed of four distinct web tools that work together to form the product: Motif-X, Scan-X, PLogo, and virPTM. Proteome-X houses these tools and serves as their “home base”.
‍
Having software such as Proteome-X allows researchers to discover patterns of amino acids within proteins that can be used to advance the field of medicine.
‍
‍
The Problem
The existing suite feels like a hacked-together website of random tools. Users who work in research teams do not have a way of viewing their fellow lab members’ job results since the current subscription model is exclusively individual.
‍
My Role
I worked on this project as the sole UX/UI Designer alongside a team of 2 software engineers. My responsibility was to refresh the Proteome-X visual identity and redesign the suite to accommodate a new group subscription model payment system.
‍
Target Users
The target users for Proteome-X are individual researchers as well as teams of researchers who work in the field of Proteomics. These users vary in age, so it is important to ensure that the design is easy to navigate. They will require quick access to job results for reference in their research.
‍
Project Constraints
The largest constraints I faced when working on this project were a lack of knowledge in Proteomics as well as a lack of access to external users to interview. As such, my design decisions were based on meetings with subject-matter expert D. Schwartz, an Associate Professor and Director of COR²E (the Center for Open Research Resources & Equipment) at the University of Connecticut. These conversations helped to demystify the scientific terminology and understand the demographics and needs of the user base.
‍
‍
Product Goals
Allow users to extract meaningful information out of large proteomic datasets. Allow teams of researchers to organize their findings.
‍
Redesign Goals
- Refresh the identity of Proteome-X to more accurately reflect the prestige of its user base.
- Create a more intuitive and interconnected user experience of the suite and the tools within it.
Business Goals
- Create a subscription system that allows for individual membership across the 4 tools as well as group (Lab) memberships.
My Success Metrics
My success was measured by internal feedback from stakeholders who were deeply familiar with the existing product. I presented design solutions at weekly meetings to keep developers in the loop and receive feedback on my work.
‍
‍
Solutions
‍Meeting User Needs
To arrive at the following solutions, I utilized knowledge from stakeholders as well as analyzed the existing product to determine user pain points and brainstorm ways to more easily achieve user goals. I used this data to directly inform my design decisions.
A New Identity System
When designing the identity for the suite, it was important to have a consistent visual trope that linked all of the products together. The outlined, overlapping style of the customized type serves as this link. The wide yet sleek typeface embodies the themes of Schwartz Lab. Modern and cutting-edge, yet still refined and professional. These choices improve upon the previously disconnected and unscalable identities of the tools which hardly resembled a family of web tools.
Previous logos:
A Refreshed Homepage
As a key selling point of the product, the Proteome-X homepage should let the user know what problem the software will solve. It should also clearly explain how it will do so. The old design lacked a mission statement and the design felt outdated and harsh on the eyes. It also required hover functionality to read the information about each tool within the suite.
‍
My redesign implements a new color palette expressing a sense of prestige and friendliness. The design clearly states what the product offers in the scientific language of the users who will be using it. It also displays the sub-tools in a more obvious way to the user.
.png)
A Refreshed Job Results Page
This page is responsible for displaying the results that are computed by the four tools within Proteome-X.
‍
The previous Job Results page didn’t utilize space on the screen very wisely. The most important part of the page, the results themselves, lived below the fold and required scrolling to be seen. With the redesign, more visual priority was given to the results.
Introducing a Dashboard System
One of the goals of the redesign was to implement a subscription model for teams of researchers. To accommodate this goal, it was necessary to have a place for the teams to view all of their jobs and pin the most important ones.
‍
The introduction of a dashboard system allows both personal users and teams of users to organize and find their jobs in a centralized location.
Registration and Payment
The subscription model for Proteome-X is a little bit complicated. The subscriptions can be purchased individually, as a group, and per tool, meaning that there are many different possible combinations of subscriptions. I opted to use a selector-style checkout experience to clearly convey this customization ability to the user.
Account Management
Implementing a new subscription model made it important to have a location to manage that subscription. The subscription section within the Account page allows users to view their most important subscription details and manage them if desired.
Proteome X Problem Solving Process
My problem-solving process is drawn from the Double Diamond Methodology and the Goal-Directed Design Process.
Research
- Define project scope (target users, user goals, business goals, constraints).
- Audit existing work and product.
- Stakeholder Interviews to understand product vision and constraints.
- User interviews and observations to understand user needs and behavior.
Define
- Utilize target user information to discover user behaviors, attitudes, aptitudes, goals, environments, and challenges.
- List requirements and necessary capabilities of the product.
- Determine opportunity areas.
Ideate
- Create low/mid-fidelity mockup ideas and get feedback.
- Develop a clear direction for the design solution.
Implement
- Design, iterate, and test higher-fidelity versions of the product solution.
Research Process
‍
My Involvement in Research
My research steps consisted of:
- Analyzing the existing software to determine pain points and design inconsistencies
- Meeting with stakeholders and a Subject Matter Expert to learn what the product offers, why it has failed in the past, and where it needs improvement. This is also how I determined user goals, behavior, demographics, as well as business goals.
- Analyzing other SaaS products on the market to gain awareness of common design patterns for dashboard systems, payment flows, and account management interfaces.
Since there was not an active user base at the time of this redesign, my user interviews were limited to people on the team who have had experience using Proteome-X themselves. If given the opportunity, I would have preferred to conduct more extensive user research to get a more diverse profile of users.
‍
Pain points of the previous suite design
- The four sub-tools within the suite are not clearly shown on the landing page. Their logos and descriptions are only visible by hovering.
- Job results can only be viewed inside of the Motif-X web tool.
- Proteome-X homepage page does not tell the user what the product does.
- Branding is discombobulated and has no consistency across web tools.
- Users can only log in or view their accounts once inside of one of the four web tools. Cannot be done from the homepage.
‍
Referencing other software
I researched existing products to learn about design patterns and best practices for this type of dashboard-based software. Referencing pre-existing designs helped me form solutions for some of the challenges that this project posed.
‍
Design Process
The design process for this project was iterative. Throughout the process, the color palette expanded and the design style became more practical in an effort to develop a familiar dashboard environment for users.
User Flows
Before designing any new screens, I worked with my team to determine the key user flows for the additions and changes within the redesign. This helped provide structure to the design process so I knew exactly what I would be designing.
Colors
I chose a deep purple as the new Proteoeme-X brand color. It’s a color that feels prestigious yet can also contrast with vibrant colors, such as the yellow accent, in a way that adds a modern touch.
The dashboard colors are a bit more utility-oriented. We wanted the workspace to feel clean and functional, with less creative coloring.
Typography
The Proteome-X typography system utilizes two typefaces. “Obviously” for branding and display text, and “Roboto” for all heading and body text within the suite. This was a decision to create a distinction between expressive type and functional type. Similar to the color palette, legible type serves to keep the product feeling usable and clean.
Designing a multi-step form
An important function of Proteome-X is the use of a multi-step input form. This is used across all four tools within the suite as well as account signups and lab creation. It was essential to design this input form in a way that can accommodate its multiple use cases within the suite.
Designing a dashboard system
In the previous version of Proteome-X, there was no “home base” to see all of a user’s recent job results and other relevant uploaded files.
‍
With the redesign, I constructed a dashboard to house this data, allowing for an easy viewing experience for individual users and new lab groups.
‍
My initial low-fidelity design for the dashboard helped create a structure of what modules users would prefer to have easy access to. These decisions were informed by stakeholders who were most knowledgeable about the user base and user goals for the product.
‍
I continued to iterate upon this structure as the color palette for the software became more comprehensive to accommodate the different necessities of a SaaS product.
Outcomes
Successes and Failures
My final designs proved to be a success. The stakeholders were excited and eager to see the outdated software reinvigorated.
‍
This redesign will be useful for the Schwartz Lab team’s future endeavors. By creating a robust design system and component library for Proteome-X, the four tools within the suite are now able to be redesigned themselves, following the system that I’ve set in place. This will save the team precious time when designing and developing updated versions of those tools.
‍
From this project, I learned the importance of not always reinventing the wheel. Realizing that this suite of software would lend itself well to a SaaS-style design allowed me to reference existing relevant web products to approach the dashboard design in a more informed way.
‍
The biggest failure of the project was the lack of external testing to inform design decisions. It was difficult to truly tell how effective my solutions would be, or what potential solutions I may have missed, without being able to interview and poll users for feedback rather than solely receiving internal feedback from stakeholders.
‍