Select Page

Content Designer

Agillic  //  UX Design  //  2021 to 2022

Redesign of a complex content editor for building emails, web pages and prints.

Introduction

The content editor used for building communication through emails, web pages and prints (direct mail) is by far the largest and most complex project in the redesign of the platform. There are more than 30-40 features and hundreds of user stories that I’ve written to cover these products. In this portfolio case I will highlight just a few of the many design challenges in the project. I’ll be happy to provide more details if relevant.

This project is a part of a larger strategy where the whole front end of the Agillic platform is being refactored in React. Everything from the login screen, dashboard and the assets manager to multiple rich content editors, data setup, flows builder and reporting tool are going to be redone and at the same time improved from a UX point of view. Read more about the long term strategy of the Agillic redesign.

The challenge

Many years ago the platform was been built from a technical perspective by some brilliant engineers and visionaries resulting in a very strong product when it comes to the many complex capabilities and solid data structure. However, throughout the years customer and user expectations have changed and a lot of new features have been implemented on top of the solution. Besides rebuilding the code in React it was time to redesign the editors from a user experience perspective with our users at its core.

Redesigning a new solution on top of a live environment is a challenging task. We constantly have to consider backwards compatibility and current usage of a given feature. Besides having many desired improvements and wishes from Product Managers and the business, we also had to have a very close collaboration with our engineers making sure that every dependency was thought of and that our design solutions were going to work. We had to dive into all our features, map them out, understand the current implementation in order to see if they were actually solving our user’s needs.

In Product Design we had two main tasks: Understanding our users making sure that the things we redesign and implement actually solves their needs, and a huge task of creating a design based on best UX-practices creating a consistent layout, intuitive interaction patterns and efficient user flows.

Restructuring

The content editor used for building communication through emails, web pages and prints (direct mail) is by far the largest and most complex project in the redesign of the platform. There are more than 30-40 features and hundreds of user stories that I’ve written to cover these products. In this portfolio case I will highlight just a few of the many design challenges in the project. I’ll be happy to provide more details if relevant.

This project is a part of a larger strategy where the whole front end of the Agillic platform is being refactored in React. Everything from the login screen, dashboard and the assets manager to multiple rich content editors, data setup, flows builder and reporting tool are going to be redone and at the same time improved from a UX point of view. Read more about the long term strategy of the Agillic redesign.

Screenshot of old push editor in the Agillic platform

The old email editor

Screenshot of old push editor in the Agillic platform

The new email editor

Designing with our user

The data setup in Agillic provides many strong options for segmentation and creating personalised messages. By providing a preview right beside the editor creates an immediate understanding of what you’re doing. Combining that with the option to see dynamic data on the fly from a recipient of your choosing makes you confident in your actions.

The result

From a UX point of view the challenge was to combine our users’ needs of wanting a simple and recognizable experience with the business requirements of having a scalable yet powerful editor utilising the capabilities in Agillic where dynamic data, use of Promotions (sort of a headless CMS for segmented, cross-channel content) and preview capabilities.

At the same time we had to consider a design that should be consistent to our other editors, that aren’t actually designed yet. Developing a UX foundation that is usable in many different use cases has been challenging, however it seems that we’ve come to create a stable structure and interaction pattern, building flows and a UI that feels intuitive and efficient.

The editor is currently released as a beta-version to selected clients and we’re getting great feedback so far. Now we will continue to incrementally build on the MVP and improve it alongside our users.

As with any project, I already have a list of improvements I would love to implement, however it seems that the product is in a good spot right now. Not only with this particular new editor in mind, but also when it comes to having a strong UX-foundation to work from going forward. One thing I would like to focus more on is to improve the efficiency working in the product where hotkeys and keyboard navigation is a very important aspect.

For more information I’d be happy to go through the project in more detail.

The Agillic redesign

Agillic is a Digital Marketing Automation Platform for marketers to communicate with their customers cross-channel via email, web, print, sms and app notifications. The platform has a strong reputation due to its technical features and data structure, however the user experience has not been on par. The product has a lot of complex functionalities with many possibilities of using data to target specific customer segments and personalise your communication to them, which is great for a successful marketing campaign – if you understand how to make use of it.

This issue has been a growing concern for the company. During interviews and field studies it was clear that a lot of the potential of the product was not utilised, as the users had problems understanding the product due to the way the experience was designed.

The strategy is to make a complete redesign of the platform and at the same time refactor the code in React. Since this is a huge project we are redoing and releasing parts of the platform throughout a longer period of time. This gives a lot of challenges since the redesigned features then have to be compatible with legacy capabilities. Because of that it has been important to have the final vision of the platform in mind when designing each feature, while simultaneously being able to deliver functioning solutions that fits into the current state of the platform.

Discover other projects