like|minded

Enhancing the admin dashboard data experience via filters and segments.

BACKGROUND AND PROBLEM

Providing more customization
to users

Like|Minded is a software platform that utilizes proprietary algorithms to connect individuals within an organization and enable them to meet and form lasting relationships with their colleagues. In a world of different work environments, workplace connection is important for employees to feel they belong. In turn it can lead to stickier internships, better performing teams, more inclusive culture, accelerated new hire onboarding and engaged corporate event attendees. 

Officially launched in 2021, the small but mighty team has been working to add features and functionality as new customers join the platform. For admins, filtering and segmenting was something missing from the launch of the platform. Users take a short assessment that provides matches based on the proprietary algorithms.

Scope: Feature addition
Role: UX/UI Designer
Project Duration: 4 weeks sprint
Tools: Figma, Mural, Whimsical

How might we enhance the admin dashboard experience within the Like|Minded platform to increase connections, engagements, customer referrals and retention?

SOLUTION

By identifying the major pain points in the dashboard experience, I added the ability to filter and segment data.

EmpathizeDefineIdeatePrototype & TestWrap-up

1. EMPATHIZE

Arrow pointing up

CUSTOMER FEEDBACK AND BEHAVIORS

Hearing and learning from customers

With an already launched platform, we heard from customers about many features they’d like to see. Taking note of the highly requested features, the ability to filter and segment data became quickly popular. 

The filters would be based on user data (anything asked in the initial assessment) and can help admins focus on specific subsets of their users. Admins could also ideally save filter configuration segments. This allows them to get quick and repeated access to their most relevant segments by saving their preferred filtering criteria for regular use.

COMPETITIVE ANALYSIS

Examining other SaaS dashboard filters

With a lot of data stored in a product, dashboards are very complex. They need to present lots of numbers and metrics in an organized yet digestible way that won’t cause information overload. I looked at mostly indirect competitors with comparable dashboards.

I found patterns for filters and segments that I used as a reference for the Like|Minded dashboard.

KEY TAKEAWAYS

1

Endless ways to visualize filters:

I found there were infinite possibilities on how to present filters in a dashboard. I found it really comes down to the amount of filters and the complexity of them. For our assessment filters, we'll need to reduce cognitive load with our amount, especially the specific activities listed in the assessment.

2

Chips are needed to show selections:

In order for users to keep track of selected filters, the usage of chips is necessary. Most dashboards analyzed used chips to show filter selections, especially ones with many filters to select.

3

Dropdowns and lightboxes:

The use of dropdowns and lightboxes for the filter selection was commonly used throughout viewed dashboards. This is a great way to hide this information out of view and illuminate it only when needed to keep the overall data in the dashboard easy to understand and simple as possible.

2. DEFINE

USER PERSONA

The HR Professional Mindset.

With our current customer user base, I visualized a persona of a busy HR professional who is looking for the most efficient ways to do her job due to her workload. Say hi to Lisa! Lisa loves the Like|Minded platform and praises it for its matching abilities, but wants more.

USER FLOW

A simple flow

While the act of filtering data is usually a simple click of a button, it was still important to lay out what it might look like so I knew how many screens to make into wireframes. The data from the assessment was also extensive (i.e. specific hobbies).

3. IDEATE

SKETCHES & MID-FIDELITY WIREFRAMES

Designing dashboard filters

Despite a rather simple design like filters, I still sketched out some potential options for the filters. With the amount of selections users could apply as filters for their data, there are many solutions that could be explored.

Since the dashboard is already live, the focus was mostly on the filter modal design, which didn’t require mid-fidelity wireframes. Instead, I went straight into high-fidelity wireframes.

Wireframe sketches

See full Mid-fidelity Wireframes→

4. PROTOTYPE + TEST

HIGH-FIDELITY PROTOTYPE & USABILITY TESTING

Testing with current customers


With the high-fidelity wireframes complete, I configured them into a prototype using Figma. With a current customer base, we recruited some current power users to conduct usability testing.

Test Objectives

PRIORITY REVISIONS

Perfecting the filter

After we conducted usability testing, we compiled insights from feedback into a deck to distinguish the pain points and successes of the designs in action.

KEY TAKEAWAYS

wanted clarification on the interests and how those could be filtered specifically.

Revision: Adding a keyword search for the specific interests users select during the assessment.

of users expressed confusion about the need for saving segments of data.

Revision: Removing the ability to save the segment, which will be in a future release.

expressed difficulty in finding the button to export the data before filters are applied.

Revision: Added the ability to export the data segment once a single filter is applied.

BEFORE
Before Explore Screen High Fidelity Wireframe
AFTER
After Explore Screen High Fidelity Wireframe

Redesigned modal

Reworked the design slightly with a simple UI and changed the selection checkboxes for clearer selecting. The filter selection was initially going to be a dropdown, but ultimately decided on a modal due to the amount and complexity of filters.

BEFORE
Before meal budget slider questionnaire slide high fidelity wireframe
AFTER
After meal budget slider questionnaire slide high fidelity wireframe

Replacing filters

Like|Minded assessment has many data points that could be filtered. However, we wanted to launch this new feature with the ones that would be most beneficial to our customers. That's why we decided to replace Hexaco traits with relationship status. I also decided to omit demographics at this time. These could be added later in a future sprint.

Searchable interests

Within each interest category, there are multiple sub-interests. In order to reduce cognitive load, Imade a searchable sub-interest field.

BEFORE
Before trip participants questionnaire high fidelity wireframe
AFTER
After trip participants questionnaire high fidelity wireframe
BEFORE
Before activity budget slider questionnaire high fidelity wireframe
AFTER
After activity budget slider questionnaire high fidelity wireframe

Filter chips

To track what filters have been selected or are selected for a segment, we added chips to the top of the dashboard.

5. WRAP-UP

Looking over our dashboard filter data

01. ARCHETYPES
02. RELATIONSHIPS
03. INTERESTS
View final prototype

What did I learn?

01. NO FEATURE ADDITION IS AS SIMPLE AS IT SEEMS

I went into this project of adding this functionality thinking it would be simple. When I’ve used search filters on websites, they didn’t seem super complex to me. However, I quickly learned there are many solutions and ways of going about this design. Nevertheless, it was interesting to hone in on this single feature versus designing out the full dashboard.

02. UNDERSTANDING DEVELOPMENT CONSTRAINTS

With a small team consisting of a sole developer, there’s definitely constraints that exist. I collaborated with our developer, understanding current constraints and designed with these in mind.

03. TESTING UNCOVERS MORE OPPORTUNITIES TO DELIGHT USER

During our usability testing sessions, we were able to uncover pain points in relation to this particular feature. However, it also opened up the conversation to speak with current customers on general feedback they may have. As an early stage startup, many of these customers have signed on knowing there would be kinks to work out as the software and business continues to grow. We're now able to take all this feedback and use it to inform future design decisions for sprints to come.

THANKS FOR READING!

Take a look at my other case studies. 👀