Copy.ai

TL;DR

In a world before ChatGPT, I joined Copy.ai to design new methods to help both individuals and companies leverage AI in their daily tasks. I worked on re-designing the AI Text Editor with in-document generation/summarization, Workflows (which would pave the way for the shift in company strategy to becoming the "GTM AI Platform" brand positioning they showcase in Q3 2024), AI Image Generation, updated Billing/Credits/Seats UX/UI, Simplified UI internally referred to as "Magic Box", created the Design System for the application still in use today, and self-assigned and created a new app vision for where the company could be headed in the future.

Introduction

When I joined Copy.ai in July 2022, the product was focused on helping writers generate text, most commonly for blog posts and product descriptions. At the time, the company was focused on helping content creators improve their writing and generate new ideas from short text prompts.

Team Structure

During my time at Copy.ai, product team members worked in pods. Each pod had a designer, several engineers, and a product manager. I was one of three designers on the team. The design work I’m demonstrating in this case study is my own, and other team members’ assistance is mentioned where needed.

AI Text Editor Improvements

The first major project I worked on was addressing the issues with the Text Editor as it stood at the time. These were my initial notes regarding two of the most popular tools "Freestyle" and "Blog Post Wizard", as well as general things I noticed when reviewing the editor:

1. Freestyle
There is still a disconnect for me between the different sections of information requested and the final output. A few specifics:
a. Though I filled it out, the section of “What are you looking to create?” is marked “optional” and so I’m tempted to skip over it. This would cause more issues with the quality of results, though, I presume?
b. I thought I was using the correct syntax in the “What are the main points you want to cover?” section, but my results still showed up as bracketed responses


2. Blog Post Wizard
a. In the steps, it’s not always clear what elements are supposed to be interactive vs what I should just be reviewing and confirming
b. When the Blog Post was finished, the reading score in the bottom right section said “College”, but then after going back to the side-by-side editor with tools shown, it says 11th and 12th grade in the reading score. Did the score not get calculated correctly in the first view and the second one is the corrected score? Or is there a bug related to showing the score in different views?


3. Overall
a. The credits counter is quite small visually and not clear how the credits were used. I’ve used 15 in my testing of both Freestyle and Blog Post Wizard so far, but didn’t see any indicator as I was testing the tools how my credits were being affected.
b. I don’t see Blog Post Wizard in the Tools sidebar, and when I search for it, no results are found. Is this intentional because it’s still in Beta?
c. The title field is a bit too minimal, IMO. I only found it after going back to the Home page, and then realizing the default title was added to my first project. Then, when I clicked back into the title, I had to search for where to change the title and then found out I could change it by double-clicking into the field

In reviewing my concerns with co-workers, these sentiments were echoed. I felt as though a fundamental editor redesign was needed, but I knew that would take a considerable amount of time to design and test, so the first stage of improving the editor would need to rely on the existing layout, and modify only key areas to see which method was best received by users.

User Interviews

These different concepts were all created to make it clearer to users how to use different Copy.ai writing tools. With the 3 concepts created, I recruited users for interviews (conducted using Dovetail) I specifically recruited users who had been a Copy.ai user for at least 30 days, and who had used either the Freestyle or Blog Post Wizard tool. The familiarity with the platform was important, but users didn't need to be experts.

I structured my user interviews with the following questions

• What do you do? What is your company?
• What does your role involve? What are your responsibilities?
• What type of copy & content do you need to create on a regular basis?
• What do you use Copy.ai for?
• Please log in to Copy.ai and share your screen as we go through the excercise
• Have you ever used the Tools area?

At this stage of the interview, I provided a link to the Figma prototype, and had them keep their screen shared as I had them click through to each concept, providing their thoughts for each concept, while I took notes. I let users provide their initial impressions, unprompted at first. And then I would follow up comments, asking for the user to provide additional descriptions of what they pointed out. If they expressed dislike for a particular concept, I asked how they might change it.

Once users had provided feedback for all three concepts, I asked them to rank the "ease-of-use" for each of the concepts, on a scale of 1-5, with 5 being the easiest to use and 1 being the most difficult. I then asked which of the three concepts they preferred and why. Lastly, I opened up the call to user questions, if they had any they wished to ask.

Concept #1 User Feedback Excerpts

• Needs to be clearer as to what the user is trying to answer
• Loves “Add New” CTA
• Seems similar to the second one, but harder to understand
• Missing the specificity of inputs in the second section
• Likes the ability to drag-and-drop

Concept #2 User Feedback Excerpts

• Wishes it provided more hints in inputs, as opposed to current basic placeholder text
• Likes that it feels more like the rest of the app
• Feels intuitive
• Hints are welcome here
• With more context here, the user understands the ability to modify the content
• Likes that the editor is hidden by default

Concept #3 User Feedback Excerpts

• Unsure about what green text does, but it seems interesting
• The inputs & text are a bit confusing
• Hard to see the difference between sections
• Less approachable
• Not as clear what the user can or should do
• Wants a visual indicator of which elements are interactive

After tallying the results from each user interview, concept #2 was preferred over the others. A common practice at Copy.ai was rapid iteration. Once I presented the results, engineers began working to implement the changes and shipping the feature to a portion of users who were opted into "Experiments" to begin testing real-world adoption metrics. While those updates were being developed and shipped, I continued to work on refining the Editor experience.

Up until this point, the AI generation step was visually placed next to the Editor, but the actual experience was detached from the Editor. Often, users would not even use the Editor, which is why we hid the Editor by default until additional utility was added that would make it worth showing by default.

To better merge these features, a concept of Generation-in-document came about. Based on the user interviews I had conducted for the small UX improvements to the Editor, I started to tackle a larger re-design of the Editor that would incorporate the Tools & Templates that users enjoyed, with a more robust canvas for users to generate and edit multiple results in one, intuitive space.

The shift in this user experience brings the users attention into the document where work is or will be edited. Prior to this version, the Editor functioned as an after-thought, where users would occasionally paste content in and slightly change it. But with the updated UI/UX, the Editor becomes feature-rich, and gives users a reason to interact with the content directly alongside the other content they're creating. It is a permanent space that can be changed and updated, as users select other Tools & Templates, returning to generate new content into the same document if they wish.

Pushing the Envelope

Nobody knows quite what the future holds, but it's fun to attempt to create it. To push the envelope even further, and redefine what can be done with an AI-native Text Editor, I created a variety of concepts (more available upon request) to demonstrate how the Text Editor could look in the future.

Copy.ai Design System

While it wasn't specifically assigned as a project, I took it upon myself to create a formalized Copy.ai Design System. It grew over the months, and I added to it as I and other designers needed additional tokens & components. Figma Component Variants were just starting to become popular at the time I created this design system, so it was a fun challenge to push the limits of how many intuitive variants I could build right into the Figma Components.