May 2023 | Client Project
gEAR
About
gEAR (Gene Expression Analysis Resource) is a PaaS application used by researchers to analyze Gene Expression in EAR related genes.
Role
UX Analyst+Designer: Responsible for UX Debt Analysis, A/B Testing, Sprint planning, User Journey Design and Design System integration
Duration
10 Months
July 2022 - May 2023
Problem Statement
Why are users requesting extensive tutorials?
gEAR, the web application developed by a team of researchers and developers at the University of Maryland School of Medicine, has undergone continuous changes over the past 8 years. However, as it has evolved, its complexity has increased, resulting in the current state of the platform with a high churn rate. By improving the UX Debt we hope to Increase user satisfaction, increase retention rate, improve performance metrics (server response time, error rates) and improve new user & feature adoption.
Project Roadmap
Project Roadmap
To tackle the challenging task of working on a technically complex PaaS platform, I began my process by gathering project requirements and limitations to create a project roadmap, ensuring we meet our goals on time.
How did we do it
Process Summary
Click on the following links to quickly navigate to a deep dive on each of the process steps!
-
Documentation Study
-
User Personas
Phase 1: Analyze
We were provided with performance metrics, user data and app revision history to understand the evolution of the platform. We used this phase to conduct a thorough analysis of the platform.
​
-
Search Functionality
Phase 2: Design
Due to our time constraints and high-volume of tasks, we decided to be Agile and conduct Design Sprints to create high-impact solutions for meeting our goals.
-
Surveys
-
User Testing
-
Stakeholder Interviews
-
Handoff
Phase 3: Validate
To understand if our solutions are meeting the intended goals, we created extensive guidelines for surveys and user-tests for the platform. Along with that, we also conducted a few user tests on the high-fi prototype and documented the outcomes.
What did we implement?
Prototype
Though there was generation of a number of ideas for the platform, we narrowed it down to the following elements for the initial implementation, to be launched in 2024. Click through the prototype to check it out!
Reflection
Project Wins
This project helped me grow in the following ways:
Client buy-in is important
From the get-go, the gEAR team had mentioned their trepidation in working with product designers, stating they didn't want something that was just white spaces but did not really function. From that moment I knew we had to focus on making sure we keep the gEAR team involved in our process. Thus, I made sure our project plan included regular meetings and brainstorming sessions with the client team (sometimes one member at a time) to share our process and insights, helping us gain their trust by making them a part of the process.
Scopes can evolve
As time went on our understanding of the platform grew. Due to this, our scope evolved slightly with every design sprint. Hence, I decided to move our design-system work to the end, focusing on the functioning of the platform through user testing and iterations first. This helped us stay efficient, for eg. in the final stages of the project we were able to test our iterations while testing user response to the implementation of our design system.
Deep Dive
The following sections go deep into understanding the problem , the process , the insights and the final outcomes .
Phase 1
Analyze and Ideate
Heuristic Evaluation
We conducted an in-depth Heuristic Evaluation of the platform using Jakob Nielsen’s 10 usability heuristics, finding inconsistencies in Buttons, links, and visual styling, animations, and scrolling effects, and user journey. We also found an overall lack of focus on accessibility (contrast, visual focus indicators, text alternatives, etc.), and major gaps a clear visual hierarchy of the platform. ​
What are the users and stakeholders saying?
We spoke with 10 new users and 8 experienced users and collected data from 150 surveys conducted during the initial stages of the study. We also spoke with the developers who designed and coded the platform. Following points stood out:
User Journey Analysis
I studied the qualitative user data we collected and the quantitative data provided to us by the gEAR team to create a user journey map, to understand how we can optimize and improve the customer journey.
So what are we designing then?
Create an onboarding and Guides for tools to improve user orientation & engagement.
Redesign complex platform tools into a format that is more intuitive. Currently users are confused about the steps of their analysis, and why they keep getting errors.
Redesign local search to show the scope of the search visually to users. Currently users are confused about what they are searching within.
Redesign platform's navigation, for easier tool access and visibility. Users need to be able to switch between tools.
Future Scope: Expand user account functionality by allowing users to save analysis progress, and share with others.
From our Analysis, we created a plan for the next phase of our project, deciding on what needs to be done on priority to have the maximum impact on the UX Debt of gEAR. Other than these action items, we also knew we needed to create a Design System on priority, to allow the client to build it on React framework, optimizing for future growth.
Going deeper to ideate
To kick off our design phase, we did extensive white-boarding to map out user interactions with the current platform, what issues users had with it (as expressed in their surveys, interviews and as apparent from the Hotjar data we were provided), and what possible solutions we need to come up with over the next few months of back-to-back sprints.
Home: What should the home page look like? Should it just be a search bar, since that is the starting point for most tools?
Data storage: Can we create save-able assets so that users can either resume their analysis or even take the output from one tool as the input for a different one?
Analysis: How do we display the results of an analysis, while allowing users to make changes to whats visually represented on the graphs in real time
Phase 2
Design
Onboarding to orient users to the unique platform
Our aim was to create a space that increases users' familiarity to the platform's tools , significantly reducing the learning curve associated with complex platforms. It needs to offer returning or expert users the opportunity to explore new tools and tutorials, enhancing their experience and encouraging deeper engagement. With this strategic approach we aim too improve user satisfaction by reducing confusion, promoting platform adoption.
​
The gEAR team had explored different solutions to make the platform easier to understand, using extensive YouTube tutorials and step-by-step documentation and guides, but users did not find them engaging. We felt the need to onboard users, helping orient them to the platform by engaging with them, rather than having users follow instructions from videos or slides.
Research
I dove deep into the Hotjar data to understand which of the YouTube tutorials/Documentation assets did users access most often, and which parts of the platform the users expressed the most amount of confusion in. I also looked at other complex platforms and how they onboard their users (market analysis). Sharing the market analysis with the client (gEAR) team helped us communicate our ideas, and get their insights on them.
A deep analysis of the onboarding experience for complex web platforms like Hotjar, Observable, MailChimp, GitHub, Glitch, New Relic and more
Sketch + Decide
After presenting my research to the client team and getting their insights on our ideas, we jumped into sketch mode to decide on the sections. I also made the clients a part of this phase by presenting them with the sketches, and getting more of their insights. The onboarding was divided into these sections: Value prop + CTA, User Profile Setup, Intro to features, Guided Tours, Social Proof, About gEAR+Contact (footer). The client mentioned the need for a section to highlight sponsors, which was then added.
Exploring the concept of having users directly perform their analysis from the onboarding by giving them the gene expression search functionality there. Since we wanted this space to also inform users about the different tools on the platform and its capabilities, we decided to use that space for introducing features instead.
The final onboarding flow using Design System components:
The onboarding flow you see here is an example of the guides that were created for all the different tools of the platform. This particular guide focuses on onboarding the user to the new gEAR dashboard. Once the user is onboarded, the same guides can be accessed from the dashboard as well.
Navigation and Home
From the user analysis, surveys and UX analysis of the platform, we brainstormed a few ideas for how the Home of the app should look like. Some of our initial explorations focused on: How might we increase visibility of the various features and tools offered by gEAR, providing users a centralized access, How might we ensure that the interface can accommodate growth, like new tools and features and How might we provide users with a holistic view of their work.
Some examples of the wireframes we created to understand how we can structure the navigation of the platform. We created 3 different homes and navigation for the platform and tested them with a few users before deciding on the side navigation with a dashboard.
Why side navigation?
I created a map of the entire platform to understand the underlying structure. Using that information, we created a new information architecture that can be supported by a side navigation and a dashboard. We created navigation & information hierarchy to support the complexity of the platform.
We needed a navigation with visible, accessible menus that optimize screen space due to the high information density of the dashboard. A side navigation can organize information hierarchically, ensuring clear structure and consistent navigation across pages. With scalability and flexibility, it accommodates extensive content and adapts to user context, improving efficiency by allowing quick context switching.
Why a dashboard?
We needed a navigation with visible, accessible menus that optimize screen space due to the high information density of the dashboard. A side navigation can organize information hierarchically, ensuring clear structure and consistent navigation across pages. With scalability and flexibility, it accommodates extensive content and adapts to user context, improving efficiency by allowing quick context switching.
After the onboarding, users can still access quick guides from the dashboard, including guides for new tools.
User testing on our mid-fidelity prototype revealed the closed hamburger side navigation as default wasn't effective. Keeping the menu open helps users navigate the new dashboard and its tools.
The gEAR team noted that both dashboard searches were treated equally despite differing functionality. The gene expression search bar was too small to accommodate most dataset names.
Users access personal datasets here. The gEAR team suggested this section should include all customizable assets, like gene lists. User testing on the mid-fidelity prototype highlighted the need for a resume work section, so we included it here in our iterations.
We also tested this version of the dashboard and found that users responded better to an open menu, with the tools clearly visiable
We also wanted to see how users responded to having a resume my work section take up more space, by putting the guides under the help page instead.
This platform version displayed dataset groups with names and images of the analysis, but users preferred reading complete group names. Images didn't add valuable info about dataset groups. Hence we changed it to a list format.
With the help of the gEAR team, we were able to group the tools and make a visually clear side navigation system that supports future growth. As more tools are added, the menu becomes scrollable.
We opted for a longer search bar with more space for genes, and gene lists.
We added functionality for making your own gene lists directly from the dashboard in response to user feedback.
Design System to accommodate growth
The gEAR design system was created to mitigate the UX debt by establishing cohesive standards for UI components, layouts, and interactions, ensure consistency across the platform, streamlining overall user experience. By providing reusable elements, we wanted to expedite development and reduce inconsistencies, fostering product engagement and loyalty.
Typography
.jpg)
The gEAR team were a vital part of the design process. They expressed the need for a font that is most commonly used in data analytics platforms, and has versatility in terms of styles.
Color
Insight: The gEAR team expressed a deep connection to the use of purple for their portal. Hence, we decided to retain and expand it as our primary color.
Building blocks
We created buttons, tabs, chips, tooltips etc to bring standardization to the visual design of the portal. Since the gEAR team wants to use the same design system with different color variants for other sister portals like NeMO Analytics, we wanted to give them elements that can be reused to create a unified brand language.
What was the response
User Testing
We created a user text plan and a prototype to conduct 45 min long user tests. These were our final insights:
What did the users like?
The positives
Overall, users liked the new interface and found it much more intuitive.
-
We found that they had a much better understanding of the portal on being Onboarded.
-
Users were curious to try more tools that gEAR had to offer, and expressed that they wished our prototype had more user flows.
"Feels cleaner. The information seems more accessible. "
What are the users missing?
The work-ables
During our user tests, we found that our two user personas had very different suggestions on things we can work on.
-
Novice users thought that they would like to see more about who is using the portal and where it is being cited, to know more about what kind of researchers might upload different datasets onto the portal.
-
Experienced users found it hard to adapt to the new search bar sometimes due to the changes we made to key terminology. We suggest that rolling out some changes slowly can solve this issue.
"The gene list looks like a dataset that I am searching within and not a gene list. I don’t know how to make that distinction"
What could we have done differently
Client feedback
We created a user text plan and a prototype to conduct 45 min long user tests. These were our final insights:
What did the client like?
The positives
-
Overall, clients were impressed by the impact we had on gEAR as a platform, and are currently working on implementing the new designs.
-
Due to our contribution to to the product, the gEAR team also chose to continue working with other design teams to further refine additional user flows
-
The client also chose to re-model other sister platforms like nEMO Analytics based on the framework created by us.
"We want to implement your work asap, to attract new users and funds!"
What did we change on feedback?
The re-dos
During our whole journey, we made changes to our designs on the basis of client feedback.
-
The client realized a need for different color ways to give users the option of customizing the platform. (high contrast, dark mode and light mode)
-
The client ran into some difficulty with the handoff as they were unfamiliar with Figma. We were able to successfully provide resources and fill in gaps with extra information for a smooth handoff.
-
The clients felt the need for custom iconography for the portal, but it was out of scope for the length of the project.
"I think we need a dark mode too. I have received that feedback in the past. Can you make an option for that too?"