Filip Ulatowski
Back
Action creation in the product
UX/UI Design

Action creation in the product

Growblocks allows users to see their entire funnel data (e.g. Inbound traffic, Outbound traffic, Conversion rates etc.) in one place. In order to make a yearly revenue plan, companies can create actions that affect those metrics. For example, you can create an action that simulates the effect of a marketing campaign on revenue.

Task

Redesign the action creation flow to be more intuitive and clear.

My Role

UX/UI Design · Developer handover

Team

Placeholder — describe the team.

Project Background
The Problem

Users don't find the feature intuitive

After talking to customers and internal experts, it turned out there is a number of usability problems with the feature.

Disconnected design

The user input and the graphs representing the data being manipulated are disconnected. On top of that there was a lot of visual clutter and complexity.

Disconnected input & results view

Confusing interface

Many users reported a lack of clarity around the meaning of the interface and how the actions performed by the users will influence the data that they manipulate.

Action form — unclear controls

No before and after

After you have performed the action there was no way to see the comparison of before and after. In many cases it was hard to say if there was any change at all.

Graph without before/after comparison

Final Design

Final action creation experience
Design highlights — focused layout, in-context editing, before/after
Development

Handover details

Empty states

Empty states give an opportunity to guide the user through complexity, limiting choices and visual clutter.

Empty state design

Responsive design

Some elements are fixed, some are flexible. Documentation helps to convey the intention to the developers.

Responsive behaviour spec

Precise description

In complex designs with lots of edge cases, data and defaults — proper communication and transparency is key.

Annotated edge cases

Logic diagrams and user flows

Logic diagrams can help to create a shared understanding of what happens in different scenarios.

Logic diagram / user flow