Scientifics Website for Glycosciences Research
UX Case Study
GlyGen is a computational and informatics resource for glycoscience research. NIH Common Fund (.gov)
The government project was designed and built from the ground up.
My Roles: UX/UI Design, Product Design, UI Engineering, Visual Design, Marketing, and CEO.
Project Timeline: 2017 – 2022
Final Project
The Problem
Such a site would enable researchers to input their data, retrieve relevant insights, and access additional resources, tools, training, and publications in one place.
Moreover, it would foster communication and collaboration among scientists and researchers, streamlining workflows, saving time, and ultimately boosting productivity across the scientific community.
The Solution
The main objective of GlyGen is to create a comprehensive, adaptable, and cross-disciplinary resource that equips researchers with the tools and data needed to address critical questions in glycoscience.
1.
Advance glycoscience research by unifying diverse datasets from glycomics, genomics, proteomics, cell biology, developmental biology, and biochemistry.
2.
Provide robust computational and informatics resources specifically tailored to the needs of glycoscience research.
3.
Integrate knowledge across multiple fields related to glycobiology, delivering valuable insights for a wide array of scientific inquiries.
4.
Address the needs of both glycoscience specialists and broader scientific communities.
5.
Aggregate and harmonize data from various international sources, offering a streamlined and accessible resource for glycoscience research worldwide.
Research
In this phase, I focused on identifying the goals and needs of both stakeholders and users to lay the groundwork for a user-centered design.
By employing a variety of research methods, I gathered essential insights that would inform the design process.
This structured approach ensures that the final product effectively addresses user needs while aligning with the project’s objectives.
Stakeholder Interviews and User Interviews are primary research methods to gather insights directly from stakeholders and users.
UCB Canvas, User Stories, Card Sorting, and User Empathy Map are tools and methods derived from research findings better to understand user needs, goals, and behaviors.
Personas summarize user research into relatable archetypes.
Heuristic Analysis is a research-based evaluation method that identifies usability issues based on established principles.
Stakeholder Interviews
I conducted initial stakeholder interviews with four leaders from the University of Georgia (UGA) and George Washington University (GWU) to understand the vision, primary needs, and goals for the new GlyGen platform. My questions focused on the scientific community’s data requirements, user experience expectations, and essential features for a trusted, integrated research database.
Key Takeaways:
Business Goals and Vision
The goal is to create a trusted, regularly updated database for the scientific community that connects different life sciences fields and helps users understand glycans, proteins, and their relationships. The product should have intuitive and user-friendly interfaces that serve as a one-stop research platform for glycobiology.
Main Features
The product allows access to data, proteins, and glycosylation sites, supporting quick searches and visualizations. It integrates multiple databases, offers predictive insights, and tracks user activity for improvement. Users can leave feedback and download data.
Business Solutions and User Benefits
The solution integrates data from multiple resources, provides easy-to-follow research structures, and helps users access complex data quickly. It improves research efficiency by offering frequently asked queries, original data source links, and training information.
User Groups and Needs
Target users include scientists, biologists, professors, and software developers. Users need a central source to access scientific data, which is often fragmented and time-consuming to find. The product addresses this by offering an integrated platform that simplifies research.
Metrics for Success and Funding
Success will be measured through Google Analytics, tracking user engagement (downloads, clicks, signups). The project is funded by the NIH through grant #1U01GM125267-01.
User Interviews
I conducted user interviews to gain insights into the primary challenges and needs of GlyGen’s target users, including scientists, biologists, and researchers. These conversations focused on understanding their workflows, obstacles in accessing glycan-related data, and expectations for a user-friendly, comprehensive platform to support their research goals.
Key Takeaways:
User Goals
Users primarily seek to identify functions of proteins, mutations, and gene expressions to better understand the biological mechanisms behind disorders and cell functionality. They aim to connect genes, proteins, and other biological structures, using this information to find correlations relevant to their research.
Problems
Finding the needed data often involves time-consuming searches across multiple resources, with users expressing frustration over limited data availability and the absence of specific tagging in many databases. The scattered nature of information across different sources also complicates their research, making it difficult to draw connections between proteins, glycans, and enzymes.
User Needs
Users require access to clear research summaries, direct links to primary data, and tools to help compare and validate their findings. Analytical and visualization tools are essential, as users need features that enable easier understanding and organization of complex glycomics data, protein structures, and connections between biological entities.
Fears
Users often worry about overlooking important data, spending excessive time searching, and potentially misinterpreting or missing critical findings in their analyses. They fear that without sufficient guidance or validation, their research outcomes might lack accuracy, leading to uncertainty about their interpretations.
Content
Beneficial content includes resources linking to primary research, curated publication summaries, and gene information relevant to disease associations. Users value visual data representation, particularly around glycosylation sites, protein interactions, and predictive elements that help streamline their understanding and research workflows.
Functionality
Key functionalities include a comprehensive glycan structure database, visualization and drawing tools, and cross-links to external resources. Users also need easy ways to ask questions, give feedback, and access support, helping to create a more seamless, user-friendly research experience.
Existing Solutions
Current tools include Google Scholar, UniProt, PubMed, GRITS, and GlycoWorkbench, which users employ for various aspects of data gathering, literature search, and analysis. However, the need for a more integrated solution remains unmet.
Context
Visual aids, such as glycan maps and references to cell types, provide essential context for users, helping them quickly grasp complex relationships. Tutorials, articles on methodologies, and resources to validate findings are also valuable, offering users a way to strengthen and cross-check their research processes.
Value Proposition
The most significant value for users would be a consolidated platform that combines data, analytical tools, and structured search functionalities into one user-friendly site. This streamlined approach would save time and offer a one-stop solution for researchers, connecting them directly to relevant information and resources, while providing intuitive guidance and support.
User-Centered Business Canvas for GlyGen
The GlyGen project focuses on solving critical challenges for researchers, biologists, and clinicians by centralizing and integrating data on proteins, glycans, and glycoproteins from multiple resources into a single, comprehensive platform.
Users face barriers such as lengthy data integration, fragmented scientific data, and difficulty locating essential information for research.
GlyGen addresses these needs by creating a streamlined solution that consolidates resources, saving users time and effort and providing deeper insights into biomedical processes involving glycans and sugars.
User Stories
Stakeholders and investigators conducted medical research and defined user stories in the following format: As a <role>, I want to <feature> so that <reason>. By adopting this format, the team prioritized features and aligned them with user goals effectively.
This approach provided a helpful tool for understanding users’ different types, unique needs, and motivations. It simplified the requirements by framing them from an end-user perspective, ensuring that the project focused on delivering meaningful, user-centered solutions.
Card Sorting
To better understand how users categorize and prioritize information, I conducted a card-sorting exercise. Participants were given cards representing key features, concepts, and data points, and asked to group them in a way that made sense to them.
This activity provided valuable insights into users’ mental models, helping to inform the information architecture and ensure the platform’s structure aligns with their expectations. Card-sorting is a crucial step in creating intuitive navigation, reducing cognitive load, and improving overall user experience.
User Empathy Map
To deeply understand users and their needs, I created three user empathy maps by analyzing what users say, think, feel, and do during specific experiences or interactions. These maps provided valuable insights into users’ motivations, frustrations, and behaviors, highlighting their immediate thoughts and emotions.
By focusing on these qualitative aspects, the maps allowed me to identify pain points and uncover opportunities for creating user-centered solutions that address real needs and align with user expectations. This process not only guided design decisions but also fostered empathy within the team, ensuring a human-centered approach throughout the project.
Personas
To ensure the design addressed diverse user needs, I created three detailed personas representing key user groups. These personas were developed by analyzing user data, including their goals, motivations, challenges, and behaviors.
By bringing these user profiles to life, personas helped the team stay focused on real user needs and guided decision-making throughout the project.
This process ensured that every design choice aligned with the target audience’s expectations, creating solutions that were both practical and user-centered.
Heuristic Analysis
Before designing GlyGen.org, I conducted a usability heuristic analysis of competitor websites, UniProt.org and GlyTouCan.org. This process was essential for identifying usability issues, assessing strengths and weaknesses, and understanding what worked well or poorly in their interfaces.
By analyzing competitors, I gained valuable insights into user needs and industry standards, which informed the design process. This approach ensured that GlyGen.org would not only address usability gaps but also provide a superior user experience, avoiding unnecessary features and prioritizing those that truly matter to users.
The Design Process
In this phase, I transformed research insights into actionable solutions, focusing on creating an intuitive and user-centered experience. By developing a Site Map and User Flows, I established a strong foundation for information architecture and seamless navigation.
Progressing through Low, Mid, and High-Fidelity Wireframes, I iteratively refined the layout and functionality, moving from initial concepts to polished designs. Additionally, the Style Guide ensured visual consistency and alignment with branding standards. This structured process ensured that every design decision addressed user needs while achieving the project’s objectives.
Site Map
Based on my research, I created a detailed site map to establish the structure and navigation for GlyGen.org. Initially, I sketched the layout by hand with pen and paper to quickly visualize the hierarchy and flow. Then, I refined and recreated it using professional software, ensuring clarity and precision.
This process was a key step in developing the information architecture, organizing content logically, and defining a seamless navigation framework that supports an intuitive and user-friendly experience.
User Flows
I created three detailed user flows based on my research to map out key user interactions and journeys.
I sketched the flows by hand with pen and paper to quickly outline the steps users would take to achieve their goals.
Then, I refined and recreated these flows using professional software, ensuring clarity and alignment with the overall design.
This process helped visualize the paths users take, identify potential friction points, and ensure a seamless and efficient user experience.
Style Guide
A well-defined style guide is essential for establishing a unified brand identity, streamlining collaboration among team members, and creating a polished, professional interface.
It serves as a single source of truth, ensuring that all design elements align with the project’s goals and provide users with a consistent and intuitive experience.
Low-Fidelity Wireframes
Low-fidelity wireframes are an essential step in the design process, as they allow for rapid iteration, quick feedback, and the opportunity to identify potential usability issues early. This approach ensures that the final design aligns with user needs and project goals before advancing to more detailed stages.
Mid-Fidelity Wireframes
Mid-fidelity wireframes served as an essential step in bridging the gap between initial sketches and high-fidelity designs for the GlyGen project. These wireframes focused on layout structure, functionality, and user interactions without the distraction of detailed visuals or branding.
By using mid-fidelity wireframes, I was able to test and refine navigation flows and interface elements early in the process. This stage is crucial for validating the usability and effectiveness of the design before committing to the final, polished version.
High-Fidelity Wireframes
Building on the foundation of low-fidelity wireframes, I created high-fidelity wireframes to bring the GlyGen platform closer to its final design. These detailed wireframes incorporated precise layouts, typography, and visual elements, giving stakeholders a realistic preview of the user interface.
High-fidelity wireframes are crucial for refining the design, as they allow for thorough usability reviews and ensure the design aligns with both user needs and branding guidelines. This step bridges the gap between concept and development, providing a clear blueprint for the final product.
GlyGen Usability Heuristic Analysis
After designing GlyGen, I conducted a usability heuristic analysis to evaluate its interface against established usability principles. This process involved identifying potential usability issues, assessing the design’s strengths, and ensuring it met user needs effectively.
By comparing the design to recognized standards, I validated its alignment with best practices, uncovered areas for improvement, and enhanced the overall user experience. Performing this analysis was essential to ensure the product was intuitive, accessible, and met the expectations of its diverse user base before its release.
Usability Testing
Usability Testing Overview
Usability testing is a critical step in ensuring the success of any digital product, particularly one as specialized as GlyGen, a scientific website designed and developed from scratch. Every aspect—web layout, color schemes, buttons, functionality, labels, and more—required thorough evaluation.
To achieve this, we invited glycobiologists worldwide to interact with the platform, providing honest reactions, feedback, and suggestions. This process allowed us to gain invaluable insights into how well the site functioned for its target audience, enabling us to refine the design and ensure it met their specific needs effectively.
Tools and Efficiency
To streamline the process, we used app.pageproofer.com, which made usability testing seamless and efficient. This tool allowed testers to pinpoint exact locations on the website and leave detailed notes, enabling precise and actionable feedback.
It also provided vital information about the user’s platform, browser, screen, and window sizes, ensuring that improvements were relevant across different devices and environments.
Task Outcome
After conducting multiple usability tests, we collected a wealth of feedback and suggestions from glycobiologists across the globe. This feedback was meticulously documented and reviewed to identify opportunities for improvement.
Implementation
Some suggestions were implemented immediately to address critical issues, while larger tasks and feature requests were prioritized for the next development phase. To maintain continuous improvement, we conducted three usability testing phases after every two-month web development cycle, with developers promptly updating the site based on the feedback.
Lessons Learned
The GlyGen project was a masterclass in collaboration, innovation, and the impact of user-centered design on complex scientific challenges. As the lead UX/UI designer, I had the unique opportunity to tackle intricate usability and design challenges for an international audience of glycobiologists.
Here’s what I learned:
1. Stakeholder and User Alignment is Key
Balancing the needs of stakeholders and end-users across four countries taught me the importance of clear communication and aligning goals early in the project. Every decision—big or small—had to reflect both the scientific mission and the practical needs of users. This reinforced my ability to create solutions that drive user satisfaction and business outcomes.
2. Data-Driven Design Enhances Usability
Conducting rigorous research, heuristic analysis, and usability testing underscored how vital data is in shaping impactful designs. The feedback loop from global glycobiologists guided every phase, proving that user input is an indispensable asset in crafting meaningful experiences.
3. Iterative Processes Build Excellence
We created a product that exceeded initial expectations by incorporating usability testing at every stage and iterating based on feedback. This iterative approach ensured continuous improvement and kept the project adaptable to evolving needs.
4. Collaboration Makes Complexity Manageable
Collaborating with over 15 investigators and a multidisciplinary team revealed the power of collective expertise. I learned how to coordinate with diverse teams, manage competing priorities, and translate scientific complexities into an intuitive platform.
Reflection
Working on GlyGen was an exceptional journey that showcased the impact of thoughtful design and collaboration in solving complex challenges.
As the lead UX/UI designer, I was able to apply a user-centered approach to create a product that meets the needs of an international audience of glycobiologists.
This project taught me the importance of flexibility and continuous improvement, as insights from research and usability testing guided every phase of the design process.
It also reinforced the value of communication and teamwork, with contributions from stakeholders, developers, and users shaping the outcome. Reflecting on this experience, I take pride in how GlyGen evolved into an intuitive and impactful platform that supports groundbreaking scientific research.
This project not only strengthened my design and problem-solving skills but also deepened my understanding of creating user-focused solutions that drive meaningful results.
Why Hire Me?
Designing GlyGen wasn’t just about creating a functional website—it was about solving real-world problems through design.
This experience strengthened my skills in research, stakeholder collaboration, and usability-driven design, equipping me to lead future projects that demand strategic thinking and a user-first approach.
Hiring me means gaining a design leader who thrives on solving challenges, driving innovation, and delivering results that matter.