VisualVerse

Text-to-Image AI generation

Problem

With the fast development of AI technology there has not been an interface incorporating text-to-image in a way that enhances everyday life for educators.

Collaborators
Jesus Paredes
Roles
-Lead product designer
-UX Researcher
Period
December 2022- July 2023

Overview

Product

VisualVerse is a Text-to-Image AI generation product. VisualVerse’s primary target users include educators across all levels who need a visual aid in their teachings. The app can also be used for casual use for those who are into bringing their thoughts to life in an image.

The Goal

Design an app that will provide a focused approach to text-to-image ai generation that can help educators across all levels of education provide better visual aid for their teachings. 

Responsibilities

Conducting interviews • site mapping • paper and digital wireframing • low and high-fidelity prototyping • conducting usability studies • accounting for accessibility • iterating on designs • determining information architecture • and responsive design.

User Research

Research Summary

I used VisualVerse’s data on visual aid use in schools to develop interview questions, which were then used to conduct user interviews. Most interview participants reported feeling like there's never a straightforward tool to help with imagery. The feedback received through research made it very clear that users have a need for a product that provides visual aid in a concise and appealing manner while being simple enough for those who aren’t tech savvy to understand how to navigate through it. 

Affinity Diagram
We found very helpful data from our qualitative research methods and then we made an affinity diagram to separate the data into groups of tasks which we further categorized by high level goals for improvement inefficiency, process, depth and familiarity.
Persona 1
Sarah is a 7th grade teacher who needs a simple to use app website for visual aid because she likes to incorporate modern technology to help enhance learning for her students. 
Persona 2
Connor is a teaching assistant who needs a new way to help with visual aid in his teachings with his students because he is tired of the current tech products he uses as they are too confusing or take too long to set up.  
Competitive Audit
An audit of a few competitor’s products provided direction on gaps and opportunities to address with the VisualVerse app.  Audit
Here's a better look at VisualVerse's competitive audit
Ideation
I did an ideation exercise in 8 minutes to come up with ideas to differ from my competitors according to the competitive audit. My focus was specifically on simplifying the UI and emphasizing the description and image generation.

Starting the Design

Digital Wireframes
After ideating and drafting some paper wireframes, I created the initial designs for the VisualVerse app. These designs focused on providing a straightforward path to downloading the generated image a user writes a description for.  
Low-Fidelity Prototype
To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of writing descriptions and downloading the generated image
View VisualVerse's low-fidelity prototype here
Usability Study: Parameters
Study Type
Unmoderated Usability Study
Location
New York, Remote
Participants
5 Participants
Length
5-10 Minutes
Usability Study: Findings

History

Users wanted to be able to find old images they previously generated.

Favorites

Users want somewhere where they can view their favorite images.

Sharing

Users want a feature to allow them to share the generated images to a friend and other platforms.

Refining the Design

Mockups
Based on the insights from the usability studies, I applied design changes like adding a "History" and "Favorites" section, this was a result of hearing how users wanted a way to save their favorite images and see old ones. I also applied a feature to refresh the generated images in case users did not like the one generated for them the first time.
Before Usability Study
After Usability Study
Finalized mockups
High-Fidelity Prototype
The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study.View the VisualVerse high-fidelity prototype
View VisualVerse's high-fidelity prototype
Accessibility Considerations

Descriptions

Clear labels for icons that can be read by screen readers.

Interactions

Contrast on buttons from the rest of the elements to help users have less train on their eyes. 

Clarity

Legible font that is clear for all users with proper text size and color

Responsive Design

Site Map
With the app designs completed, I began to work on designing the responsive website. I used the VisualVerse sitemap to guide the structure of each screen’s design to ensure a consistent navigation and provide an easygoing experience. 
Responsive Designs
The designs for screen size variation included mobile, tablet, and desktop. I optimized the designs to fit specific user needs of each device and screen size.
Mobile Website
Tablet
Desktop
Finalized mockups for desktop
Desktop High-Fidelity Prototype
The high-fidelity prototype for the desktop followed the same user flow and features as the mobile device High fidelity prototypes, but design changes were included to take into account how the difference in dimensions a desktop or laptop has fro a mobile device which is more vertical.
View VisualVerse's high-fidelity prototype on desktop

Takeaways

Impact
Users shared that the app was extremely convenient and easy to use. One user stated “this makes my life so much easier”, another user mentioned how the app was very straightforward and the process was so quick which helped her use the app in an easygoing manner. 
What I Learned
I learned that taking things step by step first instead of worrying about the bigger picture overall helps you gain more insights and become more productive as it helps make the workflow less overwhelming when working on a big project by yourself. 
Next Steps

History

Conduct research via surveys on how successful the app is in schools as a visual aid.

Favorites

Add tips in the app and site to help users learn better descriptions for better image generation.

Promotion

Promote the app through the use of incentives and monitor engagement

Local Time