DATA GATHER
UX for Integrating 3rd Party Apps
Reduced the integration clicks for a third-party app by 37.5%, streamlining admin workflows for data transfer into Airtable and enabling a new integration with Google Sheets.
Product Design
-
Side Project
My role:
UX/UI desiger
Timeline:
3 months
The team:
1 UX/UI designer, 1 engineer
Problem

Volunteers who work at food banks help distribute food and collect feedback from folks receiving food using Data Gather. Administrators at these nonprofits need an easy way on the platform to transfer that data into an existing database like Airtable so they can analyze the information.

The existing flow was difficult for admins to navigate and needed. Users also requested Google Sheets as an additional integration.



Solution

I tested and redesigned the existing Airtable integration and built out a Google Sheets integration flow that addressed user pain-points and reduced the time it took for an admin to connect a 3rd party tool.

Results

Research helped me design an optimized user interaction by streamlining the database connection flow, reducing the number of clicks by 37.5%.

My interest in building settings pages inspired me to design additional features for future implementation:

  • Viewing the data on the settings page
  • Tabs for different settings actions
Process
TEAM
In a local UI/UX program formerly called Circular Design (CDI), I was partnered with an engineer and stakeholder, collaborating remotely across a 5-6 hour time difference through email and virtual calls.
Pablo S.
Full-Stack engineer & Client
May Sermonia (me!)
UI/UX Designer
PROJECT SCOPE

I like to use an agile process to manage projects. This helps me set expectations with the client on deliverables and effectively mitigate risk. I led weekly syncs to discuss:

  • Project updates
  • Research and design reviews
  • Updates on business goals and timelines
RESEARCH PLAN

I lacked deep understanding in what pain points existed in the tool. In order to learn more I planned to:

  • Conduct heuristic evaluation of the current page
  • Conduct usability tests on the current integration flow

Heuristic evaluation:

I found there was a lot of data jargon like, "base name", "schema" or "authenticated" that maybe unnecessary or confusing for a user.

I also ideated on different ways to organize the layout of the page such as removing the table entirely since users just need to know if a integration was successful.

Research plan:

To test my hypothesis, I set up a user interview plan and script to test the current usability.

USER INTERVIEWS

Confronted with a tight timeframe, I leveraged my network to identify individuals who matched an assumed persona of nonprofit admins familiar with data and digital platforms.

Questions that guided my research:

  • Do admins know how to configure an integration from the settings page?
  • What are their pain points?
  • What assumptions are they making?
  • What do they want and need?
FINDINGS

As a solo researcher, I encountered challenges such as missed audio recordings and skipping questions during interviews.

Despite the shortcomings, I leveraged the collected data to derive these findings:

  • Users had to scroll down to find the link for integrations
  • 2/3 interviewees found the “Add Settings” link within 1 click
  • All interviewees identified clicking 'Add Settings' as the method to add another integration
WIREFRAMES

After presenting findings to the client/engineer, we decided to:

  • Add an integrations tab at the top of the page, eliminating the need for scrolling
  • Design cards to represent different integration connections
  • Integration management

Research also generated feature ideas that we incorporated:

  • Displaying “Last Sync” info
  • Data preview for the sync
UI DESIGN

I leveraged Data Gather’s parent company’s brand (Data Clinic) to ensure a cohesive presence throughout the product experience and build out a small re-usable component base.


Core elements: Typography, Colors

Components: buttons, progress bar, drop-downs, check-boxes


At the end of the project, we also had some extra time and so I designed in some extra features that I wanted to test with future users:

  • Table filtering
  • Ability to click out and view data on its native web
  • Google sheet error states
"May was very thorough in her user research and skilled at understanding the requirements of the design problem. Her high-fidelity designs solved our problem really well (and looked aesthetically great too!) and I'm excited to be the engineer that gets to implement these designs."
Pablo S.
Full-stack Eng, @ Two Sigma - Data Clinic
Reflection
RESULTS

I reduced the required clicks to integrate a third-party app by 37.5%, streamlining admin workflows for transferring data into Airtable and enabling new integration with Google Sheets.

Inspired to go above and beyond, I designed future features including:

  • Data viewing on the settings page
  • Tabs for different settings page actions
WHAT WENT WELL
  • Collaborating - Working across 5-6 hour time zones was seamless with remote tools.
  • Volunteer Opportunity - Upon presenting my transformative experience about the this project, I was asked to join the organizing team to refine the program for future interns.
IF I HAD 6 MORE MONTHS..
  • More testing - Conduct usability tests 1 month later on 5-10 users using the same interview questions studying NPS and # of clicks
  • Create a design system - Fluff out a robust design system with button variants (ex. hover, active, disabled states) with color tokens and text styles for typography in figma
  • Test and redesign the form flow - How can we make the data gather form more intuitive and easy for users to set up? Success for this would look like an increase in forms created 1 month after the redesign.
Currently searching for my next full-time role!
Let's connect!