We Care Project Image

GExplore

ABOUT THE PROJECT

Design for Bioinformatics

GExplore is a bioinformatics database and tool for genome-scale exploration of gene and protein functions in the C. elegans model organism. Originally launched in 2009 by Dr. Harald Hutter and colleagues at SFU’s Biology Department, and has supported research for over a decade. I joined the project to contribute to the design and front-end development. Collaborating closely with Dr. Hutter and Mehrdad Moosavi, we enhanced the user experience, presenting data in a more accessible and visually engaging way.

ROLE

User Experience

User Interface

Front-End Development

Visual Design

Interdisciplinary Collaboration

CLIENT

Dr. Harald Hutter

Simon Fraser University

DATE

May 2024 - November 2024

GExplore Home Page

GExplore landing page.

01

Insights and Problems

Accessibility gap in bioinformatics data

Certain valuable datasets are not easily accessible from existing centralized repositories, highlighting the need for optimized and updated datasets for comprehensive analysis.

User Experience overlooked in scientific tools

Bioinformatics tools often prioritize functionality over user experience, yet an intuitive and multi-functional user interface is key for efficient data extraction and exploration.

The importance of meaningful data presentation

Proper selection and structuring of data is essential, but presenting data in a clear and interpretable way is equally important for researchers to draw meaningful insights.

02

Model Organism

Fun fact:
C. elegans research leads to Nobel Prize in Medicine

The 2024 Nobel Prize in Medicine was awarded to Victor Ambros and Gary Ruvkun for their groundbreaking discovery of microRNAs' role in gene regulation, using C. elegans as a model, which has fundamentally advanced our understanding of gene expression and disease.

03

Significance

Designed for experimental planning of genome-scale experiments

GExplore is a tool to quickly obtain an overview of biological and biochemical functions of large groups of genes with a certain combination of features for further experimental analysis.

Journey Mapping 1

Overview of GExplore.

04

Databases

Six databases

Gene, mutation, protein, and three genome-scale expression databases that collectively provide a quick access to selected data sets.

Gene Database Mutation Database Protein Database
Expression Stage Database Expression Tissue Database Expression Embryo Database

GExplore database cards graphic design for the home page.

05

Visual Identity

Reflecting GExplore's core

The GExplore logo is inspired by the shape of the model organism C. elegans, a nematode worm extensively studied in genomics research. The logo also incorporates a subtle representation of a DNA molecule, reflecting GExplore's focus on genomic data and biological research.

Journey Mapping 1

GExplore logo

Defining a modern design system

Established design rules and guidelines for typography and colors used in the GExplore platform, ensuring consistency in future updates while maintaining an innovative and scientific approach at its core.

TYPOGRAPHY

ECU Visual Identity

COLORS

#0D47A1
#1E88E5
#64B5F6
#E3F2FD

06

Search Page

Form field help text

Each search page includes help icons. Clicking an icon displays concise help text to guide users in filling out the field. For more complex searches, users can access a direct link to the help page.

Autosuggest functionality

Text-based search fields feature an autosuggest capability, helping users quickly identify suitable search terms.

Search button activation

The search and clear buttons are in a sticky container for visibility. The search button activates once a valid input is provided in any field, signaling readiness for a search.

Gene search page user flow for identifying genes linked to neuron tissue expression and cognitive disorder disease association.

07

Display Page

Interactive sidebar

The display page includes an interactive sidebar with four features: search summary, display options, export tools, and help. The collapsible design maximizes space for the result table, enhancing usability.

Demonstrating the interactive sidebar functionality on the display page.

Easy table navigation

The display interface is optimized for multi-gene analysis, with customizable columns, column reordering, full-screen plot viewing, and smooth table navigation for efficient exploration.

Navigating the result table of the expression dataset, one of GExplore's most cited databases.

08

Help Page

User-oriented flow

The help page has been consolidated for new users, featuring a clear structure. It follows the user workflow and provides detailed guidance on search inputs and customizable display options.

The help page interface designed with a continuous and intuitive flow.

09

What did I learn?

Being even more collaborative

Remote work demands greater collaboration than in-person settings. This allowed me to better understand the creative process I needed to follow in order to create meaningful work.

Efficient scientific tools

Bioinformatics tools are critical for research. Interfaces must focus on simplicity and efficiency to help scientists access and analyze data for further experiments and projects.

Attention to detail matters

Interdisciplinary projects require clear communication. Translating client needs into design demands thoughtful planning and precise execution.