HAYDN

Using the power of AI to aid users in composing a diverse range of content
Duration:
Role:
Tools:
9 days, Jan. 2023
UI design, User research ⎯ User research, information architecture, website layout, responsive design, wireframing, usability testing
Figma
Duration:
9 days (January 2023)
Role:
UI design, User research ⎯ User research, information architecture, website layout, responsive design, wireframing, usability testing
Tools:
Figma

Overview

About HAYDN

HAYDN is a fictional artificial intelligence (AI) content generator that helps writers create engaging content efficiently, while also maintaining an authentic voice. It aims to help people build confidence in communicating their message, while also polishing their work.

A Two-Part Design Challenge

In this Flatiron School design challenge, I had the exciting opportunity to transform the client’s (HAYDN) vision, style guideline, and user research into a purposeful user interface. The project had two distinct phases.
  • Crafting a high-fidelity mockup for HAYDN’s one-page marketing site, utilizing materials such as the client’s style guide, low-fidelity wireframes, and web copy.
  • Designing a interactive high-fidelity prototype for HAYDYN’s mobile app, building upon provided mid-fidelity wireframes.
1

1-Page Marketing Site Design

Before diving into the website's interface design, a crucial step was to strategically organize the web copy provided by the client.

Integrating User Insights into Information Architecture

As a starting point, I consolidated the information into digestible cards and facilitated two open card sorts to better understand the users’ mental model and their reasoning behind their categorization choices. While each user introduced their own unique grouping, I was able to identify recurring patterns, which led to three critical categories: general information about HAYDN, its resources, and their distinct features.

I combined these observations with the provided low-fidelity wireframe to construct the website’s information architecture and layout.
Open Card Sort Summary for HAYDN's Website Content
Open Card Sort Summary for HAYDN’s Website Content

Applying Style Guidelines to High-Fidelity Responsive Design

After establishing the site's core structure, the next step of the design challenge involved creating the high-fidelity mock-ups for mobile, tablet, and laptop devices. This phase honed my ability to implement the client's style guidelines and emphasized the significance of responsive web design. Beginning with the mobile wireframe, I learned to prioritize vital content within the constraints of limited screen space.
HAYDN's one-page marketing site across different devices: Mobile, Tablet, and Laptop
HAYDN's One-Page Marketing Site Across Different Devices
2

HAYDN Mobile App Design

The second phase transitioned to designing an interactive, high-fidelity prototype for HAYDN's mobile app, emphasizing the importance of a cohesive brand identity across multiple digital experiences.

Elevating Wireframes for Enhanced User Flows

I received 5 mid-fidelity wireframes outlining various features, including the dashboard, content creation, and user settings, as my starting point. My goal was to strengthen and expand upon these wireframes to establish the user flows that would play a central role in HAYDN's functionality.

Given HAYDN's goal of aiding users in writing and progress tracking, I concentrated on building the user flow for content creation through templates and data visualization. Additionally, I developed a task flow for editing billing information as an extension to the settings wireframe, recognizing its importance to users.

The Power of Microinteractions

As this project placed a strong emphasis on UI, I incorporated microinteractions to not only elevate the user experience but also enhance accessibility. For instance, in an app focused on data input, it becomes crucial to highlight button and active states to guide users effectively on the page and reduce errors.
Example microinteractions in HAYDN's UI
Example Microinteractions in HAYDN’s UI

Key takeaway

Elevating User Experience through Meticulous Design

My primary takeaway from this project was the importance of meticulous attention to detail in user interface design.

This involved dedicating time to grasp and implement information architecture to strengthen layout design, while also maintaining visual uniformity and adhering to the client’s standards across a variety of digital products. The significance of detail-oriented thinking also extended to microinteractions, as even minor adjustments can significantly elevate the user’s experience.
HAYDN's branding across 2 digital products, the marketing site and the mobile app
prev. project
Back to top Button (Up Arrow)
Back to top
Featured typeface is degular from @ohnotypeco