Embracing the AI Revolution
With the advent of AI, excitement, fear, and most of all uncertainty has swept through the public at large. The opportunity for professionals to add AI to their tool belt is promising, but many are still unsure of how it works and how it relates to them.
Haydn is an AI writing assistant that is targeted towards marketing professionals who need to develop effective content quickly and efficiently. The goal of this project was to take existing information and style choices around Haydn and create a responsive marketing landing page and a functional, mobile prototype for the application itself.
Overview
Role: User Research, User Experience Design, and User Interface Development
Task: Create a responsive marketing landing page. Develop a mobile prototype for the application.
Timeline: 3 Weeks
Tools: Figma, OptimalSort
Laying the Groundwork
Introduction 01
The first step through this process was to establish a base of operations: Understand competitors, the audience, and why that audience might benefit from using Haydn.
In order to narrow the scope of the project, the target audience needed to be further defined. By articulating a specific type of person that would benefit from using Haydn, the marketing page and application could be refined to best suit their needs.
The Marketer (who does everything)
Target Audience 02
A marketing professional is an essential piece to any start up, small business, or personal side hustle. But these marketers’ duties don’t end after a few captions or newsletters are written. They are often performing work that go far beyond the scope of their work.
Marketers for small organizations need a tool that can help them write marketing copy quickly and efficiently so they can devote time and energy to other business needs.
Sizing Up the Competition
Competitive Analysis 03
With this in mind, the competition could now be analyzed. This was done in order to better understand how AI might be perceived by the audience and what sort of patterns were consistent across other AI text generator products.
Common themes that arose were a focus on accuracy, responsibility, and safety while using AI generation.
These themes influenced the creation of an initial sitemap for the marking landing page. Notably, an entire section within the navigation was devoted to communicating Haydn’s stance on AI use and safety.
What Did the Users Think?
User Testing 04
To validate this sitemap and better understand user expectations around layout and labels, user testing was conducted. A card sort was created where each node from the sitemap was translated to a card for users to sort into categories of their choosing.
The tests were administered in person via OptimalSort.com to 4 participants who came from marketing and small business backgrounds.
The User Shows a Path Forward
Insights 05
Several insights bubbled up to the surface that where extremely informative about user expectations for the landing page:
Safety and Responsibility around AI was not a main focus for users
“Human Powered” was a very confusing label
Top level navigation was overly complicated
Many labels were unable to stand on their own, often requiring additional context
With these insights in mind, the sitemap was reorganized to better match user expectations and reduce cognitive load.
Sticking the Landing (Page)
Landing Page Prototype 06
For this project, many of the visual elements and styling were provided in the brief. Translating these elements into products that would resonate with the audience was the goal.
Haydn’s styling is best described as ‘Beach Formal.’ It’s laid back and approachable while still maintaining a professional air. This warmth and approach-ability needed to be infused into the feel of the landing pages.
To create this, a clean sans-serif font was applied in combination with contrasting colors to convey a crispness to the text. Similarly, a wave effect was applied to certain graphical elements, and key sections saw the application of a sand texture to their background. These elements kept the design light, while the clean typography emphasized the clear communication one would expect from a responsible business partner.
The Landing Page =/= Application Prototype
Mobile App Prototype 07
With the marketing landing page complete, work began on the mobile prototype. Initially, it retained many of the same design elements from the landing page. Bold colors and strong textures were applied liberally.
Upon further reflection and feedback, the design was toned down to facilitate a different type of use. Where the design of the landing page was bold in order to grab users attention for a one time use, the same design sensibilities being carried into the mobile application would likely prove grating and obtrusive over extended use.
The design was altered to be more visually comfortable for the repeat user. In place of bold textures were consistent use of common region and a monochromatic color scheme that emphasized usability and clarity over attention grabbing elements.
In Conclusion
Summary 08
With prototypes built, the next step would be to facilitate further user testing in order to further refine the hi fidelity prototypes.
This project was a well spring of lessons in user experience and interface design. To narrow down a few:
User testing is essential. Assumptions gained from studying competitors lead to a cumbersome and bloated information architecture. Fortunately, user testing helped clarify and refine those assumptions, allowing for a simpler, more user friendly experience to emerge.
Always check color contrast. In an early iteration of the landing page, a white text was used against the yellow header. When checking for accessibility, it was discovered that this pairing didn’t meet common accessibility guidelines. Fortunately, this was changed in order to facilitate a better user experience.
Design should reflect context. In the initial mobile prototype, a bold design direction was carried over from the marketing landing page. Using this design in this context risked annoying and possibly alienating the user over time. Instead, a less dramatic, monochromatic style was applied to better facilitate many uses over a long period of time.