mabl
— UX/UI redesign

mabl
— UX/UI redesign

mabl
— UX/UI redesign

Problem

mabl offers AI-powered test automation to digital product teams. Over the last two years they implemented and scaled so fast their usability was falling behind. Grafikwerket was asked to help redesign their product, to bring clarity and a more mature approach to their UX and visual identity.

Problem

mabl offers AI-powered test automation to digital product teams. Over the last two years they implemented and scaled so fast their usability was falling behind. Grafikwerket was asked to help redesign their product, to bring clarity and a more mature approach to their UX and visual identity.

Problem

mabl offers AI-powered test automation to digital product teams. Over the last two years they implemented and scaled so fast their usability was falling behind. Grafikwerket was asked to help redesign their product, to bring clarity and a more mature approach to their UX and visual identity.

Problem

mabl offers AI-powered test automation to digital product teams. Over the last two years they implemented and scaled so fast their usability was falling behind. Grafikwerket was asked to help redesign their product, to bring clarity and a more mature approach to their UX and visual identity.

Solution

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.

Solution

By focusing on the most essential parts of the interface and moving advanced features behind secondary actions we reduced the cognitive load & made each interaction clearer.

Solution

By focusing on the most essential parts of the interface and moving advanced features behind secondary actions we reduced the cognitive load & made each interaction clearer.

Our role

Full service agency.

Our role

Full service agency.

Our role

Full service agency.

mabl-hero

Joining the conversation

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.

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. By setting a foundation that had the mabl “cube” present information in easily digestible cards, the interface instantly came alive.

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. By setting a foundation that had the mabl “cube” present information in easily digestible cards, the interface instantly came alive.

mabl1
mabl2
mabl3

A scalable system

With the concept in place we built a system of components and elements that can easily adapt and handle the various pages needed.

A consistent design builds trust with the users and lets them perform their tasks faster and with ease.

mabl4

Complex forms

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.

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.

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.

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.

mabl5
mabl6
mabl7

A user’s delight

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.

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.

We introduced details like patterns and animations where appropriate in the UI to enhance the brand and make the experience flow for every task.

mabl10

All case studies