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.

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.

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

starting the design

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.

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: 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.

usability study: Parameters

Study Type

Unmoderated Usability Study

Location

New York, Remote

Participants

5 Participants

Length

5-10 Minutes

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

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.

After Usability Study

Before Usability Study

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