The Company
Vaultree was a company building developer-facing solution for database encryption. This tool ended up serving as an interactive component of our documentation to support customers.
The Problem
When testing Vaultree's solution, customers would often struggle due to their existing, unsupported code. Checking their code's compatibility with the Vaultree solution was tedious prior to the invention of this tool.
My Role
I was the sole Product Designer at Vaultree, and as such I took on all product, UX, and UI design for this project. I collaborated closely with our phenomenal Front-End Engineer, and Head of Product.
Goals
As part of creating elegantly branded and highly functional documentation from the ground up, we need to alert users to unsupported queries, and readily offer solutions to remedy the issue. I also wanted to support users who need to perform quick visual scans for information, and promote focused work for the users who need to hone in on the details of a single query.
The Process
The Idea: Supporting Sales
Initially, this project was undertaken with the goal of supporting Sales. Sales was on the front lines, encountering customers' struggles as they attempted to implement our solution using unsupported code. In an effort to remedy this, the Head of Product proposed that I design a solution that would allow customers to check their code for compatibility before going through with implementing the Vaultree solution.
The Questions
After being given the project brief, I posed these questions to clarify the project needs and scope.
• What will motivate users to check their code using this tool?
• Will they already have encountered an error or failure?
• Will they be informed that they should use this tool before implementing our solution?
• How large of a code block will users be pasting into this tool?
• How long of a description do we want to provide for each query?
Design 1. Minimal Detail Text
This design is strictly a table, and doesn't allow for allow for much explanation about the details of support. After pasting, the text would be highlighted in red (unsupported), yellow (partially supported), or green (supported). Creation of this design allowed the team to decide whether they wanted detailed text available on this page.
Design 2. Longer Descriptive Text
This design allows for longer descriptive text, explaining the nature and extent of our support. This is made possible through expandable sections of text for each of the queries listed. This design explored how it would feed if we added more detailed text to the body of the page.
Post-Feedback. The Redesign
After discussing with our Front-End Engineer, Sales, and Head of product there were several points of feedback.
1. Eng and I came up with the idea that of dials that allow users to see how much of their code block was compatible.
• You can see them to the right, above the text box.
2. We also decided that a button to submit the code was a good addition that would allow for edits to be made.
• You can see the button - taken from my custom rebranded version of Google's MUI designs.
3. I was informed that we needed to allow the user to select which MySQL version they are using.
• To do this, I put a chip in the upper right-hand corner of the text box.
4. By interviewing the Engineering team, I learned that it would be valuable for our users to pursue further information.
• I addressed this using a link beside the brief, expanded description in the table.
Results
By building this tool succeeded in taking a tremendous burden off of the Sales and Engineering teams, who would be forced to provide much more customer support than should be within the scope of their roles. Unfortunately, we did not have any new customers after the creation of this tool, so no users were available to question nor analyse.