Data Visualization

Data Configuration

Platform used by the marketing team of a multinational to analyze and define the products recommended on the strategic pages of the company's marketplace

* This project has a confidentiality agreement, so to maintain professional integrity, some parts of this case study has been censored or replaced with placeholder content

/TYPE

Data Visualization

/TIMELINE

4 weeks

/ROLE

UX Design

/TOOLS

Figma, Miro, Notion

OVERVIEW process Research definition solution analysis reflections

/problem statement

Data arranged for data analysis only

Users face challenges when trying to customize the filter logic on our platform, as they currently need to turn to technical support to perform the necessary configurations. This results in a slow and inefficient process that impacts users' agility and autonomy.

/goals

Enable filter list configuration

Allow the user the freedom to configure the filter list logic for product recommendations within each page of the company's marketplace with the actions of edit, add, remove and move the prioritization order. * Machine learning that defines the recommended products reads the rules and prioritizes them according to the order arranged

/design process

Design Thinking & Sprint

As agile team, I adopted Design Thinking and Design Sprint approach. Both methodologies are an iterative approach to product development and are performed collaboratively.

With this direction, I was able to:

Facilitate workshops
Map the user flow and all possible actions and states
Perform benchmarks
Build wireframes and prototypes
Development handoff and specification
Validate each step with stakeholder

* Because this product has a design system available as a guide, it was not necessary to spend time deciding on style and components.

/Research & Understand

Glossary

Scenario: strategic pages where the user will apply the container with the products recommended
Steps: the steps are related to the product recommendation logic, where a Parent-Step is the model that will indicate the product, that is, the executor, and a Child-Step is the filter of this model
Markets: because it is a multinational, the system needs to differentiate the scenarios in different countries in which it is allocated

CSD Matrix

To align knowledge of the internal team (leaders, designs and developers), a workshop was used to build the CSD matrix and, in this way, we increased certainty, reduced our assumptions and aligned essential doubts to be taken into the interview with the client

MoSCoW Analysis

After a few sections of discovery with client, business analyst the tech lead, I was able to prioritize the design scope and managing requirements by using MoSCoW Analysis

/Define & ideate

How might we enable list configuration?

As a standard and guideline for developing and managing database elements that can be performed on data within a table, I choose to use CRUD operations and heuristic, which stands for Create, Read, Update, Delete

“CRUD is a fundamental concept that bridges the gap between database management and user interface design”

Aligning user paths and actions

With that concept decided, it’s time for user flow. This technique allows mapping the possibleerrorandconfirmationstates of the system

Add Operation

When the user clicks on "Add new parent-step" option in Action Menu, then the configuration form shows up in a dialog
Business Limitation: user can't create new parent-steps, only add to the list of steps previously available in the system to avoid errors
When the user types to search, then the system must return with filtered step options
Options need to provide step-parent description with associated steps-child
When the user selects an option, then "Add new step" button must be enabled and system needs to present what option is selected

Edit Operation

When the user clicks on "Edit parent-step" option in Action Menu, then enable input field in the description column
When the user clicks on check-icon button, then system must confirm the edition
When the user clicks on the close-icon button, then system must cancel the edition

Delete Operation

When the user clicks on "Delete parent-step" option in Action Menu, then the confirmation form shows up in a dialog
Dialog needs to provide step-parent description with associated steps-child

Move Operation

While the user is hovering over a step line, the move-down-icon and move-up-icon button must be visible
Tech Limitation: functionality of changing the position of the steps couldn’t be done through dragging (more dynamic and efficient) to facilitate implementation and keep the project within the established deadline
When the user is hovering over the first line, then move-up-icon button must be disabled
When the user is hovering over the last line, then move-down-icon button must be disabled

/FINAL SOLUTION

Development Handoff

After defining the functionality of all operations and validating with stakeholders (business analyst, tech lead, and client), I made the necessary specifications together with the interface flow for better handoff

/Analysis & Validation

/Reflections

Limitations & Next Steps

‍

The complexity of this product segment makes it important to validate the terminologies chosen for the interfaces, but due to the unavailability of the schedule and difficult access to users within the feature's delivery deadline, it wasn’t possible to carry out tests and analyses with the tool's end users. This limitation compromises the adequate validation of what was proposed and developed.

‍

As next steps, it will be necessary to align expectations to validate the following questions:

How often will this feature be used?
Which actions do we see this having in the future? How does this affect the product in the long run?

With this, we can develop better designs that support future projects in this environment!

‍

Thank you for reading :)

/my work

Redesign

8 weeks

Productivity Event Landing Page

Data Visualization

4 weeks