.svg)
Enabling personalization
marketing for SME’s
Location
Spokane, WA
Product
B2B SaaS Web App
STAGE
Startup
ROLE
Product Designer, Front-end Developer
Market
Website Personalization / Conversion Optimization
Timeframe
Oct 2018 - Nov 2019
Overview
I was enlisted to redesign CloudEngage’s suite of website personalization software
Key methods used
- Heuristic Evaluation
- Information Architecture
- Customer Interviews
- User Testing
Problem
How can we make it easy for non-tech savvy marketers to use web personalization techniques to increase their website conversions?
To uncover issues with the existing product I started by interviewing current customers. I discovered that our customers understood the platforms value but they found it very time consuming to use.
Their reasons for using the tool also became clear. They wanted to increase website conversion rates through targeted on-site marketing.
As I was new to personalization software, I had to do my research to become familiar with it’s important concepts and use cases. I learned who the big players in the space were, common technical limitations, and most importantly how it can be used as an effective conversion optimization method.
Users &
Audience
Non-tech savvy marketing managers at who love to optimize content channels
With many competitors in the space, CloudEngage had carved out a niche customer base of car/RV dealers and small restaurant franchises. Our ideal users we’re small but agile marketing teams that wanted to accomplish great results with a limited team and budget.
While these companies usually had an outside agency handle their website so making even small changes to their website had a slow turn around time.
How I knew this
- Current customers fit this model
- Our pricing structure was geared towards these types of customers
- I interviewed 15 marketing teams at companies of various sizes
- New customer signups fit this model
Roles & Responsibilities
CloudEngage was a small startup team in which I was able utilize my full-stack product design skillset
CloudEngage consisted of our CEO, Product Manager, and three remote developers. I was the first UX designer to touch the products since their start in 2013. I also stepped in as a front-end developer to help implement the new user-experience.
Scope &
Constraints
A massive 6+ year old product
with feature bloat
The company had managed to survive for years and built a massive feature set for the product. However, the platform was still not solving customers pain points causing a high churn rate. It was clear we needed to dramatically simplify the product. My north star for this project was to enable customers to get value the day they sign up vs the current long waiting period (30+ days).
Process and
what I did
Identify and fix issues with the products main workflows
#1. Creating a personalization campaign.
This was the main flow of the app that allows a user to run a targeted piece of content on their website.
#2. Creating audiences to target.
The audience targeting settings is what allowed campaigns to be targeted to specific website visitors.
The first insight I had was how closely the app mirrored creating Facebook ads. A piece of ad creative + targeted users. Except instead of it being an ad on Facebook, it’s a personalized piece of content on your website. This concept led me down the path of separating out the user targeting from the ad creative as marketers are already very familiar with this concept. This also would enable the reuse of user audiences and creative content.
After designing and testing several iterations of prototypes, I landed on a streamlined wizard that guides the user through the campaign creation process:
Select a template, or start blank
Customize template
Select Target Audience
Publish and Run
Modernize the apps UI/UX via a design system
This helped to reduce design and development time as we redesigned the platform. I was able to design and implement the design system quickly. This gave our team a vision of the future and a much needed moral boost.
What this consisted of:
- Implementation/design standards
- Bootstrap based html/scss component library
- Figma-based component library
Address the disorganized links and information architecture
If users can’t find the things they are looking for they will become frustrated and give up.
I addressed this by sitting down with current users and giving them tasks to complete in the existing product. I found that many of them could not find areas of the product because they were in completely different sections of the product.
Through the front-end code, I was able to reorganize the content and retest with new users. I saw far less confusion and there weren't any questions asked this time around.
Improve customer onboarding and enable self-serve sign up
Currently, customers were manually setup during the sales process. To reduce sales costs and increase marketing campaign effectiveness, we needed a way for users to sign up and get setup without human intervention.
I solved this by introducing a sign-up and onboarding flow that walks the users through each of the important setup steps.
Outcomes and Lessons
Making the complex simple
As we implemented the design changes, our team was starting to see a significant uptick in product usage from existing customers. As our marketing efforts grew more customers started coming through the self-sign up path. Nearly all new customers were able to get set up without the need for support. This led to significant time savings and improved customer experience.
Overall, the updates proved to be a crucial step forward for the business. Due to our limited team size, there was still a lot of development to be done but things were heading in a confident and well-designed direction.
