Evolution builder

Evolution builder

Evolution builder

Product Design

UX/UI Design

User Interviews

Think Aloud Tests

Facilitating Co-creation Sessions

Designed our most popular page

https://www.easysbc.io/evolutions/builder

https://www.easysbc.io/evolutions/builder

After the initial launch on December 18, 2025, I took ownership of the Evolution Builder and continued evolving the experience into the most-used feature on EasySBC. The tool helps more than 82.000 users build optimal evolution chains based on complex underlying game logic, requirements, and upgrade paths.


Survey data showed that users needed a clearer overview and a calmer visual structure to reduce cognitive overload. My role was to translate that need into a more intuitive decision-making flow through user testing and continuous iteration, helping turn the Evolution Builder into the most-used feature on EasySBC.

Impact After Redesign

Session Duration

Session Duration

10.25% Increase

10.25% Increase

Bounce Rate

Bounce Rate

10.18% Decrease

10.18% Decrease

01 Context

01
Context

The Evolution Builder helps users discover and build the best possible evolution chains. Under the hood, the feature is driven by complex logic, conditions, and upgrade paths. For users, however, the experience needs to feel simple: they should be able to explore options, compare paths, and move forward confidently without feeling overwhelmed.


When I took over the feature after launch, the opportunity was not to simplify the underlying system itself, but to improve how that complexity was presented and navigated.

02 Problem

02
Problem

Early user surveys showed a clear pattern: users felt they lacked overview, and the experience felt cluttered.


The challenge was not that the feature lacked value. It was that the amount of information, combined with the way it was structured, made it harder for users to scan, compare, and decide on their next step.


This raised a key design question:


How might we create a calmer, more pleasant experience without removing the depth users rely on?

03 Process

To explore the best possible experience, I created three prototype directions and tested them through 8 think-aloud usability tests and interviews.


Besides adding more white-space, upscaling fonts and other minor UI tweaks, the three directions were:

1. Horizontal scroll

A horizontal-netflix view style to reduce cognitive overload and add a calmer expression.

2. Grid View with an animated evolution card

The animated evolution reveals additional data on hover, reducing cognitive overload when users first arrive on the page.

3. Grid View with an animated evolution card

The animated evolution reveals additional data on hover, reducing cognitive overload when users first arrive on the page.

03 Process

To explore the best possible experience, I created three prototype directions and tested them through 8 think-aloud usability tests and interviews.


Besides adding more white-space, upscaling fonts and other minor UI tweaks, the three directions were:

1. Horizontal scroll

A horizontal-netflix view style to reduce cognitive overload and add a calmer expression.

2. Grid View with an animated evolution card

The animated evolution reveals additional data on hover, reducing cognitive overload when users first arrive on the page.

3. Grid View with an animated evolution card

The animated evolution reveals additional data on hover, reducing cognitive overload when users first arrive on the page.

04 Key Insights

04 Key Insights

The research surfaced a few clear patterns.

Users wanted less friction on desktop

Most users preferred to avoid horizontal scrolling when searching for new evolutions on desktop. It interrupted their overview and made comparison feel less efficient.

Consistency created calm

When asked about a uniform card layout, users responded positively. In a feature shaped by complex logic and a lot of information, visual consistency gave them a stronger sense of control and reduced cognitive load.

Context mattered across platforms

While horizontal scrolling created friction on desktop, users actually preferred a more scrollable, Netflix-style browsing experience on mobile. On smaller screens, that interaction felt natural and more engaging.


These findings made it clear that one universal interaction pattern was not the right answer. The solution needed to respond to platform context.

05 Final iteration and implemented design

05
Final iteration and implemented design

Based on the research, I moved forward with a direction that prioritised clarity, consistency, and platform-aware interaction design. As almost all 8 users preferred the hover effect on cards, I chose to implement it as a way to reveal more information without overwhelming the initial view. I also introduced a more consistent card system, where cards within each category shared the same width and height, making the interface easier to scan and more visually calm.


Rather than removing complexity, the goal was to organise it in a way that felt easier to understand and act on.

06 Outcome

06 Outcome

The redesign led to measurable improvements in how users engaged with the experience. 

Key indicators include:

Session time:

Session Time (average)

Before re-design

Before re-design

314.28 seconds

314.28 seconds

After re-design

After re-design

346.48 seconds

346.48 seconds

Bounce Rate

Before re-design

Before re-design

42.45%

42.45%

After re-design

After re-design

38.13%

38.13%

Overall, the redesign improved user engagement, with average session duration increasing by 10.25% and bounce rate decreasing by 10.18%. Because this is one of EasySBC’s most-used features, improving it not only strengthened engagement but also had the potential to support both user acquisition and retention.

07 Reflections

07 Reflections

This project reinforced an important principle for me: when designing for complex systems, clarity is not only about showing less — it is about structuring information in a way that helps users feel confident.


It also showed the value of testing different interaction patterns early. The strongest solution did not come from choosing one visually appealing direction upfront, but from validating multiple approaches with users and adapting the experience to both desktop and mobile contexts.


For me, this was a strong example of how research-led interaction design can turn complexity into a product experience that feels intuitive, structured, and trustworthy.

A3A3A3

525252

Create a free website with Framer, the website builder loved by startups, designers and agencies.