AI Image Generator

Role

UX Designer

Interaction Designer

Tools

Figma

Project Duration

5 weeks

Challenge

The Educator-Focused Image Generator is an AI-powered tool designed to help educators quickly create classroom-appropriate images using natural language prompts. The tool leverages existing state-of-the-art AI models (Flux, Google Gemini, and additional open-source solutions) to generate safe, high-quality images tailored to educational contexts.

Results

I created fully prototyped, high-fidelity desktop wireframes for the Educator-Focused Image Generator.

Jump to final prototype

  1. Project Brief

Getting tailored results from existing AI models is not as easy as one might think. Most teachers are not AI prompt experts which can make it difficult to get specific results, especially when AI generators are making assumptions to fill in the gaps. Therefore, the Educator-Focused Image Generator aims to stand apart from these models by providing educator-centric presets and built-in prompt suggestions designed specifically for non-technical users.

Goals

Empower educators

Enable teachers, instructional designers, and educators to generate custom visuals without needing advanced technical skills.

Save time

Replace time-consuming manual image searches or edits with a fast, AI-driven process so that educators can spend time engaging with their students.

Ensure tailored results

Provide outputs that are appropriate for classroom use, incorporating robust content filters and educator-specific style presets.

Example User Flow

After identifying pain points and goals, we consulted an AI model about the typical steps that a user might take to generate an image. This helped us outline the types of interactions we would have to design and the logical flow of the final prototype.

The following example outlines how a 7th-grade chemistry teacher might interact with the Educator-Focused Image Generator:

  1. Welcome & Grade Level

  2. Subject & Topic

  3. Purpose of the Image

  4. Style/Look & Feel

  5. Key Details in Plain English

  6. Generate the First Draft

  7. Refinement Options

  8. Review Final Images

  9. Download & Integration

  1. Competitive Analysis

After understanding the goals and vision for this project, I started research on competing products. This helped me understand how popular AI image generators work, what kind of results they provide, and how I could improve the image generation experience.

Most image generator models had a similar text-based experience that produced between one and four images.

  1. Iteration 1

The competitive analysis helped me understand the typical mental model that I should follow for my designs. It also presented an opportunity to change the way that the model collects information. So for my first iteration, I wanted to create a card-based interface for users to input information about their image.

Sketches

Based on the steps outlined earlier, I drew a step-by-step process for how our AI model might collect information with a card-based interface.

  • Step 1: User inputs that grade level and the subject.

  • Step 2: User selects the type of image they want to create.

  • Step 3: User selects the style of their image.

  • Step 4: User is brought to the chat space to further define the image with the AI agent.

  • Step 1: User inputs that grade level and the subject.

  • Step 2: User selects the type of image they want to create.

  • Step 3: User selects the style of their image.

  • Step 4: User is brought to the chat space to further define the image with the AI agent.

Wireframes

  • Step 1: Grade and subject

  • Step 2: Image type

  • Step 3: Image style

  • Step 4: Chat space

After sketching, I created mid-fidelity wireframes from the sketches using the Marvel UI kit.

  • Step 1: Grade and subject

  • Step 2: Image type

  • Step 3: Image style

  • Step 4: Chat space

Feedback

I presented the following wireframes to my team's Project Manager for review. During our discussion, we identified potential pain points with the cards as having them on different screens could cause more fatigue for users. We also discussed how the cards might not be specific enough to provide targeted insights for users.

The goal for the next iteration was to integrate these functions into the chat space and provide the users with more AI-driven suggestions/insights.

  1. Iteration 2

In my second iteration, I focused more on the interactions between the AI agent and the user to provide more tailored suggestions. Additionally, I wanted to demonstrate how the AI agent might provide insights based on user input.

Sketches

I created sketches to outline how a user might interact with the AI agent to provide basic information about the image. With this model, the AI agent will ask for information from the user and provide suggestions based on their input.

  • Step 1: User starts in the chat space and is asked to provide initial information about the target grade level and subject.

  • Step 2: The AI agent will provide suggestions based on the initial input. The user can select one of these options or type their own.

  • Step 3: The AI will continue to provide suggestions based on the user's input. If the user rejects the suggestion, the AI agent will provide other options.

  • Step 1: User starts in the chat space and is asked to provide initial information about the target grade level and subject.

  • Step 2: The AI agent will provide suggestions based on the initial input. The user can select one of these options or type their own.

  • Step 3: The AI will continue to provide suggestions based on the user's input. If the user rejects the suggestion, the AI agent will provide other options.

Wireframes

Based on my sketches, I created wireframes to model the interactions between the AI agent and the user. I also created flows for how a user might approve or reject the AI agent's suggestions.

  • Step 1: User starts in the chat space and is asked to provide initial information about the target grade level and subject.

  • Step 2: The AI agent will provide suggestions based on the initial input. The user can select one of these options or type their own.

  • Step 3.1: The AI agent will continue to provide suggestions based on the user's input. Here, the user rejects the suggestion and is provided with more options.

  • Step 3.2: If the user approves the initial suggestion, the AI agent will confirm the user's choices before moving on to generating the image.

  • Step 4: After gathering and confirming information, the AI agent will start the image generation process.

  • Step 1: User starts in the chat space and is asked to provide initial information about the target grade level and subject.

  • Step 2: The AI agent will provide suggestions based on the initial input. The user can select one of these options or type their own.

  • Step 3.1: The AI agent will continue to provide suggestions based on the user's input. Here, the user rejects the suggestion and is provided with more options.

  • Step 3.2: If the user approves the initial suggestion, the AI agent will confirm the user's choices before moving on to generating the image.

  • Step 4: After gathering and confirming information, the AI agent will start the image generation process.

Feedback

I went through another round of critique with my product manager to discuss the flow and wireframes. While this flow is closer to what we wanted to achieve, we identified a few pain points. First, splitting up the steps in this way might make the interaction longer and cause fatigue for the user. Second, the text input box wasn't getting much use with this model the input functions are built in to the message boxes.

Our goal for the next iteration is to create a way to input the most important information upfront and transform the way users might use the text input box.

  1. Final design

In the final design, I implemented a modal input at the beginning of the flow and added cards to the text input area. Additionally, I prototyped the interaction to model how a user might interact with this AI agent.

  • Step 1: The user starts on this landing page, which features a modal input box to provide the most information at the start of the process.

  • Step 2: After gathering initial information, the AI agent will suggest a type of image to create based on the initial input. User will be able to select an option with cards.

  • Step 3: After selecting the image type, the user will be asked to select a style for their image.

  • Step 4: The user will be asked to describe their image with the text box.

  • Step 5: Once the AI agent has all necessary information, it will come up with a generated image and provide the users with refinement suggestions.

  • Step 6: After selecting a refinement option, the user can continue to refine the image or finish the process.

  • Step 7: If the user chooses to finish, they have the option to download the image to their device, add it to a lesson plan, or save to their image library.

  • Step 1: The user starts on this landing page, which features a modal input box to provide the most information at the start of the process.

  • Step 2: After gathering initial information, the AI agent will suggest a type of image to create based on the initial input. User will be able to select an option with cards.

  • Step 3: After selecting the image type, the user will be asked to select a style for their image.

  • Step 4: The user will be asked to describe their image with the text box.

  • Step 5: Once the AI agent has all necessary information, it will come up with a generated image and provide the users with refinement suggestions.

  • Step 6: After selecting a refinement option, the user can continue to refine the image or finish the process.

  • Step 7: If the user chooses to finish, they have the option to download the image to their device, add it to a lesson plan, or save to their image library.

Final Prototype

Other Projects