Product Designer

samuelhgflax@gmail.com

AInterest

An AI-powered content creation tool guided by an intuitive onboarding quiz.

AInterest:

An AI-powered content creation tool guided by an intuitive onboarding quiz.

Project Brief

01

Timeline

3 weeks, December 2021

Role

Interviewer, UX, UI designer

Project Type

Provided prompt to hi-fi prototype

Challenge

Our fictional client has code for an AI content generator, and needs UX to make it flow, UI to make it intuitive, and a key feature to address users' pain points.

Project Space

Interview content creators.
Identify pain points in workflow, both traditional and AI assisted.
Ideate on a feature to address a user issue.
Converge on a UI style.
Create a user flow.
Build user flow, test, and deliver a minimum viable product.

The original site

Chocolate has long been celebrated as one of the world’s most indulgent and beloved treats. From its origins as a sacred drink in ancient Mesoamerican cultures to its modern-day role as a universal comfort food, chocolate continues to capture imaginations and delight taste buds. Made from the cacao bean, this versatile confection is transformed into countless forms, from smooth milk chocolate bars to dark, bittersweet truffles.Chocolate has long been celebrated as one of the world’s most indulgent and beloved treats. From its origins as a sacred drink in ancient Mesoamerican cultures to its modern-day role as a universal comfort food, chocolate continues to capture imaginations and delight taste buds. Made from the cacao bean, this versatile confection is transformed into countless forms, from smooth milk chocolate bars to dark, bittersweet truffles.Chocolate has long been celebrated as one of the world’s most indulgent and beloved treats. From its origins as a sacred drink in ancient Mesoamerican cultures to its modern-day role as a universal comfort food, chocolate continues to capture imaginations and delight taste buds. Made from the cacao bean, this versatile confection is transformed into countless forms, from smooth milk chocolate bars to dark, bittersweet truffles.Chocolate has long been celebrated as one of the world’s most indulgent and beloved treats. From its origins as a sacred drink in ancient Mesoamerican cultures to its modern-day role as a universal comfort food, chocolate continues to capture imaginations and delight taste buds. Made from the cacao bean, this versatile confection is transformed into countless forms, from smooth mi

Putting Names to Faces

02

Creating User Personas

I created two divergent personas. My priority was to design for a diverse set of needs related to content creation, so I needed to ensure I wasn’t hyper focused on one demographic’s needs. 

Both users found it too easy to rely on technology, and lost track of their creative work.
‍
I learned from these two user personas that my software must keep the writer actively engaged with their target audience. 

Danny persona - IT expert who writes weekly reports

Amelia persona - prestige writer at local newspaper

Putting Faces to Work

03

Problem Statements

I created a set of potential problem statements from my persona research that would guide my progress going forward. 
‍
I narrowed it down to two basic ideas: the need for one's needs to be integrated from the start, and the need to not lose focus on the target audience with all the automation happening. 
‍
I learned that I could engage with these problem statements in two ways: create a simple questionnaire and a dynamic persona that evolved as you entered information.

Potential problem statements - chosen problems are highlighted

Asking All the Right Questions

04

Developing Feature: Onboarding Questions

I needed simple yet pertinent questions, as few as possible, to feed relevant information to the AI while keeping the user engaged.
‍
I decided to address the user’s needs by asking the user to answer three core queries: Audience, Topic, and Tone.

Audience addresses who the core target is the user is writing for.
Topic addresses what subject the user is writing about.
Tone addresses how the user wants to present the content they are creating.

example of onboarding questions for establishing Audience and Topic

Visualize It

05

Lo-Fi Concepts

I have two things users want (onboarding questions and an audience persona), and the three things to ask the user (audience, topic, and tone). I then sketched out my ideas.

  1. Onboarding questions- audience (who?), topic (what?) and tone (how?). Users would fill these out, and the AI would dynamically create content based on these entries. Can be minimum one entry, or as many as the user sees fit
  2. The AI-generated content sits on the right side of the screen. The title, subtitles, and body copy start as lorem ipsum, and dynamically fill as the left side is filled. Real time updating helps the user see how their choices affect their content.
  3. Reload buttons are next to all generated content - any time content is dynamically adjusted, the user can backtrack a specific section to a prior entry. If the user loves the title but nothing else, they can refine the left bar, then backtrack the title to the one that resonates. 
  4. The generated audience persona - just as the content dynamically adjusts, so too does this persona. An entry of “lumberjacks who sing opera / serious” will yield a different persona than “ ice skaters who bake sourdough / casual”. Can also be reverted without the refresh buttons. 

Low fidelity sketch of the program with annotations

Fill in the Blanks

06

Mid-fi Concepts

I conducted user research and learned two things: break up the screen, and guide the user more.
I then created mid-fidelity screens based on this feedback.

  1. The onboarding questions are re-worded to guide the user through the process.
  2. The questions include both an input box and suggestions. This guides the user to provide accurate and specific detail about their content.
  3. The generated content is separated to its own page. This reduces cognitive load and streamlines the onboarding.
  4. I developed the audience persona to include likes, dislikes, a title, and a photograph.

Mid fidelity mockup of the program with annotations, built with user feedback

Color, Coded

07

Developing Feature - Color Meaning

I learned that to reduce cognitive load, I must introduce each section of the program one at a time. I created a user flow to show what steps are taken by the user, and what steps are decided by the AI.
‍
All branching decisions you make are in blue.
‍
Questions are blue, indicating that the user will interact with this section and get a result.
‍
Decisions made by the AI are in green.
‍
All content generated by the AI is in green. This indicates the user can modify these choices with their interactions of the blue sections.

User flow showing user decisions in blue, AI decisions in green

Dynamic Personality

08

Developing Feature: AI Generated Audience Personas

As the user fills out the onboarding questions, the AI creates an audience persona. This is broken up into 3 sections:

  1. Name and photo primarily allow a bond to be established between user and audience.
  2. Title is used to keep an occupation and lifestyle in mind as the user writes.
  3. Likes and dislikes convey what a reader might want to see in the created content. Also adds personality to the content by allowing the user to be specific. 

AI-generated audience personas that the program generates based on user input

Final Question

09

Hi-fi screen: Onboarding Questions

Using everything I have learned - onboarding question flow, audience persona, meaningful color choice - I created a hi fidelity mockup.

  1. I learned to keep the audience persona front and center. Let the user see the fields update in real time, but let them access the past entries easily through a drop down menu.
  2. Reveal the questions in a cascading manner. Allow the user to focus on one question before moving on to the next one.
  3. Within the questions, give prompts that the user could fill out. Log them consistently and allow the user to add or modify any entry.

Set of onboarding questions to teach the AI about the user's content

Content, Created

10

Hi-fi screen: Content

I then addressed these issues in my content creation screen:

  1. All onboarding questions and their answers are persistent and editable in the left rail.
  2. Audience persona is also persistent and editable, to keep the user focused on the audience of the content.
  3. Generated content is AI-created and editable - either with AI suggestions or by user input.

The color of the containers indicate user interaction.
‍Green indicates anything that is AI-created or suggested.
‍Blue indicates anything that the user directly interacts with as an input.

Screen of the content created by the AI, and the editing options available.

Machine, Learning

11

Conclusions

My final step was to prototype the screens. I attached everything and let a user click through it - their immediate feedback pushed me to add a "skip" button.

I gave a primitive animation to the green bubbles - in a next step of polish, I would love for the bubbles to slowly move and speed up as the user is inputting data: a velocity given to the AI's mind.
‍
Finally, I took a cue from my editor page, and signified that the content of the persona was editable using underlines. This is accompanied by a small text box explaining the intent of the underline. The next step would be to test the effectiveness of this, and if users feel comfortable swapping content.
‍
Lessons Learned
‍
I learned that a solid user flow is key to keeping a complex project on track. I also learned that not every user will follow your flow - that’s okay! Building an experience while also allowing the user to take a different route is not humbling, but instead a welcome challenge in versatility.
‍
I also learned to read interviews with an open mind. It is a challenge to not start designing as soon as a prompt is provided, but the goal is not to exercise one’s mind - the goal is to make people’s lives better.

<svg width="100%" height="340px" viewBox="0 0 1098.72 89.55">
  <path id="curve" fill="transparent" d="M0.17,0.23c0,0,105.85,77.7,276.46,73.2s243.8-61.37,408.77-54.05c172.09,7.64,213.4,92.34,413.28,64.19"></path>
  <text width="100%" style="transform:translate3d(0,0,0); z-index: 1000; fill: #ff7373">
      <textPath style="transform:translate3d(0,0,0);" alignment-baseline="top" xlink:href="#curve" startOffset="1200px" id="text-path">
      scroll to display this text
      </textPath>
  </text>
</svg>