Actabl Unified UI
Unifying the User Interfaces of Multiple Hospitality Products
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.
![The team](/_next/image?url=%2Fimages%2Fcontent%2Factabl-ui_logos%402x.jpg&w=1200&q=75)
Info
Role
Design Lead
Timeline
6 months
Tools
Figma, Miro, Sheets
Platform
Web
Overview
Problem
How to unify the user interfaces of four acquired products (Alice, ProfitSword, Transcendent, and Hotel Effectiveness) into a single cohesive platform? How to maintain consistency and enhance user experience while preserving the unique functionalities of each product?Outcome
After extensive research and prototyping, a unified UI design was created and partially implemented, resulting in a more consistent user experience and a foundational design system for future updates.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.
![Acquired Products UI](/_next/image?url=%2Fimages%2Fcontent%2Factabl-ui_actual-products%402x.jpg&w=3840&q=75)
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.
![The team](/_next/image?url=%2Fimages%2Fcontent%2Factabl-ui_team%402x.jpg&w=1920&q=75)
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.
![Study brand guidelines](/_next/image?url=%2Fimages%2Fcontent%2Factabl-ui_studying-brand-guidelines%402x.jpg&w=3840&q=75)
Try out brand colors, "merging" interfaces
![studying-brand-guidelines](/_next/image?url=%2Fimages%2Fcontent%2Factabl-ui_test-colors%402x.jpg&w=3840&q=75)
Feedback round after design critique
![studying-brand-guidelines](/_next/image?url=%2Fimages%2Fcontent%2Factabl-ui_feedbacks%402x.jpg&w=1920&q=75)
Iterate again: mix indigo and gray, so colors woudl be more noticeable
![Mixing Colors](/_next/image?url=%2Fimages%2Fcontent%2Factabl-ui_mixing-colors%402x.jpg&w=3840&q=75)
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.
![Map color for the developers hand-off](/_next/image?url=%2Fimages%2Fcontent%2Factabl-ui_map-colors%402x.jpg&w=3840&q=75)
![Define style guide](/_next/image?url=%2Fimages%2Fcontent%2Factabl-ui_style-guide%402x.jpg&w=3840&q=75)
![Create and document components](/_next/image?url=%2Fimages%2Fcontent%2Factabl-ui_components%402x.jpg&w=3840&q=75)
The unified UI was implemented in all products, with one product undergoing a complete font style revamp.
Alice
![Alice](/_next/image?url=%2Fimages%2Fcontent%2Factabl-ui_new-alice%402x.jpg&w=3840&q=75)
Hotel Effectiveness
![Hotel Effectiveness](/_next/image?url=%2Fimages%2Fcontent%2Factabl-ui_new-he%402x.jpg&w=3840&q=75)
ProfitSword
![ProfitSword](/_next/image?url=%2Fimages%2Fcontent%2Factabl-ui_new-ps%402x.jpg&w=3840&q=75)
Transcendent
![Transcendent](/_next/image?url=%2Fimages%2Fcontent%2Factabl-ui_new-tr%402x.jpg&w=3840&q=75)
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 ❤️