CASE STUDY

Grata Lead Sourcing Web App

UX Cabin helped Grata build many high impact features, one of which was a Conferences event page that increased user engagement by 4x.

UI/UX Design
Dev Handoff
Lead Generation
Web App
Startup
B2B

Overview

Grata is a New York-based startup that provides dealmakers with cutting edge tools to find key information about private, mid-market companies. They needed to move quickly and called on UX Cabin to help execute on their feature roadmap.

Pallavi Pal
“I would recommend any other startup that needs to move quickly, that needs great quality design work to work with your team”
Grata
Logo Grata
Pallavi Pal
VP of Product Management, Grata

Background

Finding information about private companies is notoriously difficult. It is fragmented, hard to find, and potentially out of date. This impacts dealmaker confidence and means that thousands of companies that could benefit from investment are left in the dark.

Grata brings the power of machine learning to automatically source and analyze the most relevant insights.

With Grata, Dealmakers are able to use powerful features to search, source, and keep track of companies that fit their investment strategies.

Objectives

  • Plug into Grata’s product development team as quickly as possible
  • Design within Grata’s existing design principles and brand guidelines
  • Make the designer to developer hand-off as seamless as possible

Design Process

UX Cabin shipped a number of features for the Grata team. Feature requirements, user stories, and acceptance criteria were communicated during weekly meetings.
UX Cabin designers created medium and high-fidelity mockups and provided clickable prototypes and loom video walkthroughs whenever appropriate.

Pallavi Pal
"I’ve worked with a lot of design freelancers, contractors, and working with your team has been fantastic for us"
Grata
Logo Grata
Pallavi Pal
VP of Product Management, Grata

Principles

  • User-centered design: Prioritize user needs and goals.
  • Functionality: Enable key tasks for users.
  • Usability: Make design intuitive and easy to use.
  • Flexibility: Accommodate various use cases.
  • Consistency: Follow brand guidelines and design system.



Feature Design

Pipeline View

Grata users wanted a way to keep track of companies that they were following in a way that would provide visibility to where they might fall in a CRM-like deal-making pipeline. The pipeline view would take companies that a user had added to their personal lists and display them in a kan ban style view. This was a brand new feature.

Evolution of Pipeline view

This feature evolved to surface key information about a company in a way that would still be scannable. Company cards in each column originally only had the name and status chip. Feedback from the Grata team influenced the designs to include additional information like custom fields and the lists that a company might belong to.

This additional information increased the size of each card. This could be problematic for users who might have hundreds of companies in the pipeline view. To help address this, functionality was introduced that allowed the user to toggle the cards between a collapsed and expanded view. This could be done on the individual card level, column-level, and the global level (all cards within all columns).

Conferences

Dealmakers want to have visibility into which companies are attending which events, as this is a goldmine of information that can inform investment strategies.

Users were able to see event-related information such as the name, description, location, website, and exhibitor attendance.

The updates included displaying additional information such as NAICS 2 sectors and exhibitors, and gave users the ability to sort and save events they were interested in.

Pallavi Pal
"We launched the Conferences feature last week and can already see a 4x increase in engagement"
Grata
Logo Grata
Pallavi Pal
VP of Product Management, Grata

Compoentes

Evolution of Conferences

There were a few challenges with how to display the date of the event. Events could be a single date, date range within the same month, date range spanning different months within the same year, and a date range spanning different months and different years (i.e December 29, 2022–January 3, 2023).

The design had to accommodate each of these variations and still look great!

compoentes

Lists

A core feature within Grata was to allow users to group and organize companies of interest. This layer of organization was the backbone of other features and reporting related functionality.

Grata wanted to evolve lists with the ability for custom fields to be added. These fields could be set up by the user to work in whatever capacity they needed (custom statuses, attributes, phases, etc.).

Design

Evolution of Lists

There were a number of touch points that were impacted by the addition of custom fields. These included the creation and configuring of custom fields, adding them to different lists, and using them as filters in listing pages.


The designs had to be flexible enough to accommodate future additions for custom field support (adding more complex field types) without compromising the acceptance criteria that was defined for the initial version.

a bunch of screens that are on a wall

NAICS Lookup

Users can search for companies by sector using the North American Industry Classification System (NAICS). NAICS codes classify businesses based on their type of economic activity. The first two digits of the code represent the primary business sector, while the remaining digits represent sub-sectors, industry groups, and specific industries.

This update allowed for additional metadata to be scraped from NAICS data during the search process, which resulted in a faster and more effective experience.

Compoentes Search bar

Evolution of NAICS Lookup

Creating a dropdown menu that would allow users to search and find information that was hierarchical and scannable proved challenging. The new menu displays the title and a description fragment where the search term matches and shows the path to the code as a series of breadcrumbs.

For the final level within a NAICS code, a new icon was displayed along with the description. These additions brought more clarity to users for which level of a NAICS code they were viewing.

compoentes

Developer Handoff

A clean handoff process was crucial to ensure smooth and efficient collaboration between UX Cabin and the Grata team. This process involved the clear and organized transfer of designs, documentation, and other information.

Pallavi Pal
I really appreciated the organization. It was less work on my team and the product team for ensuring that all of those points were addressed.
Grata
Logo Grata
Pallavi Pal
VP of Product Management, Grata

This process was vital for several reasons:

  • It ensured the Grata team had all the required information to continue developing and implementing the design features.
  • It allowed clear communication and a precise understanding of what was delivered and what needed to be done to continue on the project.
  • It avoided confusion, misunderstandings, and delays, which can cause the project to fall behind schedule and lead to client dissatisfaction.

Final Results

The UX Cabin team was able to fast-track key features for the Grata team over a 5-month engagement. Design hand-offs were delivered using Figma and Loom videos for any needed walkthroughs.
Shoutout to the Grata team for being a fantastic partner throughout the entire process!

Pallavi Pal
It was amazing... overall, a fantastic experience from the initial conversations... all the way to the end.
Grata
Logo Grata
Pallavi Pal
VP of Product Management, Grata

Table of contents