Meiro customer data platform — a UX case study – UX Collective

Overcomplicated design fails to bridge the gap for novice marketers.

Brief: Redesign the Customer Segment Builder page to
enable users of this platform to accomplish their tasks more efficiently.

Note: This was a Pro-bono done by me and my team (Zack, Ara, Penny, and Myself) for our final project as Students at General Assembly Singapore.


The overcomplicated interface of Meiro (Custom Builder Page) is negatively impacting its adoption rate amongst novice marketers.

How Might We?

1) How might we improve the visual interface of Meiro so that users will find it more intuitive to complete their tasks easily?
2) How might we enhance the features of the custom builder segment so that users can complete their tasks easily?

Our Solution

Instead of reconstructing the entire interface of Meiro, we will make subtle and meaningful iterations that are more relatable to users.

By redesigning and reiterating Meiro’s interface and its elements for marketers to create segments easily to meet their marketing needs.

My role and team

I took the initiative of Topic Research, Usability Testing, Prototyping, and Design strategy.

Team Meiro’s Lineup

Customer Data Platform (CDP):

CDP is a platform that consolidates customer data, from partially connected silos, into persistent customer profiles combining behavioral attributes. So that marketing teams no longer have to wait for accessible structured data from IT departments to proceed with marketing plans.

Target Users

At the start of this project, Meiro was still in their infancy phase and did not have long-term users that we could approach for user research. Hence we interpreted the case and approached users who were familiar with complex data systems like CDP.

User Testing and Interviews

We managed to recruit 13 users who have prior experience with data platforms likes Google Analytics, Salesforce, and Matomo (formerly Piwik).

Some key quotes from users:
“There should be some sort of a status to see if the campaign is done or still in progress.”
“I can only understand the calendar icon, what are the other 3?”
“The English in the summary line is weird.”

Affinity Mapping (sectioned)

After the testings and interviews, we synthesized our findings and made conclusions for four problematic areas within the page: 
1) Design of the attributes
2) Filtering of conditions
3) Segments 
4) General User Interface

Personas & Customer Journey Map

We then crafted personas and customer journey maps, (that depict our findings,) that will provide our Client with better insights into their customers.


We then came up with features that will help solve these users’ problems and used various matrixes (Impact/Effort matrix & MoSCoW matrix) to prioritize them accordingly for prototyping and testing.

Task-based Tests & Concept Selection

Due to the lack of time and resources, it isn’t viable to create a full working prototype for usability testing but we still have to convey our iterations and ideas across to the users and client. Hence we decided on splitting the testing of features into two sections: Task-based Testings and Concept Selection.

The usability test consists of 3 parts:
1) To compare the old and new interface, we had users complete 3 tasks on two different prototypes: Meiro’s current prototype and a mid-hi fi prototype I built on Axure. 
2) We then asked them to go through a series of printouts on certain elements and components of the platform, to decide which design they preferred. 
3) Lastly, users were asked to fill up a System Usability Score (SUS) form

Usability Test Results and Iterations

The result from the test was very positive, the majority of the iterations were well received. Only two of them were still causing confusion with the users. And iterations were made again before another series of testing.

Final Product:

Breakdown of new iterations:

New Categories for Segments and a Sorting Function

New Categories: We added a few new categories (Segment Type, Status, Date Created) and a sorting function for the segment page.

Users had feedback that Last Modified dates weren’t very relatable and relevant since opening a segment will change this value.

We also mentioned to the clients that categories like Segment Type and Status could be customisable for each company/ marketing team to better suit their DesignOps processes.

Hover State and Sticky Function

Hover state and Sticky: Previously users could only enter/ open a segment by clicking on the segment names, so we decided to make the entire bar clickable and added a hover state to indicate that underlying action.

However if the hover states is too much of a visual noise, a simple cursor change is more than enough of an indication to know something is clickable.

The additional sticky feature will better allow user to sort out their own list and pin the more important segments to the top.

Reduced step in User Flow: Previously when users create a new segment, it makes a new list on the segment page, and that was it.

We felt that just by clicking on the Create Segment Button, it is clear that users want to create a segment. Hence we remove a step in the user flow and brought users straight to the editor page after creating a new segment.

A condensed list of Attributes sorted according to their categories

Attributes and Filtered Conditions:

Before we go on, I believed this is probably the most complex part of Meiro. To give some context: Each attribute pulls certain data from a specific data collection tool and segments any customer profiles that matches the selected condition.

Previously, the attributes were sorted according to the amount of customer profiles segmented by each attribute. Meaning that if the attribute Birthday was to segment 80% of the entire database and Last Name draws 90% of the same entire database, the latter attribute would be placed higher in the list.

NO USER understood the sorting algorithm. And unless there’s a way to indicate these informations, we felt that it was better to sort them according to categories.

Filtered Conditions: After selecting an attribute, users will then have to select a condition to complete a filter for the segment. Which we have filtered this list according to whichever attribute was selected.

This will help reduce cognitive load for users in the process of deciding what are the available and correct conditions to use.

The previous button resembles the toggle button from the IOS system (And Orange toggle on a White Button). It caused some confusion with its ‘activated’ state, especially for users who aren’t familiar with the IOS system.

This project helped me understand how difficult it is to introduce subtle yet meaningful changes to a working product. My greatest takeaways were: a glimpse into the data world; picking up Flinto, an interactive design tool; the extremely positive reviews and satisfaction from our clients.

Author: Jun Xiang Loh

Collect by: