What's The Problem?

How could I design a marketing landing page and hi-fidelity prototype for a generative, AI writing tool that could compete at a low-price point in a crowded marketplace?

Who's Using This Product

HAYDN is used by content creators, bloggers, and anyone else who needs to generate words or writes for a living.

My Role(s)

UX Research | UX Strategy | UX Design | UI Design

What About the Scope?

This project consisted of designing a marketing landing page and a mobile app interface.

This app was strategized / branded with an eye toward the thrill of AI circa June 2023.

I was provided with marketing copy, mid-fi wireframes for the marketing landing page, mid-fi wireframes for the app, and finally, an overall style guide.

What's Going On Out There?

First, we needed a marketing landing page. I started off with a look at the competitive landscape and I had two goals.

1) I wanted to study the information architecture of competitors to reveal business strategies.

2) I wanted to compare the strengths and weaknesses of competitors in the market to figure out the best angle to solve create Haydn’s information architecture.

I started by examining the most expensive and least expensive products in the marketplace.

Jasper.ai
Direct Competitor
Generative AI Writer‍

Strengths‍

Well rounded
Many Products
Experimental
Image Generation
Large Community
Lots of 3rd Party Support‍

Weakness‍

Complex
No Starting Point
Expensive
No Free Trial
Overwhelming‍

Rytr.me
Direct Competitor
Generative AI Writer‍

Strengths‍

Simple
Cheap
Free Option
Many “Use Cases”‍

Weakness‍

Too Many “Use Case”
Too Simple
Few 3rd Party Integrations
Few Community Options‍

Initial Approach To Information Architecture

Haydn’s information architecture needed to be simple, to be competitive and keep initial costs down. That means one, single product with a handful of features. Haydn could grow from there.

Validating The Information Architecture

I ran two tests.
‍
1) An Open Card Sort
2) First Click Test
‍
We ran tests with 5 people. All of them were professional writers to some degree. The open card sort allowed me to validate my approach to the information architecture of the product. The first click test allowed me to fine tune some content.

Uses cases were grouped into 3 main categories, while features and benefits were moved into the learn category. Keeping the use cases simple was the objective from the start.

Mid-Fi Iteration

Once the marketing landing page’s information architecture was validated, I iterated on some designs in order to create a landing page that was informative and exciting.

An Unexpected Problem

I wanted to turn my attention toward the styling, but there was a problem.Our inherited style guide pointed to a product that already exists–Rytr.

In order to stay competitive, we couldn’t be as cheap as Rytr and look the same as Rytr, too.All the talk in the style guide of keeping the tone light and stylistically generic, would not really cut it in the real world, against real competitors.

An Indirect Competitor Saves The Day

I turned toward an indirect competitor to help me figure out how to update the style.

Runway is not competing as an AI writing tool. Runway is an AI image and video generator.

Examining Runway, allowed me to further reflect on user’s mental models of AI.Like Japser, Runway use’s a strong visuals to play to the user’s imagination regarding AI.

Our style guide would have to be updated. These are example images from the style guide.

Using Runway's generative text-to-video function, Haydn’s style guide imagery was updated, in an effort to breakaway from the overly generalized visuals in the supplied style guide.

In an effort to match user's mental models of AI, the following video example of Haydn in action was added to the visual pallet.

Haydn's logo was iterated on to modernize the style.

Hi-Fi Concept Iteration

Using our validated information architecture and updated style guide, I iterated 3 concepts for Haydn, on mobile. I wanted to explore different possible themes for Haydn’s look.

‍I chose three different color pallets, all with modern themes, to keep “the thrill of AI”

I translated these three concepts into mobile screen tests of the landing page.

A small group of user testers felt the first option offered the most promise going forward. Clean, simple, and real. This approach used somewhat muted colors, but highlights based on Apple's Human Interface Design language. Thus, the interface would be somewhat recognizable and familiar, which when combined with something as "new" as AI would at as a nice counter balance.

A mobile first approach allowed me to solve some design challenges that could be applied moving forward to tablet and then desktop.

Final Hi-Fi Landing Page

Play to view Haydn's hi-fi desktop landing page in action, with light prototyping.

Final Hi-Fi Landing Page

I did another round of competitive analysis, but this time focused on the stylistic choices and visual aspects of Haydn's competitors.

By combing the updated style guide, elements from the landing page, and the best elements of competitors' apps, Haydn's mobile app was designed.

The same simple color pallet was used as a base, however, since there were more buttons, graphs, and interactions, more colors were included. Fonts were the same as the landing page. The same video elements were include, as well.

The base information architecture of the app was supplied by the style guide, but merged consistence with the landing page.

Play to view Haydn's mobile app in action, with light prototyping.

Lessons and Refelctions

I really enjoyed this project. The deep dive I took into competitive research, while time consuming, proved a useful barometer, allowing me to find realistic solutions to information architecture and style problems that could have an actual impact in the marketplace.

The number one thing I learned was the iterative process, and how effective it could be, especially when you have a style guide already in place (even if it needed some tweaks along the way). I also learned how complex and important information architecture can be.

I wish I had more time to delve into researching users' mental models of AI, because I think that is a highly fruitful avenue, when creating AI based products.