Integrating Lucid Marketplace®
into Meta4 Insight®

Lucid Marketplace®, a data sample provider, was recently integrated onto Meta4 Insight®, Protobrand’s data analysis platform. Our goal was to a provide a more seamless fielding experience for the market research team. 
January— April 2020
I owned this project from concept to launch alongside Hongyu Zhou (technology director), with support from Kenneth Ott (research director) and the Lucid team.
This integration has provided Protobrand with autonomy over its samples, saving researchers time and effort.

*Unfortunately, due to NDA, I am limited as to which screens I can showcase!

︎The Problem

Managing projects and their corresponding samples on different platforms is a time consuming and difficult experience.

Protobrand’s market research team had to manually revert between their platform (Meta4Insight) and Lucid Marketplace to manage their samples. The back and forth was especially frustrating because the processes between the two are often the same. Managers also had to visit Lucid Marketplace to access sample-specific information. This is what that process looked like: 

︎The Solution

Merging both platforms’ workflows and consolidating sample information would significantly reduce the time and stress of managing samples across projects.

︎Success Metric

Significantly reducing the time taken to manage samples and CPI costs for market researchers.  

What are the necessary features required to make this integration useful? 

The product team held ideation sessions with Lucid to determine our MVP goals. We broke down all features into four categories (General UI, Sample View, Sample Details, and Sample Management) and noted their importance (MVP feature or a nice-to-have).

We then determined the timeline for this project considering our bandwidth. I worked closely with Hongyu Zhou, technology director, from concept to handoff, with support from both Lucid’s and Protobrand’s research team. Here’s a look:

Our Lucid Integration timeline on I’m the 

I lead interviews with groups of 2-3 market researchers to understand their workflow and pain points. 

As they walked me through the fielding process, I learned:

  1. Researchers relied on Lucid Marketplace to edit any sample information, including CPIs and quotas, which vary within surveys. This information was also only available on Lucid Marketplace.

  2. This causes an additional back and forth between platforms, increasing the chance of error.

  3. Lucid Marketplace uses different terminology than that of Meta4 Insight, which makes things confusing. For example, a survey on Meta4 Insight refers to a questionaire specifically designed by Protobrand to gather System 1 insights for a client’s brand or product. However, a survey on Lucid Marketplace refers to a sample.  

  4. Both platforms follow different status conventions. Meta4 Insight had only 3 to describe the status of a survey: Live, Pending, or Complete. Lucid Marketplace has ~12. The research team only uses 5 of them.

Targeting the pages that needed to be designed.

Here’s a quick map of pages, CTA’s, and dialogs affected by the integration. All ⓧ and gray areas are part of the greater platform restructuring epic.

Using Figma to keep everyone in the loop.

To keep the development process as seamless as possible, the team chose Figma︎︎︎ as one of our primary ways of communicating.

Figma allowed us to not only be up to date on all designs and developments but also quickly reference our product design language, which had been growing since the start of our platform restructuring epic. We adopted Brad Frost's atomic design principle︎︎︎ to build scalable and cohesive components.

I started off with basics like buttons and dropdown lists. These features would then come together to make templates for objects like dialog boxes and page heirarchy.

Using components to build the Share module. For those unfamiliar with the atomic design method, it is essentially building templates out of parts. This module is made up of a dropdown, buttons, and a user bubble— elements which we will see again throughout the platform. Rather than remake buttons as we build new modules, we can reuse the same button template, as seen on the left. This way, we can still customize what the button, or other elements, say or their color, without sacrificing their cohesion within the system. 

Our component library at a glance.

Some notable wireframes.

Consolidating information proved to be the most complex problem throughout this project. 

As mentioned previously, one of the greatest pain points between shifting from Meta4 Insight and Lucid Marketplace was the lack of consolidated information. Researchers had to visit Meta4 Insight to read details about a survey, and then Lucid Marketplace to read about its samples. Merging the two workflows was a perfect opportunity to make important information like this as accessible as possible. 

My interviews with the researchers allowed me to identify sample information that they would find most helpful at a glance:

  1. The sample’s name
  2. Its ID number
  3. The current number of completes
  4. The total number of completes desired
  5. The CPI
  6. Its status during fielding

To narrow this down, I focused on what kind of data each of these 6 elements were. For example, the sample’s name had to be text, but its ID, completes, and CPI were numbers. A status could be represented as both.

Seeing as statuses were the most ambiguous of the group, I decided to hone in on this problem first. We found that representing each of these with color would increase readability when looking at information at a glance throughout the platform. 

A brief look at the five statuses Protobrand uses, each represented as a specific color. The statuses are formatted in dot-text form when posed as a dropdown. They are just circles when placed in a row (see below). 

It was important that the colors we chose were accessible and unique from eachother. For more information on how we chose them, check out my article on color accessibility︎︎︎.  

WCAG 3-approved colors as part of our product design language. The top half of colors read well on black, the bottom half on white. 

This project successfully launched at the end of April 🎉

The last couple of weeks were spent with me touching up wireframes and overseeing its development as a designer. I worked closely with the technology director, and the rest of the engineering team as we updated components and checked for any final outstanding bugs. Two research leads ran data checks with our newly integrated platform and Lucid Marketplace to ensure the data was a 1:1 match. We also corresponded regularly with the Lucid team to make sure things were going well on their end.

This project went spectacularly well! I was cautious about fulfilling our Nice-To-Haves in the beginning as building the MVP seemed daunting. We were incredibly fortunate to be part of a project where the Nice-To-Haves were actually a seamless and necessary addition to our MVP goals, and be able to ship them all by the end of April 🎉.

Integrating Lucid to Meta4 Insight has significantly decreased sample input errors and lowered CPI costs by 46 and 49% in B2C and B2B, respectively.  It has also provided the research team with more autonomy over its fielding process. Check in later for managerial stats!

Made with ❤ by sukanyaray_