Tools Figma Adobe Color NounProject Individual Project
Key Deliverables Competitive Analysis Persona Problem Statement High Fidelity Wireframes
My Role UX Researcher UX Designer UI Designer
Summary
It can be difficult for content creators to constantly deliver new and original content. Creatron is a web app that helps the user choose a topic, and automatically creates content for them.
For this project I was in charge of the entire design process from UX Research to UI Design. The project ended with a presentation of my entire design process.
High fidelity design of the Creatron app
Brief I was tasked with conducting UX research and designing the UX & UI for a fast-moving startup that uses artificial intelligence to generate better quality content for creators.
Sprint 1: Research
I conducted domain research, user interviews, and analyzed the direct competitors. The research helped me better understand the use for artificial intelligence in content creation, and set the stage for solving a specific problem.
Domain Research
I learned that content creation is very time consuming and it is challenging to constantly create quality content. I also learned that content-creating artificial intelligences have been helping creators by making it a quicker process.
One thing that stood out to me in my research was that more than half of marketers are already using artificial intelligence to create content, so they are an audience that cannot be ignored when creating a design.
Competitive Research
Three direct competitors are Anyword, Jarvis, and Rytr. They are all web-based AI's that create a very wide variety of content from Facebook Ads, to tweets, to video descriptions.
These programs let the user choose a tone of voice to narrow their outreach. Some of their users include: marketers, agencies, and entrepreneurs.
User Interviews
"...it is hard to come up with fifty topics and only picking eight so we try to diversify the conversation as much as we can." - Y. Project Coordinator/Podcaster
Eight user interviews were conducted by me and my cohort-mates. All of the participants were content creators of different kinds (podcasters, project coordinators and photographers).
Some frustrations the participants shared were that the process is very time consuming, it's hard choosing a topic to talk about, and it's difficult to choose the right caption and hashtag for a post
Research Synthesis
Sprint 2: Ideation
Defining the Problem
Synthesizing all of this research, I narrowed it down to a specific problem. This helped guide my design decisions and inspire ideation.
Problem Statment Corporate Content Creators need to know what topics and forms of content are trending in the world because it is time consuming creating original and relatable content.
Persona
Persona of a typical user of the product
Justin Pratt is a realistic representation of a typical user from the data collected through research. I created the persona to provide a steady direction for design decisions.
He is a thirty-year-old Digital Content Manager in NYC who has to create a lot of content for his job. He really enjoys creating visual content but struggles creating long-form written content.
Some frustrations Justin experiences is constantly coming up with new original content and creating content that gets little to no engagement. Justin needs to know trending topics to create written content about so he doesn't waste time trying to come up with them himself.
Now that I had a clear vision of who I was designing for, I had to start rapidly ideating solutions. I drew four divergent concepts for potential users to find trending topics for inspiration.
When the trending button is clicked a list of topics appears
A button that lets the user see what is trending
When the user wants to create content there will be a button that says 'Trending'. Once the "Trending' button is clicked a list of trending topics appear.
A page where the user can see types of content that are trending
Once the user picks a medium, they can choose a trending topic
A page where the user can see what types of content are trending. When the user chooses a form of content, they can see a number of hot topics throughout the world. The topics categories would be tailored to the user based on questions they answered in the onboarding process.
A drop down of trending topics appears
A button that gives the user an option to see trending topics
When the user is creating a form of content, their will be a 'See What's Trending' button that, when clicked, opens a drop down menu with a full list of topics.
A menu on the right that shows trending topics
When the user is creating a form of content, there will be a menu bar on the right with a list of trending topics. Once the user chooses a topic from the menu, it will appear in the 'Topics' text-box.
Mid-Fidelity Prototype
Mid-fidelity prototype of Creatron
Since the user is a visually creative person, I wanted to use cards with images rather than using tables or lists. After receiving feedback from my peers I converged concepts one and four. Through the feedback I also learned:
The 'Trending' page would be more useful if it showed the trending topics first, instead of seeing what type of content is trending
The 'Title' and 'Topic' prompts should be first because they are more beneficial for the user in defining their content
The 'Outline' prompt is unnecessary because the user can edit their document on the next screen
Sprint 3: Testing & Final Designs
Visual Competitive Analysis
I looked at the competitors (Anyword, Jarvis, and Rytr) to analyze the visual construction of their websites. This helped me understand how this product can follow market trends, and also stand out by:
Defining Characteristics
After understanding who the user is and what problem to solve for, I created a set of product adjectives to help guide me through creating a visual design for the product. These characteristics are based on the analysis of the competitors.
Simple: the users can easily navigate the application in understandable steps
Clean: the design leverages white space and is not over-the-top
Technological: the users should feel like they are using a very advanced form of technology (because they are)
Friendly: the users have a lot of work to do, so they should feel welcomed
Creative: the design promotes and inspires the user to think outside the box
Moodboards & Divergent Screens
Based on the research and the adjectives I defined for the product I created three moodboards with a corresponding screen to match it. To save time, I kept each screen's prototype the same, changing the colors, fonts, and images used for each.
First Concept
The color turquoise is the main color used in this design because it is often matched with technology. I used orange because its a complimentary color and I thought it would bring that welcoming feel to the site. The font 'Gill Sans' felt simple and with different variations it can be very versatile. I chose a monochromatic style for the icons and used the dark turquoise color so they would stand out to the user.
Second Concept
This concept was heavily inspired by the movie Tron: Legacy because of how futuristic it is. I incorporated those dark blue and cyan colors within the design. I wanted to show that this product is very technologically-advanced, but still very clean and simple to use which is why I used a white background. Inspired by the competitors, I used one font for the design. The font Poppins felt friendly and inviting without it being distracting.I chose a monochromatic style for the icons for quick and easy object recognition.
Third Concept
For this concept I was inspired by how modern this technology is. I combined the bold colors of black and orange with a light grey to match what is commonly seen in modern and contemporary styles. Instead of using large icons to represent the different types of content I chose real images so they would stand out. I felt that the font 'Helvetia Neue' accurately represented the modern.
Desirability Testing
5 Second Test
To understand what design would work best for the user I had to test them. I explained to the three participants that the designs were for an artificial intelligence content generator because I wanted to know if the user interface correlates well with the product. I showed the three divergent concepts to the participants and learned:
Product Reaction Cards
A product reaction card with 24 adjectives to choose from
I showed the three concepts to the participants again and asked them to choose five adjectives that they felt best described each screen. Of the twenty-four adjectives in the list were the ones I had chosen for the visual design. This was a test to see which concept matched with the correct attributes. The testing showed that:
Style Guide
After testing the three concepts, I decided to converge ideas from Concepts One and Two. Since all of the participants thought Concept Two matched the description of the product, I continued with the Tron: Legacy inspired design. The participants preferred the icons used in Concept One, so I darkened them to match the rest of the design.
The final style tile for Creatron
Final Design
In the final design, I created two ways for a user to find trending topics to create content. I did not want any interactions throughout the design to be distracting. By changing the color of the borders I created simple interactions that still communicate to the user that they can click on the button.
Walkthrough of the first user flow of the high-fidelity designs
First user flow: an existing user needs to create a blog post, but doesn't know what to write about. They look at the suggested trending topics to make the process less time consuming. The user copies the content to their clipboard and saves the document to their 'Documents' page.
Walkthrough of the second user flow of the high-fidelity designs
Second user flow: an existing user needs to create content, but doesn't know what the topic should be. They look at trending topics on the 'Trending' page and then choose the type of content to create. The user copies the content to their clipboard and saves the document to their 'Documents' page.
Reflection
This project was a great exercise in working within design sprints. Having a specific amount of days dedicated to a part of the design process not only helped with the structure of the project but my understanding of the entire UX/UI design process. It was intimidating at first but the design process is one that is very iterative, so going back and making changes was always an option.
After creating the final design, I had to present my entire project to the rest of my cohort. This was an exciting opportunity to share what I had been working on for 3 weeks. It was very gratifying to be able to present my designs that were created from research to my cohort-mates and instructors.
More Designs
Private School Locator
A mobile app that helps parents find the right private school for their children. I utilized user interviews to create mid-fidelity wireframes.
Heirloom
A web app that automates the most tedious gardening tasks. I utilized UX prototypes and a persona to create high fidelity wireframes.
.png)
.png)
.png)
.png)
.png)
.png){kind=small}