Praxi Data is a big data startup that has an automated data catalog pre-trained by experts. It accelerates workflow for AI model training and builds better curriculums faster.
When the user needs to add a new term to the catalog, he will start a new term creation process, where the term name, description, synonym, effective and retire date, and some other conditions will be defined. We used to employ the inspector panel solution for creating new terms. However this solution is no longer sufficient for future new term creation experience. So I redesigned the experience, the inspector panel was replaced with the wizard experience, in order to increase the capacity and convey our aesthetic and minimalist design.
The inspector panel solution was no longer sufficient for future new term creation experience. The inspector panel had limited space for rich content. Some new terms require more than three steps to complete. Meanwhile, there were too many components in the small area, such as steppers, data vis, inputs, and etc., which overwhelmed the user. The design team needs to find a new way to create new terms.
I redesigned the new term creation process, using wizard experience to provide guidance. Wizards can split a complex process into multiple steps which simplify the pages — they contain fewer fields and overall less information, which will increase the capacity and convey our aesthetic and minimalist design.
In order to find problems and make the improvement, I used the Heuristic evaluation method to examine the interface and judge its compliance with recognized usability principles (the "heuristics"). I made a checklist and scaled each principle from zero to five. The higher the score, the more in line with the design specifications.
The current inspector panel design got lower scores on many heuristics. Below are the score and the comments of some principles.
The form has six steps including the summary. Users need to fill in the information in each step to complete the new term creation. I reorganized some of the forms to make the content more logical and in line with user habits. Two steps were added due to the backend needs, which gave me a design challenge. I will talk about it later. The infographic below shows the multistep form information architecture.
Due to the backend technology, more content needed to be added to the form. When a new term is added, a series of questions will be asked after the matching step, and their formats are checkboxes, select elements, or input answers. The challenge for the design team is how to arrange the new content to guide the user to smoothly complete the new term process without being misled or overwhelmed.
I split the content into two steps, one was “Define” and the other was “Locate”. In the “Define” step, questions were designed in different forms. To enable users to make appropriate operations, I divided the questions into three parts by the form logic.
I created the full browser wizard experience to replace the inspector panel. The electronic form is a direct descendant of the real world paper form: a page with empty fields that the user needs to fill in. The wizard is the main application that takes the user through a sequence of forms. The step-by-step process allows users to input information in a prescribed order and in which subsequent steps may depend on information entered in previous ones. It is a good match for the new term creation.
In the “Define” and “Locate” steps, the questions vary depending on the answers from previous steps. For example, a new term under risk report class has a suggested status and high confidentiality, set in the first step, Business. It may only have two checkboxes and none dropdowns or inputs in the Define step. However, another term with low confidentiality might have more checkbox options, multiple dropdowns, and inputs. As the user enters information, the system computes the appropriate path for that user and routes the user accordingly.
Because wizards split a complex process into multiple steps, the pages are simpler — they contain fewer fields and overall less information, which will increase the capacity and convey our aesthetic and minimalist design. Users end up being less overwhelmed by the process.
More screen real estate is available for each step for the wizard experience. When a complex process is split into more straightforward steps, and each step gets a separate page, there is simply more space for each of the controls in a step. Targets can be more salient and less crowded, and information may fit on a single screen. Items now have been grouped into logical zones, and headings have been used to distinguish between zones. This is particularly evident in the “Define” step. The right side now has space for the helper text, which provides assistance on how to fill out a field.
Sometimes, done is better than perfect. I tended to get bogged down in details, focusing on the functionality of a part of the system, instead of looking at the big picture. I’m working in an environment where time counts. Both my time and energy are limited. I learned to apply this to my own work: creating cool results can be really simple, done in a few cycles and absolutely satisfy every single of the users needs. The deliverable successfully solves the problem, addresses the need, or conveys the message intended. Then I can prepare the next step and iterate.