Overview
Under Flatiron School, the directive was to formulate the information architecture, craft captivating and responsive marketing pages, and develop an interactive mobile app prototype for an AI writing tool. This project leveraged inherited wireframes, marketing copy, and an established style guide as foundational elements.
The scope encompassed a user research phase conducted through card sorting exercises, the creation of marketing pages tailored for desktop, tablet, and mobile devices, and the development of a high-fidelity prototype tailored specifically for an iOS mobile app.
Timeline
3 weeks
Tools
Figma, Optimal Workshop
Deliverables
Comprehensive Information Architecture
Engaging and Responsive Marketing Landing Pages
Developed an Interactive Mobile App Prototype
Challenge
Our mission encompassed conducting independent research to comprehend the user's mental model. Subsequently, we were tasked with the creation of marketing pages and a mobile prototype that harmonized seamlessly with the client's provided assets. The primary challenge lay in crafting captivating pages and screens that not only resonate with the user but are also founded on robust research insights while respecting inherited design elements.
Objectives
Perform user research utilizing an open card sort methodology
Analyze and effectively communicate research findings to inform the Information Architecture (IA) design
Generate deliverables that align seamlessly with the provided style guide and wireframes
Project Timeline & Design Approach
Sprint 1: Research and Foundation
Commence with competitive research
Source target users for user testing
Draft and refine the sitemap
Conduct user testing to gather insights
Sprint 2: Ideation and Prototyping
Explore and define the visual direction
Develop the information architecture
Create wireframes for landing pages
Craft low to mid-fidelity prototype screens
Sprint 3: Implementation and Presentation
Bring the hi-fi screens to life
Ensure responsiveness across different breakpoints
Incorporate interactions and animations
Present final product to the client and stakeholders
Research
Open Card Sort: A Design Process Insight
As part of our design process and to shape the information architecture according to the user's mental model, I organized an open card sort exercise utilizing the initial site map as a foundation. Leveraging Optimal Workshop, I recruited a group of 9 target users for this insightful endeavor.
The outcomes of the card sort remarkably affirmed the majority of our assumptions derived from the initial site map, a testament to the initial design direction. However, it also presented an unexpected revelation. It became evident that terms such as "student," "professional," and "business" were misconstrued as user types and account categories, when in fact, they pertained to the types of subscription plans available. This unanticipated insight underscored the value of user-driven research in refining our design choices.
Key Insights:
Clarifying Subscription Options: The inclusion of the word "plan" alongside "student," "business," and "professional" effectively communicates subscription choices, aligning with the user's mental model.
Simplified Color Palette: Streamlining the color scheme to a single hue, with a heightened emphasis on Call-to-Actions (CTAs), enhances visual coherence.
Above-the-Fold Balance: Ensuring a balanced content presentation above the fold, in line with the desired "beach formal" tone that conveys relaxation and polish.
Engaging Microinteractions: Implementing microinteractions to actively engage users and enrich the overall user experience.
Competitive Analysis
This investigation involved a deep dive into the offerings of key competitors, namely Alexander AI, Jasper, Simplified, Rytr, and Copymatic. The primary focus was on reviewing their marketing pages to glean valuable insights.Through this research, I meticulously observed and analyzed various elements of their marketing pages. These observations played a pivotal role in shaping our visual direction for Haydn AI. It allowed us to gain a profound understanding of the domain and the prevailing Information Architecture (IA) trends, ultimately informing our strategic design choices.
Site Mapping
In the design process for the marketing landing page, I initiated by crafting an initial site map. This site map was informed by wireframes furnished by the client, serving as a crucial tool to visualize priorities and establish a clear information hierarchy. Within this initial site map, I placed a strong emphasis on Call-to-Actions (CTAs) and meticulously considered how links should be labeled and strategically positioned within the wireframe. Subsequently, this sitemap became an integral component of the open card sort exercise, enabling a user-informed and data-driven approach to our design decisions.
Finalized Site Map: Streamlined for Clarity
Incorporating insights from open card sort testing and valuable user feedback, the site map underwent refinement to enhance clarity and ensure a seamless user experience. Notable adjustments include the removal of a phone number, deemed unnecessary for sitemap functionality, and the deliberate omission of color to optimize readability. Additionally, to provide greater clarity regarding subscription offerings, the word "plan" was appended to different pricing options within the pricing plans section. These refinements were strategically implemented to bolster the overall user experience.
Ideation & Prototyping
In pursuit of solving the client's challenge, the design process began with a deliberate "mobile-first" approach. The initial proposal included the creation of dynamic and interactive landing pages, thoughtfully implementing a 60-30-10 color scheme. Simultaneously, the development of a mobile app was guided by the imperative of delivering a sleek and intuitive navigation experience.
The overarching strategy aimed to captivate users through a judicious utilization of a limited color palette while infusing a distinct human touch into the Haydn brand. To initiate this creative journey, I embarked on a series of experiments, particularly focusing on the selection of Call-to-Action (CTA) colors. Diverse concept screens were meticulously crafted and presented to the client for invaluable feedback.
Through iterative refinement, involving an array of mockups and responsive client input, the decision crystallized to adopt turquoise as the predominant color for primary and secondary CTAs. Accompanied by succinct text placement above the fold, this approach was strategically designed to elevate user engagement and establish an unmistakable brand identity for Haydn.
Deliverables
The creation of pages and the development of information architecture were meticulously crafted, underpinned by a robust process that included site mapping, user testing, and adherence to the provided wireframe. This strategic approach was thoughtfully shaped by the client's "beach formal" dress attire directive, aligning our design with the desired tone and attitude.
The design further comes to life through a range of dynamic interactions and animations:
Button states to enhance user engagement
An automatic brand carousel for a visually captivating experience
A desktop gradient flash for subtle yet impactful visual appeal
Dropdown menus to streamline navigation
A card carousel that adds depth and interactivity to the user interface
Landing Page Overview
Our deliverables are thoughtfully unified by a "beach formal" visual theme, meticulously aligned with the client's styling guide. The design process initiated with the ideation of screen concepts, progressing to the creation of low-fidelity prototypes based on the provided wireframes. These prototypes served as the foundation for crafting responsive landing pages and a high-fidelity mobile app prototype.
As illustrated below, the landing pages are impeccably designed, seamlessly adhering to both the wireframe structure and the client's specific directives. This design-focused approach ensures that our deliverables not only meet but exceed the client's expectations, delivering a visually compelling and cohesive user experience.
Mobile App Prototype: High-Fidelity Design
I meticulously crafted a high-fidelity mobile prototype, maintaining visual design consistency with the landing pages and adhering closely to the wireframes and style guide provided by the client. This commitment to design cohesiveness ensures a seamless and visually appealing user experience.
Incorporating Microinteractions
The design was further enriched through the incorporation of microinteractions, including:
Toggle and sliding bars for intuitive user control.
Text popups to enhance information accessibility.
Text transform animations for engaging and dynamic content presentation.
Reflections
In hindsight, the client's request for an open card sort presented an opportunity to consider an alternative approach, such as a closed card sort. This adjustment would have aimed to mitigate potential confusion in card categorization, particularly considering that all participants exhibited unfamiliarity with the process.
Moreover, in retrospect, a more comprehensive research strategy could have encompassed rapid sketching, mood boarding, and A/B testing. These additional methodologies would have facilitated iterative refinement of screens and task flow, ultimately enhancing the overall design process and the user experience.