3 weeks, December 2021
Interviewer, UX, UI designer
Provided prompt to hi-fi prototype
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.
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
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
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
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
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.
Low fidelity sketch of the program with annotations
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.
Mid fidelity mockup of the program with annotations, built with user feedback
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
As the user fills out the onboarding questions, the AI creates an audience persona. This is broken up into 3 sections:
AI-generated audience personas that the program generates based on user input
Using everything I have learned - onboarding question flow, audience persona, meaningful color choice - I created a hi fidelity mockup.
Set of onboarding questions to teach the AI about the user's content
I then addressed these issues in my content creation screen:
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.
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.
