Aleph Design System

Context

Company: Aleph
Timeframe: 2024–2025
Role: Product Design Director (contract)
Note: Published with client’s consent.

Aleph is the largest ad reseller partner in the world, operating in over 150 countries. The holding of companies relies on several owned and operated software systems, which used to be designed and developed in isolation by different internal and external teams despite a common stack, back-end services, and infrastructure.

Mission

Our team sped up the overhaul of Aleph’s Wise.blue Next app by using custom-styled UI components but no formalized library. It was intended from day one but ended up postponed indefinitely in favor of priority feature development.

Porting the platform for Spotify Ads opened a window of opportunity to develop the design system and replace the disconnected component instances in the product. We agreed on the v1 scope and formed a plan for gradual front-end clean-up.

Contributions

I was responsible for driving the design system from inception to global adoption.

Hands-on contributions:

• Designed the foundational set of UI components as part of the Wise.blue Next redesign
• Designed the v2 extended scope with implementation improvements
• Implemented the design system’s rebranding to Aleph’s corporate visual identity
• Designed and wrote the design system manual
• Wrote each component’s technical specifications for development
• Documented every product instance of every component, with the required amendments, for the front-end clean-up

As a director, I led a team of two UX+UI designers through the codification of the existing informal UI into a textbook design system v1 implementation. Later, I worked closely with the VP of Product Management and the Engineering Manager on securing executive buy-in for institutionalizing the design system globally and assisted internal and external development teams with adoption.

Highlights

Accessibility

In addition to achieving Web Content Accessibility Guidelines (WCAG) AAA contrast compliance for most colors, with AA as the ensured minimum, we optimized the components’ design for all other crucial accessibility standards.

Rebranding a design system

Converting a design system from one brand to another was a serious challenge I hadn’t tackled before. The anxiety of breaking a stable implementation was real, despite having version-history rollback.

The toughest task was retrofitting the color system to Aleph’s brand palette while the existing Wise.blue tokens were in use everywhere in production. The solution was to align each baseline spectrum color’s hue with its brand’s counterpart, optimize the hue contrast of the remaining colors accordingly, and then carefully tweak individual tone values to match each brand color while preserving consistent optical gradation.

Typography

Neither of the brand typefaces used globally across Aleph marketing was suitable for high-information-density apps. A typeface change also wouldn’t be a simple CSS declaration swap; their drastically different vertical metrics would have required extensive refactoring of font sizes, container heights, and vertical paddings and margins. Therefore, Inter was added to the mix.

Similarly, the brand book’s type scale, designed for marketing website use, was extended with a styles matrix for software apps.

The Menu Selection component family pushed Figma’s library system, and our sanity, to the edge.

In the initial implementation, toggling between the auto-layout Fill and Hug behavior required manual adjustments to a series of nested layers for every instance of the component. Instead of staying in the flow of designing a feature, a designer could waste hours wrangling the component and relearning how to achieve desired behavior.

We wanted a component property for controlling whether the dropdown menu overflows or resizes together with its select box. Achieving that, with the menu absolutely positioned so it overlaid elements beneath it, while the select box remained in the layout flow, and the list remained a universal standalone subcomponent, was next-level construction voodoo.

The standard date picker pattern requires tens of arrow clicks to select a date a couple of years in the past. We improved it by changing the UI into a scrollable timeline with years as anchor links for point-and-click and keyboard value input methods supported in parallel.

Credits

VP Product Management: M. Pangerc
Engineering Manager: S. Križanič
UX+UI Design: S. Rotter, A. Gjorsheska
Design Engineering: N. Ilievski, R. Aminov, A. Fajfar
Quality Assurance: H. Genas