Actabl Unified UI

Project

ASG Alpine acquired 4 products, Alice, ProfitSword, Transcendent, and Hotel Effectiveness, and created Actabl in 2022, to combine business and labor intelligence with comprehensive operations software.

But the products were completely different, in every aspect possible.

Info

Role

Design Lead

Timeline

6 months

Tools

Figma, Miro, Sheets

Platform

Web

Overview

Context and Motivation

With the acquisition of multiple products, each with its own unique UI, users faced inconsistencies and inefficiencies when navigating between tools. The challenge was to unify the design while maintaining the distinct functionalities and strengths of each product.

Process: Design, Product, and Engineering

At Actabl, each designer leads the Product Design aspect of their squad. I led this initiative with support from my Product Design Director. Alongside me were the Product Managers and Engineering Manager from each POD, contributing to the business and technical aspects, as well as a talented team of engineers.

Initial Findings:

Our first step was to conduct a thorough review of the existing UIs for Alice, ProfitSword, Transcendent, and Hotel Effectiveness, identifying common elements and discrepancies.

• Inconsistencies in design elements across products.
• A need for a unified design system to streamline future updates and maintain consistency.
• Different frameworks running under the hood.

Insights

The second step was to gather insights from product designers and stakeholders, understanding their requirements and pain points.

• The need for a consistent look and feel across all products.
• Importance of maintaining the unique functionalities of each product while unifying the design.
• It would be benefitial to have a centralized design system or, at least a style guide, for ongoing and future UI enhancements.

Solution

We created multiple design options that combined colors and UI elements from each product. A navigational prototype was developed in Figma to visualize the unified UI. Feedback from stakeholders was collected and incorporated into the final design.

Start the craft

For a project like this, we're very lucky because Markting team already had set a guide for the new brand, defining colors, styles, assets. My job was, then, to review all of the assets they've created to find our common language, from graphic/print to digital/product.

Try out brand colors, "merging" interfaces

Feedback round after design critique

Iterate again: mix indigo and gray, so colors woudl be more noticeable

What success looks like

• Handoff started by mapping the colors to be used in the products from now on.
• We've established a design system repository in Figma, including standardized components that all product designers could use for their mockups.

The unified UI was implemented in all products, with one product undergoing a complete font style revamp.

Alice

Hotel Effectiveness

ProfitSword

Transcendent

Future Steps

• The unified UI design will be rolled out across the remaining areas of each product (atfer all, many of us have to face legacy code).
• User feedback will be monitored, and iterative improvements will be made.
• The design system repository will be expanded to include more components and guidelines.

Learnings and Reflections

• The importance of stakeholder engagement and feedback throughout the design process.
• The need for flexibility and adaptability in design to accommodate various product requirements.
• The value of a centralized design system for maintaining consistency and facilitating future updates.
• Iterative design and feedback cycles are crucial for successful implementation.
• Despite challenges, the project set a foundation for scalable and consistent design practices.

The team

The amazing team working (and supporting) me thorough the process:

• Rafael Bucker
• Felipe Miranda
• Natalia de Luna
• Henrique Stockler
• Stephen German
• Engineering and Product Teams ❤️