Abacus emedia

Abacus EMedia is a long-standing company based in the UK that specializes in a SASS platform for publishing companies, it is built to handle checkouts, Subscriptions, account areas, and campaign pages amongst others.

I assumed a full-time contract position with Abacus in June 2022. My expertise in design led to my selection, as the company sought an individual proficient in creating a new design system from the ground up.

Back to homepage

The challenge

When I joined Abacus, a SaaS platform tailored to the publication industry, the team was grappling with several significant challenges.

These included using a fairly outdated design tool which I helped them move to Figma, a tool I saw for them being more than just a design tool, developing a comprehensive design system, improving the checkout flows and account areas, and enhancing subscription conversions.

Understanding Product Flexibility

One of the initial steps was understanding the flexibility required for a product serving a diverse range of publication clients. Each client had unique needs and branding guidelines, which necessitated a design system that could accommodate extensive customization while maintaining a cohesive user experience.

To achieve this, I engaged with longstanding employees including developers, marketing teams, and clients, to gather insights on their specific requirements and pain points. This collaborative approach ensured that the design solutions we developed were aligned with the users' needs and expectations.

Dealing with Legacy Functionality

Abacus had several legacy features that were essential to their operations but were cumbersome and outdated. The transition to Figma provided an opportunity to streamline these functionalities.

I started by mapping out the existing user flows and identifying bottlenecks and usability issues. This analysis informed the redesign, allowing us to simplify complex processes and improve overall user experience without compromising functionality.

Creating a Design System

A significant part of my role involved creating a new design system from the ground up. This design system needed to be robust enough to support the development of new checkout flows, account areas, and other platform features.

The design system included:

Color Palette and Typography: Establishing a consistent look and feel across the platform.
Components and Patterns: Creating reusable components like buttons, forms, and navigation elements that ensured consistency and efficiency in design and development.
Interaction Guidelines: Defining how components should behave in different scenarios to provide a cohesive user experience.

The transition to Figma was crucial in this process, as it allowed for better collaboration, version control, and rapid prototyping. Figma's capabilities enabled the team to work more efficiently and iterate on designs quickly based on feedback.

Insights & findings

Through usability testing and continuous feedback loops, we gathered several key insights:

User Experience: Simplified checkout flows and intuitive account management significantly improved user satisfaction and reduced drop-off rates.
Customization Needs: Clients appreciated the flexibility of the new design system, which allowed them to maintain their unique brand identities while benefiting from the platform's improved functionality.
Efficiency Gains: The switch to Figma and the implementation of the design system led to faster development cycles and more streamlined collaboration between designers and developers.

End result

The culmination of these efforts was a more user-friendly, flexible, and efficient product team that better served the needs of Abacus's diverse clientele.

The new checkout flows and account areas provided a seamless user experience, leading to increased conversion rates and higher user satisfaction.

The updated CMS features and newly designed web elements enhanced clients' ability to attract and retain subscribers.

Summary

The transformation of Abacus's checkout and account areas was a comprehensive process that involved understanding user needs, addressing legacy issues, and creating a scalable design system.

By transitioning to Figma and developing new features and design elements, we were able to deliver a fresh updated to the platform that not only met but exceeded client expectations.

This case study highlights the importance of adaptability, collaboration, and user-centric design in successfully revamping a complex SaaS product.