Metis-Query Analyzer

Client

Metis.data

Team

Amit Cohen - Metis PM
Avia Fucks -UX Team Lead
Myself - UX / UI Designer

Deliverables

- Wireframes
- Figma files for development
- Animated Prototype

The Problem

Users are missing out on the opportunity to learn how a significant part of Metis.io values to developers by not utilizing the ‘Query Analyzer’ feature, causing confusion among users regarding the feature values.

The Goal

- Understand how users interact with the Query Analyzer and their pain points.
- Increase user Overall satisfaction
- Decrease abandonment related to JSON generation
- Increase the number of users using the feature weekly.
‍

Thing to Notice
‍Metis has recently had an overall UX UI redesign. Significant parts of the product have changed in terms of navigation and hierarchy. After much of the UX had changed, a new UI concept was implemented quickly. Redesigning the Query Analyzer feature was part of our overall UX and UI design process. View more details on the Metis UI Redesign case study.

Metis.io Overview

Metis is a comprehensive database management solution that helps developers and DevOps teams efficiently manage databases. It facilitates preventive measures by identifying and addressing database-related issues during development and CI/CD, ensuring code stability before deployment. The platform offers advanced monitoring capabilities and clear insights into the root causes of problems for quick issue resolution.

What is the query analyzer?

The Query Analyzer is a feature inside of the Metis app, that developers can check for potential issues regrading their Query in their database, get insights about the query performance, usage and offers a remediation plan if needed. The purpose of this feature is to get developers to test Metis capabilities without the need for them to integrate with their product first. For that reason, it has a significant part in Metis product.

Current - Users need to paste their Query and then generate the Plan(JSON)

After inputs filled (This process takes on average 14 Min)

Understanding the problem

We utilized a data matrix, interviews, and observations to identify the main problems and pain points faced by users. Our findings revealed that in order to use the query analyzer, users are required to fill in the inputs or select an example from the dropdown menu. However, most users failed to notice the examples dropdown or felt overwhelmed while figuring out how to generate their JSON. In addition, some users seem to be confused about the feature and where it begins.

🔴

Examples Dropdown Discoverability

The Examples Dropdown has a significant impact on the user flow as it allows them to fill the inputs automatically and experiment with the feature to its full potential. Unfortunately, it was placed at the bottom of the page and out of context, which made it difficult for users to understand its purpose and interact with it.

🔴

Generating The Execution Plan (JSON)

Users require assistance in generating their JSON. Currently, when users click on the 'Read More' link, they are directed to the entire Metis documentation and have to search for clues about the query analyzer. This process has been causing frustration and leading to abandonment of the feature.

🔴

Lack of Visual Guidance & Actions Buttons

Users needed clarification about the initial steps to start using the feature due to unclear instructions. Inputs did not include an action text guiding users on what they were supposed to do.
After filling in the inputs fields, users were unable to clear them and had to manually delete the content in order to start over.

🔴

Lack of 'Analyzing History'

Users are currently unable to access their analyzing history and have to repeat the entire process every time they want to review their previous analysis.

Initial Design Actions

Since our initial request was to create a user-friendly solution that would be clear to users when using this feature, we started to ideate and iterate on design concepts. Through collaborative efforts and feedback loops, we refined the interface, incorporated intuitive elements, and established clear user pathways. Here are the main design actions that we implemented at first.

🟢

Clear Pathway

We have given users the choice of two selection options, which can be selected using a radio button. The first option enables the user to explore the Query Analyzer with the help of the Examples dropdown, which will instantly fulfill their desired purpose. The second option allows the user to manually analyze their query. This helps users understand that they only have two options to choose from, and guides them through the process.

🟢

Clear Execution Plan (JSON) Instructions

We have implemented an accordion with the main instructions instead of the link to the Metis documentation so users wouldn't have to link out of the app and start scrambling around.

🟢

Feature Awareness

We have made some changes to the page. Firstly, we added a sub-text that explains the purpose of a particular feature. Secondly, we moved the "Read More" button from the JSON input to next to the sub-text. The new button now reads "For more information, click here" since it is a general document.

🟢

Adding 'Analyzing History'

We have added a 'Show History' button, which leads to a sidebar displaying the user's past analysis.

Client's Feedback

We received approval for our suggestion but we were asked to make few more changes before the UI design.

⚠️

improve the 'Analyze My Query' selection to make it more appealing to users.

⚠️

Explore alternative solutions for the 'How to Generate' accordion.

⚠️

We were advised to maintain consistency with the current input size and measurements.

UI Design

The design shown here is the current Query Analyzer' UI design I led with the same UX principles throughout this project. For more details about the overall Metis UI redesign, please refer to metis UI case study.

Before

After - In the UI, we have replaced the radio buttons with a selection cards and added a ‘recommended’ badge in pale green to draw users attention.

When the user selects 'Use our examples', the dropdown menu instantly opens allowing the user to promptly make a selection.

The accordion with 'How to generate a JSON?' has been replaced with a modal that contains a short tutorial video and step-by-step instructions.

Prototype

Click on the prototype below to experiment with the latest query analyzer feature design.

Success Mesures

After implementing the redesign of the feature, we collected feedback to assess the impact of the changes. Here are the main results:

User satisfaction ratings
improved to

Abandonment related to JSON generation decreased

The number of users using the feature at least once a week increased by

Task completion time decreased by
‍

Overall, the redesign of the feature resulted in significant improvements in user experience, usability, and satisfaction. The implemented changes successfully addressed the identified issues, leading to a more user-friendly and efficient feature that better meets the needs of developers seeking code remediation.

Key Takeaways

This project taught me that although Metis product is for developers, we cant expect them to know how to use it intuitively. I have learned that always keep asking questions because you might find an even better solution. Additionally, I learned that client and product requirements are not constraints, but opportunities to be creative, and that even small changes can have a significant impact on the user's experience.

UX UI Case study

Metis

Task completion time decreased by 48%