Haydn

Haydn

HAYDN is a generative AI, writing mobile app for bloggers, content creators, and anyone else who generates words for a living.

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.

What's
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?

What's Going On
Out There?

What's Going On
Out There?

Business Polemics

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. and thus a business strategy.


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

Jasper.ai

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

Strengths

Simple

Cheap

Free Option

Many “Use Cases”

‍

Weakness

Too Many “Use Case”

Too Simple

Few 3rd Party Integrations

Few Community Options

Information Architecture Synthesis

Full Synthesis

Some patterns and strategies began to emerge immediately. Jasper was trying to corner the market, by becoming a one stop shop for content creation. Jasper steadily rolls out more features, like image generation, and more 3rd party integrations and strengthens their user base through community involvement in blogs, forums, and learning/explanation videos. Jasper is also, currently, the most expensive AI writing tool. When money is no object, users will gravitate toward Jasper and their value proposition, and, most likely, stay there as long as Jasper keeps pumping out new features. A new product can’t compete directly with that approach. Which is probably why Rytr made the choices they did.Looking at Rytr, we can see one company’s attempt to position themselves as a lower cost alternative. While Rytr lacks the bells and whistles of 3rd party support, image generation, and an overall slickness, they try to position themselves as a sort of “Swiss army-knife” of writing tools. Rytr advertises over 43 use cases. They break down use cases so granularly that there is a risk of nullifying the promise of AI, subduing the “thrill”, with a tradeoff of safety. In the initial synthesis,Haydn’s best bet in competing in the crowded market would be to keep the low price point of Rytr, but make the overall experience closer to Jasper’s. To achieve this, Haydn might need to temporarily skip offering separate products and instead focus on making each feature highly engaging and easily understandable.

Full Synthesis

Some patterns and strategies began to emerge immediately. Jasper was trying to corner the market, by becoming a one stop shop for content creation. Jasper steadily rolls out more features, like image generation, and more 3rd party integrations and strengthens their user base through community involvement in blogs, forums, and learning/explanation videos. Jasper is also, currently, the most expensive AI writing tool. When money is no object, users will gravitate toward Jasper and their value proposition, and, most likely, stay there as long as Jasper keeps pumping out new features. A new product can’t compete directly with that approach. Which is probably why Rytr made the choices they did.Looking at Rytr, we can see one company’s attempt to position themselves as a lower cost alternative. While Rytr lacks the bells and whistles of 3rd party support, image generation, and an overall slickness, they try to position themselves as a sort of “Swiss army-knife” of writing tools. Rytr advertises over 43 use cases. They break down use cases so granularly that there is a risk of nullifying the promise of AI, subduing the “thrill”, with a tradeoff of safety. In the initial synthesis,Haydn’s best bet in competing in the crowded market would be to keep the low price point of Rytr, but make the overall experience closer to Jasper’s. To achieve this, Haydn might need to temporarily skip offering separate products and instead focus on making each feature highly engaging and easily understandable.

Full Synthesis

Some patterns and strategies began to emerge immediately. Jasper was trying to corner the market, by becoming a one stop shop for content creation. Jasper steadily rolls out more features, like image generation, and more 3rd party integrations and strengthens their user base through community involvement in blogs, forums, and learning/explanation videos. Jasper is also, currently, the most expensive AI writing tool. When money is no object, users will gravitate toward Jasper and their value proposition, and, most likely, stay there as long as Jasper keeps pumping out new features. A new product can’t compete directly with that approach. Which is probably why Rytr made the choices they did.Looking at Rytr, we can see one company’s attempt to position themselves as a lower cost alternative. While Rytr lacks the bells and whistles of 3rd party support, image generation, and an overall slickness, they try to position themselves as a sort of “Swiss army-knife” of writing tools. Rytr advertises over 43 use cases. They break down use cases so granularly that there is a risk of nullifying the promise of AI, subduing the “thrill”, with a tradeoff of safety. In the initial synthesis,Haydn’s best bet in competing in the crowded market would be to keep the low price point of Rytr, but make the overall experience closer to Jasper’s. To achieve this, Haydn might need to temporarily skip offering separate products and instead focus on making each feature highly engaging and easily understandable.

Initial Approach
To Information Architecture

Initial Approach
To Information Architecture

Initial Approach
To Information
Architecture

Angle
of Attack

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

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.

Mid-Fi Journey

Mid-Fi Journey

Iterative Ideas

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.

Style
Change Up

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.

Example
In Motion

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.

New Logo

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

A Search For Style

A Search
For 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”

Intuition
and Tested

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

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

Styling The App

Styling The App

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.

Deep Thoughts

Deep Thoughts

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.