ThinkData Works
Redesigning the source creation form to make data more accessible to non-technical users.
Role
Lead Designer
Timeline
6 weeks
Team
1 Product Manager / Engineer
Organizations use the source creation form to connect to data sources so they can import datasets for analysis. Because data democratization (i.e. making data accessible to non-technical users) was a pillar of ThinkData’s business strategy, I was tasked to make the existing source creation form easier to understand.
Context
Existing source creation form
Form inputs were re-ordered and related inputs were grouped to create visual hierarchy, making it easier to scan and complete
Helper text was provided for technical inputs, making the form easier to understand
Summary
When I worked at ThinkData, the B2B startup had no user research function. Nor was there any data on the form’s current performance.
Constraints
Because of these constraints, I relied on assumptions to define the problem. I used UX heuristics, competitive analysis, and stakeholder interviews to validate assumptions and make design decisions.
Design process
Problem DefinitionUsers must select a data source credential to complete the form. In the current form, if a credential does not exist for the source, the user must cancel the source creation process, create the credential in a separate workflow, and return to start the form again. I assumed this negatively impacted form completion rates.
The form has low completion rates
Existing workflow — Source and credential creation are in separate workflows
To validate this assumption, I was encouraged to see how our competitors dealt with credentials. Our existing workflow was not consistent with our competitors’. Typically, sources and credentials were created in one workflow.
Competitor workflow — Source and credential creation are in one workflow
I also assumed the form was difficult for non-technical users to fill out because there was no visual hierarchy. To validate this assumption, I spoke with an engineering stakeholder on my team. Together, we realized related inputs were not grouped together.
The form has no visual hierarchy
Existing workflow — Related inputs are not grouped together
Early DesignMerge source and credential creation into one workflow
Group related inputs
Design objectives
New workflow
I first validated that I could design a solution for the design objectives. In the minimum viable solution, related inputs are grouped together. Additionally, in the Credential select menu, I added an option for users to create a credential if there are no existing ones to select from.
Minimum viable solution
Minimum viable solution — I first validated that I could design a solution for the design objectives
Once I knew I could meet the design objectives, I explored alternate solutions. Here, I grouped inputs into accordion cards that expand and collapse. Each input comes with helper text that describes what information is required from the user.
Alternate solution
Alternate solution — Inputs are grouped into accordion cards with helper text
Heuristically, elements in the alternate solution can reduce cognitive effort and provide users with context they need to fill out the form. However, it also came with tradeoffs. I needed to find a middle ground.
Analyzing tradeoffs
I asked the Product Lead which inputs in the form non-technical users had difficulty with. For example, almost all users understand how to name a source and how to provide a description for a source. However, users have more difficulty understanding what a data warehouse is.
Final DesignFinally, I used elements from the alternate solution to support specific inputs in the form non-technical users had difficulty with.
In the alternate solution, every input was in an accordion card, which risked high interaction cost. In the final solution, elements expand and collapse when difficult inputs such as technical configurations need to be hidden until they become relevant to the user.
Expand / collapse interactions
Technical configurations are hidden until the user selects a source type
Ingest scheduling is collapsed unless the user decides to set a schedule
In the alternate solution, every input was styled into an accordion card, which created no hierarchy. In the final solution, I used subheadings and iconography to establish a visual hierarchy that helps users navigate the form.
Establishing a visual hierarchy
Subheadings and iconography are used to establish a visual hierarchy
In the alternate solution, every input came with helper text, which risked visual clutter. In the final solution, helper text is only used when we need to make sense of difficult inputs.
Helper Text
Helper text is only used to make sense of difficult inputs.
LearningsAt an early-stage startup, I didn't have a user research team or direct access to our clients for research. I used competitive analysis and relied on stakeholders to discuss client needs and adhere to a user-centred design process.
Embrace the constraints
I could have shipped the minimal viable solution, because it met the project’s design objectives. However, I decided to explore alternate solutions. At first, these design alternatives felt unreasonable, but after analyzing tradeoffs and being more deliberate about the elements & interactions that I used, the design evolved into a viable and thoughtful solution.