HAYDN AI

Project Overview

Client: HAYDN AI, created by Flatiron School

Timeline: 3 weeks | Jan 2023

Role: UX Design, UI Design

Request

In this case study involving Flatiron School, I was presented with a style guide inherited from HAYDN AI, an AI content generator. Utilizing these provided resources, responsibilities encompassed:

Assessing and confirming the information architecture for HAYDN’s marketing website
Creating a responsive marketing landing page that seamlessly adapts to various devices, including mobile, tablet, and desktop
Developing high-fidelity prototype screens for HAYDN’s digital product.

To produce these deliverables, I conducted thorough research and employed an iterative ideation process to develop designs that embodied HAYDN’s vision of being welcoming and user-friendly. In crafting the designs, I placed a strong emphasis on accessibility and ensuring a seamless user experience, aligning with HAYDN’s positioning as “a writing assistant for the rest of us.” The primary objective was to authentically represent this brand that prioritizes serving its users and enabling them to pursue their passions.

Timeline

Approach

I completed this project independently, utilizing the set of assets I inherited.

My role

UX Research: Information Architecture, Competitive Analysis, Usability Testing, Synthesizing data
UX Design: mid fidelity and hi fidelity prototyping

Finalizing the Site Map

Overall, the open card sort provided validation for my decisions and instilled confidence in implementing the information architecture, as it aligned closely with the mental models of the target users.

Visual Design Iteration

One of the project's constraints involved adhering to HAYDN's existing style guide for the UI design. This style guide placed significant emphasis on:

To us, images of people and of real life are an important part of the brand. The key things to remember here are to strive for diverse representation and try to choose photos that convey the warmth of our brand personality.
The way we communicate in writing is equivalent to a beach formal dress code – both relaxed and polished.
Friendly and approachable, but keep it respectable. Like you're talking to a friend of a friend – not afraid to joke a little, but not too chummy.

The design of my mid-fidelity wireframes was influenced by these aspects of the style guide.

To engage users in a relatable manner while maintaining a sense of professionalism, the marketing copy employed a conversational tone.
The imagery predominantly featured authentic individuals, aligning with the brand's vision and enabling a diverse range of users to envision themselves utilizing HAYDN.

The main colors that I pulled from the style guide were a nomus blue, bright coral and ivory.

The bright coral was to convey a pop of color.
By incorporating shades of ivory and blue, a feeling of trust and serenity is evoked.

When incorporating these colors and advancing to the high-fidelity stage, my objective was to ensure that information was presented in a clean, well-organized, and easily accessible manner. The primary aim of designing this marketing page was to actively engage users and encourage them to utilize the product. Therefore, I sought to emphasize the value and usefulness of HAYDN through compelling marketing copy and customer testimonials.

Mobile App Design

The final ask of this project was to design hi-fidelity prototypes for HAYDN’s mobile product. I decided to keep nomus blue (which is dark blue). I chose to maintain this color because it is crucial to provide users with a sense of comfort and visual appeal. Given that HAYDN's digital product aimed to assist users in content writing, I implemented Material Design principles familiar to users from Google Documents.

Final Designs

Marketing Landing Page

The ultimate designs of the marketing landing page are responsive, ensuring a consistent user experience across various devices. As users transition from mobile to tablet to desktop, additional visual information in the form of imagery is presented. However, the text content remains consistent across all devices.

Based on the insights gained from my competitive analysis, I recognized the significance of incorporating the primary call-to-action (CTA) multiple times within the mobile page. This strategic repetition aimed to encourage users repeatedly to give HAYDN a try.

Humans are at the center of this design. The purpose of this design is to show people engaging with HAYDN.

Integral to this design that I incorporated:

A icons for features
A resources of Haydn carousel
A person review carousel

The primary objective of the marketing landing page was to encourage users to sign up and utilize HAYDN AI. Consequently, I aimed to create an interactive and dynamic page rather than a static one. Additionally, this presented an exciting opportunity for me to explore and enhance my skill set as a designer.

Mobile App

The final design of the mobile app maintains the integrity of HAYDN's brand identity by adhering to the guidelines outlined in the style guide. The use of color maintains a sense of calm. The different screens establish a dynamic and seamless experience.

Takeaways

Reflections

This project provided valuable learning experiences throughout the design process, with several highlights worth mentioning:

Meaningful Microinteractions: One of the positive aspects of this project was the opportunity it presented to enhance my skills in microinteractions and animations. It was crucial for me to consider the purpose of these microinteractions and how they could benefit the user.
Working within Constraints: Given the inherited style guide and existing solutions, this project taught me the importance of working within constraints. Rather than focusing on ideating new solutions for user problems, I gained valuable insights into user mental models and crafted meaningful information architecture. Additionally, I learned how to create thoughtful wireframes and effectively represent a brand while facing limitations in visual control and time.
Designing for Accessibility: We recognized the significance of designing for accessibility early on. To meet this objective, I ensured that information was not solely reliant on color for conveying meaning. Moreover, I maintained color contrasts that complied with the WCAG guidelines, made key information easily discoverable, and established a visual hierarchy that emphasized the importance of relevant information.

Next Steps

Given the opportunity, I would have been delighted to conduct additional user testing to further enhance the design of the mobile product and evaluate the effectiveness of the marketing landing page design.

Discovery Phase

The Competitive Landscape

Prior to delving into information architecture and design, I decided to examine how other AI content generators organized their website content and welcomed users with their landing pages.

By conducting a competitive analysis, I obtained the following key observations:

Competitors consistently featured the same call-to-action (CTA) throughout their marketing landing pages, with this CTA often serving as the primary or sole focus.
Competitors employed prominent and eye-catching hero images to capture the attention of users.
Competitors tended to provide limited information on their landing pages, often omitting specific details such as pricing.

A significant number of the competitors had landing pages with visual clutter. Considering HAYDN's intention to position itself as a brand that supports and streamlines user work, it became crucial to create a serene and clean landing page that would evoke a sense of organization and reliability among users.

The Users and Their Mental Models

Referring to the provided style guide, I was aware that the intended audience included Marketers and Content Creators of various types, ranging from social media influencers to larger businesses. Following the creation of a site map, it was crucial to validate the information architecture to ensure its alignment with user mental models. This validation aimed to reduce cognitive load and enable users to focus on actively engaging with the product. To achieve this, I conducted an open card sort, allowing users to categorize and label information according to their own understanding. I chose an open card sort over a closed one due to uncertainties surrounding certain categories. The objective was to observe how users naturally grouped information without being influenced by pre-existing labels.

I facilitated an open card sort exercise involving 3 participants. The purpose was to gauge their perspectives on using an AI content generator in their respective roles. During the activity, the participants verbalized their thoughts, reasoning, and raised any questions that arose along the way.

The conducted research yielded valuable findings, offering several noteworthy insights:

Since the participants were not provided with predetermined category labels, they occasionally combined items that I had initially classified into distinct categories, encompassing history, product descriptions, and features.
Certain groups were easily recognizable to the participants, such as information pertaining to log-in and FAQs.
Participants expressed confusion regarding the term "plan" and did not immediately grasp its association with pricing options.