Automatic brand scrape

PROJECT SUMMARY

Small business owners want to create marketing content that looks and feels like them. When they first create an account with Constant Contact, we ask them for their website so, if they have one, we can automatically scrape their site for their logos, colors, industry, and more.

PROBLEM

Getting started with digital marketing can feel overwhelming, especially when it comes to establishing consistent colors, fonts, and logos. A lack of branding can result in inconsistent messaging and missed chances to engage with customers in a meaningful way. Before this project, there wasn't an easy way for new trialers to get their branding into Constant Contact quickly.

HYPOTHESIS

Making it super simple to confirm your brand assets—after sharing your website during onboarding—makes it easy for small business marketers to achieve brand consistency and personalized content. This helps get things rolling faster, leading to more email sends and better overall customer activation for Constant Contact.

Customer sentiment: "I want my business's branding and content to truly reflect who we are—without dealing with a complicated setup."

BACKGROUND

After my recent onboarding and dashboard redesign, I've noticed users naturally start by filling out their profile. This is a big design win, as the goal was to gamify profile completion to collect more information about users right when they land on the dashboard for the first time. Filling out the profile is a quick and simple way for users to feel productive and make progress with their new account.

Here's an image from Quantum Metric showing the high click rate of the "complete profile" button.

Since new users were already going to the "complete profile" section, there was an opportunity to incorportate their branding as part of their setup. I wanted to help new users create a beautiful email that look and feels like their business.

‍

GOALS

Help users easily scrape their website, establish branding (industry, colors, logos, fonts, etc), and see their branding applied to their marketing assets.

Things to learn:

Do users find it easier to set up their look and feel for their marketing?
Are users more likely to send an email after setting up their improved BrandKit?
Are users more likely to update their profile?

Metrics to move:

Email sends
Account profile updates

Metrics to watch:

Activation
Trial to paid conversion rate

‍

MILESTONES

Scraping for branding involves a lot of backend development work, so we had to start small. Even though we had data showing that colors are the most interacted-with aspect of branding, scraping for colors is also the most complicated from a technical perspective. The reason it was decided to start with scraping the logo is so users could create marketing assets with their logo after the scrape. While images are highly clicked, they don't create consistent branding for our customers.

Data from Quantum Metric. Bottom buttoms left to right are "Logo, colors, images".

‍

Milestone 0: Replacing the current scraper to get faster results

Replace the current scraper so users can get faster results.

Milestone 1: Logo

Users confirm their logo from the scrape.

M2: Logo & industry

Users confirm their logo & industry.

M3: Logo, industry, colors

Users confirm their logo, industry, and colors.

‍

CONCEPT DESIGN

To start, I thought about the type of user who would be adding their branding in the profile (first-time users, people who want to make quick brand updates once they have longer tenure), and who would be going to the full BrandKit page (more capabilities and options). I also created flows for two scenarios: if a user gives us their branding during onboarding and if they don't.

If we DO get their website during onboarding

If we DON'T get their website during onboarding, there is a clear path from the profile (highly clicked by new users) to add their branding.

‍

WIREFRAMES

Before I dove into high-fidelity designs, I started basic concepting with wireframes after I reviewed the flows with key stakeholders.

Toast message to alert users that brand scrape is finished.

In the profile flyout, a tab where users can select what they want to keep from the scrape.

I also started thinking about the long-term vision of the feature to ensure the design I landed on was scalable.

Shows the various kinds of brand elements we will one day scrape.

‍

FINAL MILESTONE 1 DESIGNS

RESPONSIVE SIZING FOR TABLET SCREENS & SMALLER

‍

MILESTONE 2 - LOW FIDELITY DESIGNS

Moving forward from wireframes, I designed two concepts for approving scraped elements in the profile for milestone 2.

Concept A - a temporary tab in the profile for reviewing brand elements

Concept B - a secondary level page for reviewing brand elements in the profile

After reviewing the concepts with my design team (included another product designer, content designers, a design strategist, and a researcher), I landed on concept B. The secondary level sheet with an entry point from a card is a more common pattern.

FINAL MILESTONE 2 DESIGNS

Card in the profile if the toast message is skipped/dismissed.

Another use case I had to design for is if people don't give us their website during onboarding, but rather in the profile. I adjusted the website field to have help text under it explaining that we'll auto-scrape their site for branding when they save their website to their profile. I was hesitant about this flow at first because I didn't know if people would find the autoscrape invasive. I put up the test on UserTesting.com and got positive feedback from all 6 participants.

The tested prototype:

‍

MILESTONE 3

This milestone is a work in progress.

‍

PROJECT RESULTS

Check back soon for results!