Convead – Marketing automation tool for eCommerce

Convead – was my main work for nearly four years. It's a complex online tool for eCommerce. I'm responsible for all Convead UX and UI design.

After customers install Convead for their online store, it begins to track their visitors, shows clear website analytics, allows to run webforms, send auto emails and communicate with visitors through live-chat.

The application has several sections: analytics, contacts, automation, webforms, emails and settings.

The first section is Analytics where users see their sales funnel and traffic channels. At the right side, there are latest events and online users' activity.

The whole page is about 6 or 7 screens long (press the arrows below). It was quite a big challenge to put all the business, traffic and email-marketing metrics on one page. But now customers have a great dashboard where he can see everything without struggling with menus and other interface elements.

Actually, analytics section is the customers' favourite page in Convead.

At first, customers see only sales funnel and metrics. Experienced users begin to mention, that they can switch off some channels above the funnel, select a time period in the header.

Let's go back and look, how customers install Convead. After registration they are redirected to the settings page with five steps where they should enter website URL, choose CMS system and install the module, specify products xml-file URL, set currency and time zone and launch a trial period.

The user can't move to the next step if he has not completed a previous one. After one step is finished successfully, the next one starts automatically. The previous step is marked with a green tick.

Designing a Settings section I found a fine interface solution that works perfectly and allows to create any page combining headers and inside content blocks. Each page is divided into several sections now and a user can focus on the stuff he cares about.

A final version of technical sections:

In the Contacts section users get all information about their website visitors. They see predefined visitor's segments, get segment's statistics such as a number of orders, an average check and the total segment revenue at the top of the visitors list. Also, they can see segment's analytics, for example, top viewed and top purchased categories.

A customer can create his own segment using a visual constructor. He can combine characteristics, email campaigns, orders and other events rules with AND / OR conditions.

You cannot create a full conjunctive normal form here because there is only one OR block. But it is made to simplify the interface for ordinary customers.

This form UX is pretty tricky – I had to place a lot of input fields and combo boxes into one form.Variables of different type have different values and a different number of fields. E.g. variables of a string type have values "equal...", "includes...", variables of numeric type can be "greater than...", "less then...", email campaigns can be "sent", "not sent", "opened" etc.

Also for email and event type of a variable a user can set an additional condition for a time period and a number of events.

There was an interesting story with this form. It always took some time for a user to figure out how the form works. And there were a lot of questions about the way to combine the rules and AND / OR conditions.

It was not an option to simplify the form – it would take too much time, and we had some high priority tasks to do. So I found a great solution – just wrote two small examples near the conditions blocks. The number of users questions decreased dramatically and they started to combine pretty good conditions themselves.

From any visitor list you can go to the specific visitor page. Here you see all the information Convead has collected about the visitor: his purchase history, contact information, segments he enters and visits details.

At the right side you see visitor's timeline – sessions, page views, emails, cart updates, purchases. Right here you can send a message to the visitor and he will see it on the website in the live-chat window:

Convead has predefined scenarios, designed to help customers to launch their online marketing activities fast. Scenarios are quite simple and consist of a chain of webforms and auto emails.

We had an issue here – users didn't quite understand what they should do in the service. Some of them got lost, trying to find email campaigns and web forms through app navigation and didn't see that we have ready to use scenarios.

So I decided to make Automation page – the first thing a customer sees after he installed Convead, greet him here and tell what he should do to make Convead bring him the profit.

I used a metaphor of a path with a starting flag and a money bag in the end to show a customer what he should do and what he will get in the end.

I really believe illustrations and visual metaphors can make a huge impact on a customer experience. So even a serious SaaS product can use them successfully.

Final solution looks like this:

This page is the main section in Convead. The more scenarios customer would launch – the better his engagement and LTV will be. So we improve this section constantly to make it as simple as possible for the customer to get here and launch marketing scenarios.

Convead provides clients with webforms and interactive blocks of any types and shapes. They can use them as notifications, marketing banners, lead generation forms etc.

To create a webform the customer should choose one of the templates. They are divided into types and have large previews so the customer can see the content of each template.

After choosing a template a user moves to visual constructor where he can design a web form, add new blocks, edit settings etc. The constructor is flexible, it allows to combine practically any web form you need. You can edit size, form, colour, fonts, margins and change background image of a form.

Every block has its own settings, so you can edit it as you wish. Mobile and desktop versions can be edited separately so a user has a full control of a web form appearance. He can also preview it on a website.

Advanced customers can use HTML-blocks and CSS-style and code their own web form.

Using this HTML block we made several unique lead generation templates with a game mechanics. E.g. a web form "Wheel of fortune" asks for a customer email, and after he enters it the wheel begins to spin. If a user is lucky enough (we can edit a coefficient of luck in the code) he wins and gets a discount.

My frontend developer and I had a lot of fun working on this template. There is a lot of animation, small interactions, input field validation and two different result pages.

Email campaigns module – is a significant part of Convead and the main feature customers use every day. We have got a visual constructor, where a customer can combine an email using drag and drop and edit content in place.

We've made several specific eCommerce blocks such as "Cart", "Order", "Viewed products" that our customers – online store marketing guys – can easily use. They just need to drag one of these blocks to the email and Convead will do all the rest.

We have an editor for custom HTML emails as well. It allows you to edit HTML code on the left side and immediately see the result on the right.

Here I'd love to tell you about one small change that caused a great impact. We save changes automatically, but sometimes customers asked us how to save changes, where was the "Save" button. I understood, they were confused and scared they would lose the results of their work. It's not a feeling I wanted them to have.

So I made a small label "Saved" and showed date and time when the document was saved. Users stopped looking for a "Save" button since then.

The first screenshot as well as the last one was about analytics – it's not a coincidence. You should measure every marketing activity you provide in order to improve your performance. So every activity – webform, email etc. – has its own analytics dashboard that shows its efficiency.

Convead changes constantly to deliver more value to customers and increase customer engagement. Some of these sections have been already changed.

There is a lot more to tell about this project – it is complex and has a lot of features and ways to use it. I've tried to picture it in general. Peculiar aspects, features and product decisions will be observed in related articles.