CM.com’s most successful application was to include new, rich media channels. The UI needed updating to facilitate the creation of rich messages, which created the opportunity for a redesign to improve adherence to the Aurora design system and to speed up engineering effort for additional future channels.

Process

1. • 🔍
   • User Research
   • User research into information hierarchy & flow
2. • 🧰
   • Technical Discovery
   • Collaborate with tech leads to create one coherent architecture fitting for all types of (future) channels
3. • 🎨
   • Design
   • Iteratively design the new application, adhering to DLS, applying insights, and creating a fully interactive prototype.
4. • 🥼
   • Evaluate
   • Evaluate the resulting new user flows with users.

🔍 User Research

Recorded user journeys were analysed using Fullstory, creating a baseline for Success Rate, Conversion, Time On Task and Frustration (a combination of rage clicks, dead-ends, and returns).

8 Users were interviewed and observed on how they use the application to send out their marketing messages. Here are some highlights.

🧰 Technical discovery

The project would have major impact on engineering. The editors and previews for each channel were coded manually, meaning that the simplest changes cost a lot of effort to fix it across all available channels.

We constructed a universal data model for all supported channels, based on CM.com’s messaging API. This allowed for a single form to be used for any channel, promising a consistent user experience.

Front-end has little adoption of the Aurora Design System. This makes maintenance time-consuming and results in inconsistencies between steps and screens.

🎨 Design

The original design was made using Sketch. But later during the project, we (the design team) decided to make the switch to Figma. This allowed me to create an interactive prototype that was easier to test with stakeholders and end-users.

Addition to design system: phone preview

Scroll down to find highlights of the design!

🥼 Evaluation

The interactive prototype was tested with engineers, customer success managers, customer support agents, and 5 users.

Some highlights

Alleviating send anxiety through a realistic preview

One of the more salient insights involves so called ‘send anxiety’. Sending a message to more than 1.000 people can be intimidating, and the message should be 100% correct.

The new message editor screen helps alleviate send anxiety in multiple ways. At first, the highly dynamic is true to the channel chosen for the message. This way, the user can see exactly what their recipients will see when they receive the message.

Cross- & Upsell

The original application was build as a development tool, without a SaaS mindset or goals. It therefor didn’t use the available touch points for potential up- or cross-sell.

Research revealed several potential up- and cross sell opportunities across the application, for example to easily top up credits if funds are low, or when rich media could be beneficial to create an easy way for users to try out a new channel.

Responsiveness

Research showed that about 5% of the first-time visits is on a mobile device, but quickly switch to a desktop device, resulting in 1% of all people being on a mobile device. The user experience could be improved by proper responsiveness of the application.

Celebrate successes

The original campaign creator had no success state after successfully scheduling or sending out a message. Instead, users were lead to the overview of all campaigns created.

The moment of successfully completing a task is a great opportunity for some positivity. A new end-state is added, which includes an escape for the user to undo their action (if they suddenly spot a mistake) and next actions are offered.

The right illustration was randomised, selected from one of the 7 below. The app icon is dynamic, changing the the appropriate app chosen for the campaign.