Problem Space & Project Structure
The gEAR portal is a very powerful tool with a vast library of datasets. The tool has great functionality and can perform complex gene analyses. However, the website appears dated, and is not user-friendly. Our over-arching goal was to make the website easier to understand and use as well as work on the aesthetic of the interface.
We identified three main issues with the existing website:
✦ Users are confused & overwhelmed when they come onto the homepage.
✦ Users are unaware of the features of the tool and how to use them.
✦ The website appears dated and doesn't reflect the capabilities of the product.
We followed the Google Ventures Design Sprint Framework. While a sprint is typically conducted over the course of five days, we used a five-week structure wherein each week of the sprint is dedicated to a different phase.
For each sprint, we identified a different goal for each five-week sprint. While we initially began with following the sprint structure strictly, we eventually loosened it up and altered it to fit the project’s requirements.
Sprint 1 - Onboarding Page & Dashboard
Sprint 2 - Comparison Tool
Sprint 3 - Gene Expression Search
Sprint 4 - Visual Design & Design System
Sprint 5 - User Testing & Handoff
Preliminary Research
Before we went to our sketchbooks to redesign the product, we conducted some preliminary research based on the information that was already available to us.
Heuristic Evaluation
→
Expert Interviews
→
Reviewing User Test Data
→
Market Research
→
How-Might-We's
Heuristic Evaluation: We began the research process by conducting a heuristic evaluation of the gEAR website. This was an important step for us to not only pick out with usability issues existed on the website but to also familiarize ourselves with the platform.
Expert Interviews & Site-mapping: The gEAR team was very involved in the process and we had the opportunity to talk to the different members of the team to be able to understand the working and the usability of the tool. We started by creating an initial sitemap. Since we were not domain experts, the sitemap helped us understand the actual functionality of the tool. We were also able to gather some notes on the more nuanced functionality of the tool.
Reviewing User Test Data: The gEAR team had a repository of data from user testing they had conducted recently. We did a thorough review of the repository and picked out the relevant bits of data that helped us identify the different problem spaces that significantly affected the user flow.
How Might We's: On basis of the data we gathered, we started working on the different How-Might-We’s and categorized them on basis of the different overarching issues we identified.
Defining the goals
Based on the background research we conducted, the problems we identified were –
1. The homepage is too confusing for a new user and they are unable to navigate through the portal.
2. The tools are not as user friendly as they could be.
3. The website requires a visual overhaul
We therefore identified three major goals for the project –
✦ Restructure the onboarding and homepage experience
✦ Redesign the tools on the platform to make them more user-friendly
✦ Create a new visual language and design system for gEAR
Onboarding & Homepage
The major issue we identified with the existing homepage of the website was that it was too information dense and had no hierarchical structure to it. New users were confused and overwhelmed by it, while experienced users didn’t use most of it and had no way of resuming their ongoing work. The way we tackled this was to separate out the homepage into two – an onboarding page, and a dashboard.
The onboarding page would work as a precursor to the website that explains the platform and its capabilities to a new user. However, once logged in, the user would go straight to a dashboard, where they can access their ongoing work, as well as the search tools that work as a starting point ot the rest of the tools.
The Dashboard where users can access the available tools and resume ongoing work
Tooltips on the dashboard to guide the user
Comparison Tool
The comparison tool allows users to quickly compare between two different conditions or cell types within a single dataset. We conducted some initial user interviews to gather data about how users approach the tool and what hurdles they face. Our key findings were –
1. Some users confused the comparison tool with the multigene curator
2. Users tried to navigate to the comparison tool via dataset explorer
3. Most users did not use the plot controls on the graph
4. New users were confused about what was being compared and what data they can get out of it
5. Users weren’t sure how the highlight genes works
6. Users struggled to unselect genes once they selected genes on the plot
Overall, to make the tool more usable, we made the following changes –
1. Broke the process down into steps with clear prompts for each step
2. Added tool tips on the tool page that could help a user if they were stuck
3. Made it easier to edit the search conditions once the result was plotted
Gene Expression Search
Gene expression search is the main feature of gEAR that researchers use to find how gene is expressed in certain datasets and it is the entry point for major analysis tools of gEAR - the most frequently used feature.
We had findings from our previous sprints to rely on before we began working on this problem. Some of them were –
1. Users were confused about selecting a dataset group to search within
2. Users were unaware of the terminology of dataset profiles and gene carts and did not understand how to user gene carts
3. The search filter icons were confusing and not clear enough
CHALLENGES
Tackling a search tool was one of the most challenging goals we had over the course of the project. We worked on multiple iterations of the search after completely scrapping two options after the mid-sprint meeting. Search is something that people use all the time and therefore any kind of inconsistencies or usability problem really stands out. Additionally, since search has been around for so long, it has become very standardized. However, adapting that standardization for a search feature with all of these options was a little difficult. Eventually, we were able to come up with a format that users reacted to positively.
Design System
Lastly, during the developer handoff phase, we tried to create a thorough documentation of all elements within our design system. We ensured that each variant had clear and well-defined use cases documented. This meticulous documentation ensured that the design system could be effectively utilized by the development team.
Link to the complete design systemUser Feedback
Over the course of the project, we conducted a vast range of user interviews and usability tests. We were not only able to work iteratively change the things that didn't work but we also received a lot of positive feedback to validate our designs.
Some of The Positives
✦ Users felt the website appeared cleaner and better organized. They were able to use and navigate through the portal better.
✦ Users thought splitting the layout into steps made the comparison tool more intuitive and much easier than before and liked that it was a bit more guided.
✦ They found the redesign of the tools more intuitive, straightforward and easy to use.
Some of The Possible Improvements
✦ Some experienced users found new interfaces and jargon a little confusing and may require further documentation.
✦ Some users suggested a 'what's new' section that would clearly explain the changes on the website.
✦ The search bar with the “OR” wasn’t immediately obvious to some users and would require some more time to explore the interface to get used to it.