Haydn.AI

What is Haydn. AI?

Overview

Haydn is an AI writing tool that checks grammar and helps users find the right words to write articles, blogs, emails, etc. so that they can have an easier writing experience. Some brand adjectives for Haydn are friendly, helpful, and approachable.

What I was tasked to do

For this project, I was given a timeline of 3 weeks to design a responsive marketing landing page for Haydn and then create mobile prototypes for the mobile app.

My role in this project

I was responsible for:

  • Competitive research

  • Designing a sitemap

  • Conducting user testing

  • Wireframing the marketing landing page

  • Wireframing and prototyping mobile prototypes

  • Presenting to stakeholders

Methods

The deliverables completed each week

In week 1, I created an initial site map in order to do user research to validate the information architecture of the landing page. I then did user research and edited the site map according to the results
In week 2, I used the findings of my research to create 3 different iterations of wireframes and then applied the chosen concept to mobile, desktop, and tablet.
In week 3, I created mobile prototypes for Haydn.

Research

Research I conducted on the competitors of Haydn

First, I conducted research on the competitors of Haydn such as, Jasper, Phrasee, etc., in order to understand what the information architecture of other IA sites looks like.

Creating the initial sitemap

Key insights from user testing

Using the competitive research I conducted, I created an initial sitemap that showed how I initially thought the information architecture should be laid out. I then used this site map to create user tests to validate the information architecture of the landing page.

Conducting user testing

The first test I conducted was the Tree Test. The purpose of conducting this test was to validate the top navigation bar of the landing page. I used Optimal Workshop to create a tree test and I had my users complete the tasks while asking them to explain the choices they made in order to understand their thought processes.
For the second test, I listed all the information I had on my site map and asked my users to rate the top 5 information they thought were the most important. This test was conducted in order to prioritize the information I put on the landing page.

Some key insights I received from my testing were:

  • The “Features” navigation should go under an “Overview” tab that provides overall information about the product.

  • The “Customer Testimonials” tab and “Blogs” tab should be separate on the top navigation, instead of being under “Support.”

  • An overview of the product as well as the features of the product are the most important information and should go on the landing page.

I applied changes to the initial sitemap I created from the insights I received from doing user testing and created a final sitemap.

Design

Ideating the design for the marketing landing page

The brand had provided a style guide to follow therefore, I used the color palette and images provided to come up with three different iterations of the landing page.

I decided to move forward with the first design due to the fact that the lighter background and blue worked well with the “relaxed but professional” tone the brand was striving for. Orange was chosen for the primary CTAs because of the fact that it would stand out the most against the ivory background and blue used. I stuck with the style guide I was given, however, I had no choice but to change the orange color given in the style guide to a darker orange because of the fact that the orange in the style guide with white words on top would not be at least AA compliant.

Hi- Fi Prototypes

Prototyping the marketing landing page

After deciding on the concept for the landing page, I worked on designing prototypes with features that would be appropriate for the screens users would be using.
For the mobile prototype, I knew I had less space horizontally, so I used a carousel for the features. This way, users would not have to scroll down to see all the features that Haydn has to offer.
I also used a hamburger menu so that users could navigate to different pages without having to fit the top navigation bar on a narrow screen.

I also used a carousel for the tablet version, so that users can just swipe horizontally to see all the features instead of having the scroll down.

For the desktop prototype, I used a top navigation menu so that users could see all the pages that they could navigate to without having to click on a hamburger menu. I, also, was able to lay out the features section without using a carousel because of the wider screen.

Designing the screens for the mobile app

For the mobile app, I used the same concept as the marketing landing page. However, instead of having ivory as the background color, I chose to use the dark blue as the background and the ivory for the boxes of information. This would allow for a better viewing experience for the users.

Takeaways

This project was extremely challenging due to the fact that this was the first time I had carried out a design project from start to finish. The unfamiliarity of the experience was a major constraint for me, as well as, the fact that I only had 3 weeks to complete this project. However, completing this project allowed me to become more comfortable with all the deliverables involved in a design project and gain confidence to carry out more projects in the future.