Talkable is an e-commerce utility for B2B2C, allowing enterprises to launch referral and loyalty programs on their sites.

Talkable is an e-commerce utility for B2B2C, allowing enterprises to launch referral and loyalty programs on their sites.

Talkable is an e-commerce utility for B2B2C, allowing enterprises to launch referral and loyalty programs on their sites.

One Talkable team member invited me to join their team in the Senior Product Designer position. The main goal of this hire was to update the outdated system, make it more usable, and take the lead on the whole design direction at Talkable.

Responsibilities

  1. Take the legacy UI Kit into a modern design system.

  2. Integrate progressively requested features into the design flows. Leverage between quantity and user experience to make it feel easy to use enough.

  3. Take the data from the data analytics team and make design decisions on the default theme, seen by millions of users a day.

  4. Be deeply integrated with the Talkable team, and make decisions collaboratively, because the team is the core user of the Talkable admin panel since they maintain all the referral and loyalty themes.

2018-2020

Product Design
Design Leadership
Design for Enterprise
UI/UX
Sketch App

Product Design, Cybersecurity, Crypto, UI/UX, Sketch App

Quick FAQ

How does Talkable work?

It works the same way as embedding YouTube videos on your website. The merchant installs Talkable’s <IFRAME> code into its Shopify, Magento, or any other platform, and the Talkable team does the rest.

It works the same way as embedding YouTube videos on your website. The merchant installs Talkable’s <IFRAME> code into its Shopify, Magento, or any other platform, and the Talkable team does the rest.

It works the same way as embedding YouTube videos on your website. The merchant installs Talkable’s <IFRAME> code into its Shopify, Magento, or any other platform, and the Talkable team does the rest.

How does referral work?

To understand the whole complexity and dependencies in the process, you always need to keep in mind the following flow.

How does loyalty work?

Loyalty is a separate Talkable product, so the project's setup is completely different from referrals.

Team structure

The diagram on the right shows the strongly formed team's hierarchy. Here, the CEO & Marketing Team are actively working on strategic goals, Sales and CS teams are communicating with clients and taking development decisions with full responsibility. Product, CM, and PS teams are separate development teams, who are working on clients' requests.

User Profiles

Initially, we defined a set of personas to empathize with and to design for, to make the right decisions.

Priority 1

The Campaign Manager would be interacting with the admin panel, the one I was designing. Every design component tends to ease the campaign manager's job.

Priority 2

The Marketing Manager tends to see reports and the main dashboard; however, they do have access to the control panel.

Priority 3

Professional Services team members are the ones who will be implementing campaigns and interacting with the admin; however, they have their own editor.

Objectives

When you have a comprehensive list of people you would design for, you can plan ahead and define your objectives.

Seamless Experience

Since the Talkable product had lots of legacy design made in Photoshop and spread out between team members, I needed to rebuild the existing set of components into a working design system that could be developed as software accessible for all user personas.

New Products

I was working on a way to represent new Talkable products in one admin panel. The complexity of that goal is similar to incorporating Confluence into Jira software. All data, reports, editor, and campaign setup should be on the same platform for all products.

Easy To Use

Balance between the overcomplexity of the new features requested by Enterprise clients and the ability of SMB clients to self-serve inside the platform. The first ones are able to request features to be done, while the other ones are not.

Lead to Enterprise

Company goals were changed due to COVID. To take care of financial stability, we were forced to switch our attention to Enterprise clients. This also affected the overall complexity of the UX patterns due to Enterprise customers' requests.

Design Process

Challenges

During the design process, you may find some incredible challenges hidden under the project's hood.

Outdated back end could lead to product development slowdowns

We had a back end written by Talkable's founder back in 2008, which led to unexpected logic breakouts that needed to be fixed with the collaborative work of all the teams today. In the Reporting section, for instance, the overloaded Talkable infrastructure had issues with loading big chunks of data. The data, for the dashboard and metrics breakdown, was used by the Customer Success team to set goals for campaigns.

Divide and rule: features priorities on a roadmap

Back in my first days at Talkable, I did the UX Architecture audit because they didn't have proper navigation between the platform's sections. Each flow had a priority number from 1 to 6, to form a multi-layered admin panel.

Legacy product learning curve is not exponential, but linear

I had one rule when entering a new business: from the very beginning, as a designer, you have to learn about the industry as much as possible, read every case study, and analyze the competitor's landscape. However, the deeper you study, you realize that the number of variables is growing proportionally to the time you spend on that study. I cannot say that I finally fully know the referral marketing business because it is constantly changing, and new variables appear.

Resources matter: plan ahead your front end team work

To save time, before sending the designs into production, I learned to spend as much time as possible with the front end team, to approve updates and UX tricks. Talking to developers matters because, first, you all learn how to connect with each other and be productive, and second, to clarify even the smallest issue that could appear during the development. How it affects the UX flow and if there are any bottlenecks. In the very beginning, I felt outside of the development flow since the teams were separated.

And so on and so for: marketing products have a lot of similarities

The main goal of that type of marketing technique is to keep the customer hooked on the deals you provide. Referral, email capture, loyalty, and cart abandonment marketing techniques are focusing on one thing – the customer. So that, the major functionality is quite similar, making it hard to differentiate them. That challenge led me to create an additional layer of priority.

Structure and Hierarchy

Scalability of the platform was a crucial part of further development, so I stepped up into this architecture.

Design Process

Challenges

During the design process, you may find some incredible challenges hidden under the project's hood.

Outdated back end could lead to product development slowdowns

We had a back end written by Talkable's founder back in 2008, which led to unexpected logic breakouts that needed to be fixed with the collaborative work of all the teams today. In the Reporting section, for instance, the overloaded Talkable infrastructure had issues with loading big chunks of data. The data, for the dashboard and metrics breakdown, was used by the Customer Success team to set goals for campaigns.

Divide and rule: features priorities on a roadmap

Back in my first days at Talkable, I did the UX Architecture audit because they didn't have proper navigation between the platform's sections. Each flow had a priority number from 1 to 6, to form a multi-layered admin panel.

Legacy product learning curve is not exponential, but linear

I had one rule when entering a new business: from the very beginning, as a designer, you have to learn about the industry as much as possible, read every case study, and analyze the competitor's landscape. However, the deeper you study, you realize that the number of variables is growing proportionally to the time you spend on that study. I cannot say that I finally fully know the referral marketing business because it is constantly changing, and new variables appear.

Resources matter: plan ahead your front end team work

To save time, before sending the designs into production, I learned to spend as much time as possible with the front end team, to approve updates and UX tricks. Talking to developers matters because, first, you all learn how to connect with each other and be productive, and second, to clarify even the smallest issue that could appear during the development. How it affects the UX flow and if there are any bottlenecks. In the very beginning, I felt outside of the development flow since the teams were separated.

And so on and so for: marketing products have a lot of similarities

The main goal of that type of marketing technique is to keep the customer hooked on the deals you provide. Referral, email capture, loyalty, and cart abandonment marketing techniques are focusing on one thing – the customer. So that, the major functionality is quite similar, making it hard to differentiate them. That challenge led me to create an additional layer of priority.

Structure and Hierarchy

Scalability of the platform was a crucial part of further development, so I stepped up into this architecture.

Design

Dashboard

Notes

Here you can see my navigation design choice. There's a big room for improvement though.

For who

Pam Anderson, Marketing Manager at Enterprise Company

Purpose

To have an overview of how a campaign performs, take full control of a campaign's settings.

Referrals

Campaign Details and Rules

Campaign Details and Rules

Notes

Here are the craziest amount of controls you have to fit in to adjust the campaign's settings.

For who

Daria Fesyura, Campaign Manager at Talkable

Purpose

To have an overview of how a campaign performs, take full control of a campaign's settings.

Loyalty

Campaign Rules

Notes

Even if I thought that Referrals' complexity and settings list are huge, this one is incomparable: Loyalty settings became so huge that it was inevitable to introduce multi-functional popups to control all the settings on one screen.

According to the results of the team's questionnaire, they prefer to use all the settings on one screen and switch between browser tabs rather than having settings spread out between multiple pages.

Loyalty campaign type "Tiers" made the situation even worse, so I was forced to add popups for their settings too. I'm sorry.

For who

Daria Fesyura, Campaign Manager at Talkable

Purpose

To set up a loyalty campaign, update tiers, and actions.

Customer Service Portal

Person Lookup

Notes

The Customer Service Portal is made to solve customer support requests related to Talkable's areas of responsibility.

For who

Mike, Freelance Customer Support Merchant Representative

Purpose

To have an overview of the merchant's customer profile.

Settings

Placements

Notes

I took one exemplary settings section. When thinking about simplifying it, keep in mind Talkable's broad list of brands and their needs.

For who

Stacey Ukhova, Customer Success Manager
Daria Fesuyra, Campaign Manager
David Edwards, Head of Product

Purpose

To give the possibility to manage referral & loyalty pages display locations on a specific merchant's URL.

Default Themes

Notes

Legal Compliance, Accessibility Compliance, ADA WCAG 2.2 Compliance, Responsive Fluidly

For who

Natalia Zozulya, Professional Services

Purpose

For any placement we were offering, we built a theme that Professional Services will use for making a campaign design.

Project Resolution

Enterprise Design is more like Tour de France

I would work on a similar enterprise product again when I would be a little older. You could expect to see the work you've done in production in a year or more. That's why I left Talkable – I saw room for the improvement of my lifestyle and opportunities. I felt that digging into enterprise would lead me to the life that I didn't want to have. I was missing drive.

COVID could change your business model

I was thinking about the rapid growth of my design team at the very beginning. Then COVID-19 came. It forced us to bring our attention to enterprise clients since it was easier to sign a long-term deal. That stopped me from thinking that I could design software for all matters of clients, and focus on the horizontal scale, predominantly features for big clients. There I found myself stagnant.

However, during COVID, we had the time and resources to reduce churn by 10%, I call it sales, design, and marketing achievement. I simplified the integration flow, and the whole system got an updated look that made the interface relatively easy to use.

If odd-looking design does its job, there's no need to make it look better

I will explain. Resources. In enterprise, you can't just make a design transition from bad to good. In a team of three, you wouldn't be performing a design change for a product with eight years of legacy. I got three years of steady UX and UI improvement, with a product thinking on giving users what they need in their complex business.

Results

80% of women

Participated in more than one loyalty program.

66% of customers

Modified their purchase behaviour to maximize points.

20-125% increase in profitability

When our clients reduce churn by just 10%.

Up 42% in loyalty customers

18/42 customers requested to launch a loyalty program as soon as possible.