About
The client was a company with AI based technology for defining and enlarging the targeted audiences for major players in the market.
Goal of the project was to find the way to visualise data that represent
the most relevant categories for the defined keywords. This was one of the steps in the target audience forming and analysis before marketing activation.
Goal of the project was to find the way to visualise data that represent
the most relevant categories for the defined keywords. This was one of the steps in the target audience forming and analysis before marketing activation.
My role
UX/UI Designer,
Main contact person
Main contact person
Timeline
July 2023 - September 2023
First screen
First iteration
After first iteration with client I formed the list of requirements that contained input keywords list and opportunity to change their weight, output keywords grouped by category, moreover, output summary
for the future campaign activation through external platforms.
for the future campaign activation through external platforms.
I was trying to find the way of visualising keywords bubbles taking into consideration their weight, strength of connection with the input ones, category affiliation, and available interactions.
So, that’s what we got
Size = weight
Colour = connection strength
Parent bubble = affiliation
Colour = connection strength
Parent bubble = affiliation
Available interactions
Change keyword strength manually
Delete exited keyword
Add suggested (grey) keyword
Delete exited keyword
Add suggested (grey) keyword
Zoom in
Zero state
After scaling
Focused keyword
First outcome
While I was working on this version, the client found out some technical restrictions. That’s why, after presenting this variant, new requirements led to the massive changes in this section in general.
1
There is no longer output keywords but output categories.
There are maximum 3 levels of sub-categories inside the parent one.
There are maximum 3 levels of sub-categories inside the parent one.
2
There is no negative input keywords, however, we can support the change of the input keyword weight.
3
Should get rid of so bright colour-coding, especially red colour,
cause it reminds something negative.
cause it reminds something negative.
4
Categories can not be deleted totally but can be excluded from the further activation.
Second iteration
Summary section
Visible result of changes
Main information about future campaign
Benchmarks for navigating through bubbles
Main information about future campaign
Benchmarks for navigating through bubbles
It was important to...
Make the structure of sub-categories clear
Create playful screen
Keep in mind limitations for future development
Create playful screen
Keep in mind limitations for future development
It was important to...
Stay into the design system limitations
Make colour difference obvious
Leave the design clear and light
Make colour difference obvious
Leave the design clear and light
Keywords section
Keywords weights that can be managed
No devision to positive and negative
Possibility to delete keywords
No devision to positive and negative
Possibility to delete keywords
I started with the screen structure rethinking to cover all new requirements and limitations that came after discussion with
the client.
the client.
And started trying to find a way to visualise bubbles taking into consideration design system and needed functionality.
Also i presented several variants of possible interactions with bubbles and functions that will lay under these functionality.
Second outcome
After discussion with the client we choose the variant and planned future steps. I suggested to stay simple in UI part and focus mostly
on UX, because it was important to reduce the difficulty for the user, moreover we had plans to rethink the design system that would effect UI in the future anyway.
on UX, because it was important to reduce the difficulty for the user, moreover we had plans to rethink the design system that would effect UI in the future anyway.
Result
As a result, I presented the client with two design options: the primary one (on the left)
and the supplementary one (on the right). The main option featured a 3-column system:
the first column for inputting data, a central playground displaying customisable categories and campaign settings, and a third column providing a summary with essential campaign information. In the additional version, a structured hierarchical view of categories was introduced, serving as a fallback and intended for testing with users who prioritise efficiency over an engaging experience, emphasising quick work and rapid analysis of information.
and the supplementary one (on the right). The main option featured a 3-column system:
the first column for inputting data, a central playground displaying customisable categories and campaign settings, and a third column providing a summary with essential campaign information. In the additional version, a structured hierarchical view of categories was introduced, serving as a fallback and intended for testing with users who prioritise efficiency over an engaging experience, emphasising quick work and rapid analysis of information.
Interaction
Here is a brief illustration of the interaction dynamics on this screen. While the developed version offers a smoother experience for the user, this video effectively conveys the core concept.
