mabl 

Intelligent Test Automation

Product Design, UI, UX

2018

Hero

Problem

Over the last two years mabl had implemented and scaled so fast their usability was falling behind. They needed help redesigning their product to bring clarity and a more mature approach to their UX and visual identity.

Solution

mabl’s brand was originally designed to provide a conversational approach to understand the needs of a developer. We believe that concept still was relevant but under-utilized. Their application also used a standard design framework that didn’t support mabl’s conversational aspirations and had started to feel out of date. Since presenting large amounts of data is challenging, and sometimes overwhelming for the user, spinning further on the conceptual dialogue between man and machine made perfect sense.

Mable-5

Mabl’s brand is built around providing a conversational approach to understanding developers’ wants and needs. We believe this concept is still relevant today but is under utilised. Their application also used a standard design framework that didn’t support mabl’s conversational aspirations and started to feel out of date. Since presenting large amounts of data is challenging, and sometimes overwhelming for the user, having a more human way to do this made perfect sense.

Mable-1
Mable-2

A scalable system

By focusing on the most essential parts of the interface and moving advanced features behind secondary actions we reduced the cognitive load and made each interaction clearer. With the concept in place we built a system of components and elements that could easily adapt and handle the various pages. A consistent design builds trust with the users and lets them perform their tasks faster and with ease.

Grid

Complex forms

One of the major design challenges was making the UI forms easier to understand and use. In mabl’s case they often had form elements with multiple subsets and conditions. We solved this by introducing a drawer that could handle all the complex secondary actions, thus keeping the main form simple and more easily digestible.

Mable-3
Mable-4
Mable-6

A user’s delight

Tools that are used everyday need to be practical. This means the design can never get in the way of the user reaching their goals. That said, that shouldn’t stop the tools from being delightful to use. We introduced details like patterns and animations where appropriate in the UI to enhance the brand and make the experience flow for every task.

Tomtebogatan 32
SE – 113 38 Stockholm

+46 (0)702 10 84 12
hi@grafikwerket.com