Ghostwriter

Tailwind Ghostwriter

Enhancement

2022

Capturing Value for Users
‍Tailwind is your all-in-one tool for small businesses made to feel like a marketing team. Easily plan, manage, create, and batch-schedule social posts to grow your business and reach the right audience.
‍
With the emergence of AI capabilities in SaaS products, Tailwind was looking to add new value to its existing user base. Ghostwriter is a content generation tool that allows users to generate titles, captions, and more for various use cases. Ghostwriter saves effort and streamlines user's marketing content in half the time.

My Responsibilities

I worked collaboratively with the product team to establish a set of rules on how to implement Ghostwriter across the app. I developed the UI and implementation specifically for our QuickScheduler feature. Additionally, I established a loading state pattern for Ghostwriter to implement across the app, worked with the team to update the design system, and helped develop a new brand and best practices for user Ghostwriter within Tailwind.

After its launch, Ghostwriter quickly became the second most used feature for Tailwind. Within its first 2 months of being released to users, generations of Ghostwriter content increased 3x.

QuickScheduler page experience in Tailwind.

Ghostwriter in Quickscheduler

QuickScheduler is the social media scheduling feature that allows users to quickly batch schedule their work. To provide additional value, we wanted users to have the ability to generate ad copy for the post they were working on. The in-line feature had to be non-intrusive to their flow, but discoverable enough to continue using and develop product stickiness.

In collaboration with other product designers on the team, I developed a UI within the caption section of the form to introduce Ghostwriter to the user.

Generating the Content

Users have a series of controls to dictate what the Ghostwriter output will contain, including keywords and a call to action.

Additional information is available in a tooltip form to provide context as to why a user would want to be specific for their copy content.

Reviewing the Output

After returning the output to the user, we provide three options based on their controls. They can cycle and make in-line edits before finalizing their selection.

Saving the Output

Once users are finished reviewing their output, the in-line Ghostwriter generator will close and the caption input will be filled with the selection they've made.

If opened again, users will still have their previous outputs saved.

Generation Process

For users to receive their outputs, they'll have to wait anywhere from 5 seconds to upwards of 20 seconds depending on the use case. As a part of developing Ghostwriter, I was tasked with creating a loading state that could work across any output type.

I sat down with engineering to understand the technical aspect and learned generating outputs was a three-step process. I used this technical basis to design and iterate on a solution.

Team Feedback

Based on collaborative feedback from the team, a loading bar-like concept would be the most streamlined and easily implementable approach for the user. To reduce the feeling of waiting, I developed a series of label states to cycle through to communicate to the user what was happening on the backend, and by the time the generation state hit the third step, I was able to include real-time feedback as apart of the implementation hand off so a user could read the output as it was being returned.

The voice curated for the labels was nonmetaphorical and direct; limiting the amount of technical jargon. Over time, as generation decreased due to ample work from our devs, some label states could be removed because of the drop in generation time.

Old UI component for Tailwind Ghostwriter.

Updated UI component for Tailwind Ghostwriter.

Personalizing Outputs

After early adoption, the team wanted to add additional value to customers based on user feedback. One major signifier from users jumped out. Users wanted their outputs to feel more "personalized" to their business.

This opportunity led to the establishment of a personalization profile. All that was required from a user was their website. It was my responsibility to figure out a way to capture those users.
‍
After taking a look at the highest used features in the app, and in collaboration with the marketing team to help with copy, I designed an in-app banner to entice users to try out the new improvement.

User Adoption

Within its first month of release, there was a 4x increase in personalized content being generated. 82% of users who had a personalization profile used the output when generating content. 74% of users make zero edits to the personalized content when generated.

Variety of UI components for the Tailwind Ghostwriter ecosystem.

Developing an Identity

The team wanted Ghostwriter to be a recognizable feature across the app. Because of the variety of applications users could interact with, designing an icon, recognizable components, and rules of use were important.

Based on its name, a ghost icon was designed by a fellow team member. Users know when they see our mascot, there is some form of generation capabilities associated with it. In addition, button states, specific labels, and coloring were implemented to denote the types of user feedback.

Now established, the team saves both time and effort on the designs and development side when implementing and expanding use across the app.

Downstream Effects for Tailwind

After establishing Ghostwriter as a major product offering for Tailwind, it has become a driving force in user adoption rate and directing the product roadmap by identifying the top-performing use cases. With those top-performing use cases in mind, the team can research new areas of opportunities to capture for the customer.