top of page
Cover photo -COPYSMITH – 12.png
logo.PNG

Empowering people to achieve more by integrating ad copywriting with cutting-edge AI technology.

UX-UI / Interaction design / Website Design /

Artificial Intelligence (AI) / Live project

Group 730.png
figma.png
google-meet-logo-3EBB5BEC63-seeklogo.com
miro-squarelogo-1585684801003.png

I designed an onboarding experience to educate users on how to use copysmith while creating their first AI-powered Google ad.

icons8-star-96.png

Project Highlight

Real-life project with direct impact on users while working in a co-existing team. Fast-paced project with short delivery times

icons8-designer-96.png

Role

Responsible for user research, interaction design, content strategy, and visual design for 2  product features- user onboarding and saving generated Google ads

icons8-laptop-96.png

Design Platform

Website design

icons8-calendar-480.png

Duration

1 month end-to-end Product design process in September 2020

The Problem
bg-copysmith – – 2.png

What is the Problem?

Users were distracted with decision-making steps, unclear about the navigation and content on the pages.

To create a solution to engage new users while educating them on how to use Copysmith which shows the value of the product.

 

Business goal: Develop a design flow to ship in a short time of 1 week using minimum resources.

Why is it a problem?

Why is it a Problem?

Users were confused as they created a Google ad, and were confused about the capabilities of the tool and were unsure if it was a good fit for them. They enjoyed the AI-generated ads and how close the ads were to their imagination.

 

Even though they were impressed, the experience was not smooth and it was tough to understand the content on the screen. It was evident that a good user experience drives a product and it was necessary to fix the bugs to get more customers.

The solution
bg-copysmith – – 2.png

The Solution

The onboarding experience was designed to educate the user on how to use the tool. The solution shows a short onboarding process, with tooltips to walk the users through the steps as they create their first ad.

 

It was important to reduce confusion and avoid user distractions and minimize decision-making interactions.

1.png
Group 741.png
The Process

My Process

icons8-content-80.png
icons8-person-80.png
icons8-pass-fail-96.png
icons8-search-480 (1).png
icons8-journey-80.png
icons8-pencil-96 (2).png
icons8-browse-page-96.png
icons8-person-80.png
icons8-pass-fail-96.png
icons8-browse-page-96.png
icons8-content-80.png

User testing & customer onboarding

Comparative

Research

User journey map

Storyboarding

ideation

Mid- fi wireframes

User Testing

Hi-fi prototype

bg-copysmith – – 2.png
Untitled-1@3x.png

Project Background

Copysmith is an website tool that generates AI-powered ads for diverse templates like Google, Facebook, Amazon, SEO Meta tags, and more!

Businesses create ads with little effort by putting in a few keywords to generate ads with a specific tone and jargon that appeal to their target audience.

Currently, we were onboarding our customers through a google meet call to help them create their Google as. So, our goal was to create an onboarding feature for copysmith.

 

Current impact on users

Through 30 user interviews, it was evident that users were hiring copywriters to write and publish ads for them. But most of the time users could not see ads translate to what they wanted to advertise.

Users lost interest and were frustrated when they could not know how to navigate through the tool. They wanted to exit the product midway, but with some assistance, users created their first ad.

 

After creating their first ad, users were overjoyed with the outcome as exactly as they imagined and even better! Now, users wanted to edit their ads, save them for later use, and also share it with their team.

83%

(25 out of 30)

Distracted with long sign-up processes, confused aboutcontent

90%

(27 out of 30)

Edit ads, save ads and share it with their team

Comparative research

With my task clear, I explored other online copywriting tools like Copy.ai, snazzy, and phrase, to understand more about copywriting and how the user experience was.

I was curious to understand the strategies in  "onboarding" and  I researched apps like Duolingo, tumbler, and slack and noticed they use Bots, tooltips and walk the user through the steps in the app.

bg-copysmith – – 2.png

User Journey for Onboarding

icons8-working-with-a-laptop-96.png

Educate the

User

icons8-hammer-96.png

Assist while users create 1st Google ad

Group 744.png

Show the capabilities of the product

icons8-star-96.png

Make the users feel the value of  the product

Storyboard Ideation- Onboarding

Key features:

•     Short process

•     Sign up before trying product

•     Use product hands-on

•     Tool tips for assistance

•     Create a "WOW" moment

•     Payment details at the end

onboardign storyboard.jpg

Mid-fi wireframes

Start.png

Welcome screen

sIGN UP.png

Sign up screen

onboarding4.png

Generating ads

Onboarding1- audience.png

Creating 1st Google ad with assistance

onboarding5.png

Saving ads

payment.png

Payment page before saving ads

bg-copysmith – – 2.png

User testing

I made quick mid- fi screens and tested them with 10 users. A short process with tooltips for assistance was useful.

 

However, the sign-up section and the payment details section made users pause and think during the process. During the decision-making steps, users were not sure which account to sign up with or which card to add. 

80%

(8 out of 10)

Rethinking onboarding features

I realized that users were hesitant to provide personal information when they did not know how useful the tool was. For a smooth onboarding process, I eliminated the payment process and suspended the sign-up process until required. 

Key Product Features

Key Product features in Hi-fi Prototype

With the observations from the user testing, I made a few iterations that ease the user experience, immediately making the user interact with the tool to gain trust, show the value of the product, and demonstrate how useful they tool is to the user.

01

Welcome message

Users jump right into the tool and a welcome message makes the experience more personalized to the user.

Impact: Shows the value of the product by diving right into the tool.

welcome.png
Group 741.png

02

Length of the process

Visual elements show how long the process will take to set an expectation for the user. 

Impact: Short process keeps the users focussed and attentive.

length.png

03

Tooltips

Tooltips guide the user as they fill out the keywords and content and give an overview of the features and different intervals. 

Impact: Users were able to fill in the input fields more efficiently than before and took 1 minute on average. Were clear and confident at every step and did not require any assistance.

1.png
tootltip.png

04

Generating a new ad

Users generate their new ads after they enter the input fields. This is where I create the "WOW" moment. Users can  "favorite" the ads they like and the AI regenerates ads and displays more content similar to the language and content of the liked ads.

Impact: Users understood the capabilities of the tool and how useful Copysmith was to them.

genrate ads.png

05

Saving ads

When the users like the ads, they want to save them. This is the first time users name their ad campaign and are required to sign up to access the saved ads.

Impact: Give users the ability to come back to the ads and edit them or share them with co-workers or friends

campaighn.png
sign up.png

06

Free trail

After signing in, users can access their saved and can generate new ads for up to 7 days. A decision was made to get new customers. After 7 days, the user would be prompted to subscribe to one of the plans to continue the service. 

Impact: Users had an incentive to try unlimited ad generations and comfortable making a decision if this tool was correct for them leading them to subscribe to the service. 

free trial.png

Measuring impact

Users completed the onboarding successfully and stayed focused and enthusiastic as they generated Google ads.

Business outcome: Shipped the product in 1 week and we had 2X more customers subscribe to one of 4 subscription packages.

15 / 15

bg-copysmith – – 2.png

Key Takeaways

  • In a super fast-paced environment, managing increasing responsibilities switching between deliverables was challenging. I learned to prioritize my work and responsibilities and delivered them on time. I learnt to set expectations, define my scope and my bandwidth for the task I am given.​

  • I was able to convey the importance of a user-centered product and to add each feature with proper reasoning and when in doubt, I would suggest quick A/B testing.​

bottom of page