ALOKAI

Alokai Console: Fewer Clicks, More Data

B2B SaaS

Admin Console

UX Research

UI Redesign

ALOKAI

Alokai Console: Fewer Clicks, More Data

UX/UI Design
Design System
Mobile & Web
B2B SaaS
Field Operations

ALOKAI

Alokai Console: Fewer Clicks, More Data

B2B SaaS

Admin Console

UX Research

UI Redesign

Product

Alokai

Problem

Too Many Clicks, Too Little Data

Alokai, formerly Vue Storefront, is a Frontend-as-a-Service platform for enterprise eCommerce. Its Console, where developers manage infrastructure, deployments and performance, buried the most-visited pages in nested menus, showed one chart per screen, and looked nothing like the Alokai brand. The company blog needed a visual refresh too.

My role

UX/UI Designer

As a freelance designer working with Alokai's product team, I owned the Console redesign end to end — research, wireframes, prototypes and usability testing — and gave the company blog a UI makeover.

Solution

A Denser, Branded Console

I rebuilt the Console around its most-visited pages: a flatter side navigation, multi-column dashboards, filters and search for logs, bulk actions, and Alokai branding with a dark theme. The blog got a UI makeover with a new grid, tighter typography and a custom graphic for every article.

Result

Faster Answers for Developers

In usability tests with 8 developers, finding a faulty replica took 34% less time, and reaching a metrics page took 2 clicks instead of 4. An A/B test on dashboard layouts cut back-and-forth scrolling on metric pages by 21%. Both projects shipped in 4 weeks.

Impact

-34%

Time to find a faulty replica

Usability testing, 8 developers, old vs new

4 → 2

Clicks to reach metrics

Flatter instance-level navigation

-21%

Scrolling on metric pages

A/B test, old vs new dashboard layout

Product

Alokai

Problem

Too Many Clicks, Too Little Data

My role

UX/UI Designer

Solution

A Denser, Branded Console

Result

Faster Answers for Developers

Impact

-34%

Time to find a faulty replica

Usability testing, 8 developers, old vs new

4 → 2

Clicks to reach metrics

Flatter instance-level navigation

-21%

Scrolling on metric pages

A/B test, old vs new dashboard layout

Product

Alokai

Problem

Too Many Clicks, Too Little Data

My role

UX/UI Designer

Solution

A Denser, Branded Console

Result

Faster Answers for Developers

Impact

-34%

Time to find a faulty replica

Usability testing, 8 developers, old vs new

4 → 2

Clicks to reach metrics

Flatter instance-level navigation

-21%

Scrolling on metric pages

A/B test, old vs new dashboard layout

Where Developers Got Stuck

Alokai Console is where developers and ops teams manage storefront infrastructure, deployments and performance. It worked, but it fought them: the pages they visited most sat three menus deep, metrics showed one chart at a time, and nothing about it said Alokai.

Across ~300 Hotjar recordings, the same loop kept repeating: scroll up, scroll down, switch the metric selector, scroll again. One developer in the internal survey summed it up: “I use the Console like a filing cabinet. I know where everything is, I just hate opening the drawers.”

Working with Alokai's product team, I combined the Hotjar recordings with an internal survey (15 of 47 responded), the Engineering Support backlog, card sorting and a benchmark of competing dev tools. From there I prototyped in Figma and A/B tested navigation and dashboard layouts, comparing the variants in Hotjar recordings and heatmaps before handoff.

Areas for Improvement

And how we solved them

The research surfaced 10 pain points across the Console. These three cost developers the most time, so they came first.

Problem

Not enough data and metrics on one screen

Recordings showed users scrolling up and down again and again to compare metrics. On Redis and CDN pages, they also had to switch a selector to change the metric type.

Solution

Multi-column, customizable dashboards

A grid layout puts several charts in one row, and a customizable dashboard lets each user pin the metrics they check most.

Areas for Improvement

And how we solved them

The research surfaced 10 pain points across the Console. These three cost developers the most time, so they came first.

Problem

Not enough data and metrics on one screen

Recordings showed users scrolling up and down again and again to compare metrics. On Redis and CDN pages, they also had to switch a selector to change the metric type.

Solution

Multi-column, customizable dashboards

A grid layout puts several charts in one row, and a customizable dashboard lets each user pin the metrics they check most.

Areas for Improvement

And how we solved them

The research surfaced 10 pain points across the Console. These three cost developers the most time, so they came first.

Problem

Not enough data and metrics on one screen

Recordings showed users scrolling up and down again and again to compare metrics. On Redis and CDN pages, they also had to switch a selector to change the metric type.

Solution

Multi-column, customizable dashboards

A grid layout puts several charts in one row, and a customizable dashboard lets each user pin the metrics they check most.

Problem

The most visited pages are too deep in the navigation

The most-visited pages sat deep in nested menus, so reaching everyday information took too many clicks. Session recordings and analytics showed the same detours again and again.

Solution

Flatter instance-level navigation

Redesigned the side navigation at instance level so the most visited pages are reachable in fewer clicks instead of being nested in menus. Navigation stays available at every screen resolution, with redirects in place so existing links keep working.

Problem

The most visited pages are too deep in the navigation

The most-visited pages sat deep in nested menus, so reaching everyday information took too many clicks. Session recordings and analytics showed the same detours again and again.

Solution

Flatter instance-level navigation

Redesigned the side navigation at instance level so the most visited pages are reachable in fewer clicks instead of being nested in menus. Navigation stays available at every screen resolution, with redirects in place so existing links keep working.

Problem

The most visited pages are too deep in the navigation

The most-visited pages sat deep in nested menus, so reaching everyday information took too many clicks. Session recordings and analytics showed the same detours again and again.

Solution

Flatter instance-level navigation

Redesigned the side navigation at instance level so the most visited pages are reachable in fewer clicks instead of being nested in menus. Navigation stays available at every screen resolution, with redirects in place so existing links keep working.

Problem

Logs and long tables can't be filtered or sorted

Session recordings show users scrolling through dense logs and long replica lists to track down a faulty replica. The same gap shows up in Engineering Support, where users keep requesting new filters.

Solution

Sorting, filters and log query search

Added sorting to tables, more filters, and a query search for logs, so users can narrow a long replica list or log stream down to the entries that matter instead of scanning it row by row.

Problem

Logs and long tables can't be filtered or sorted

Session recordings show users scrolling through dense logs and long replica lists to track down a faulty replica. The same gap shows up in Engineering Support, where users keep requesting new filters.

Solution

Sorting, filters and log query search

Added sorting to tables, more filters, and a query search for logs, so users can narrow a long replica list or log stream down to the entries that matter instead of scanning it row by row.

Problem

Logs and long tables can't be filtered or sorted

Session recordings show users scrolling through dense logs and long replica lists to track down a faulty replica. The same gap shows up in Engineering Support, where users keep requesting new filters.

Solution

Sorting, filters and log query search

Added sorting to tables, more filters, and a query search for logs, so users can narrow a long replica list or log stream down to the entries that matter instead of scanning it row by row.

Blog UI Makeover

4

weeks from first mockups to the live redesign, for both the Console and the blog.

The blog got a visual refresh, not a rethink. A clean multi-column grid, more white space and tighter typography made articles easier to scan, and every post got a custom graphic in Alokai's style, so the page finally looked like the brand behind it. Categories, tags and search stayed, restyled to match.

On mobile, the grid collapses to a single column, type scales with screen width, and article graphics are optimized to load fast without losing detail.