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 Definition

Users 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 Design
  • Merge 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 Design

Finally, 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.

Learnings

At 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.

Explore alternatives