Vista

Modernizing learning content with generative AI

challenge

The learning content in the Atlas platform is the digital equivalent of printed interactive journals. At first it began as a direct copy of the print material. The content was translated from spreads/modules in print to mobile screens. On average each print modules (roughly 2 pages) became 6 to 7 mobile screens. As an outcome the mobile modules became text heavy and lost their engaging visual identity. Some of the print journals were also published more than a decade ago, and their illustrations and photos felt outdated in the mobile context. The content needed to be engaging in its new digital home.

With more than 50 journals ahead of us, creating these the traditional way would be a bottleneck. We began testing various generative ai tools. After flirting with several we landed on MidJourney and created the Vista server. Even though MidJourney generated beautiful visuals we needed to create consistent styles and more importantly we needed to counter the bias in the outputs. For example in professional contexts, MidJourney leans towards showing men. In casual scenes, it shows affluent people and luxurious settings. When generating individuals or groups, they tend to be white, skinny, young and over-sexualized. Here is my deeper dive into MidJourney biasses.

scope
Generative AI
UX/UI
Illustration
process

In the journaling flow we began by introducing more visuals are regular intervals to the user. At the beginning of every chapter we introduced a chapter cover with an image that encapsulated the theme of the chapter.  We did the same at the start of each chapter. At this stage we had net new visuals to create and old ones to replace Using discord made it easy for the team to collaborate and iterate. Remixing, variations, upscaling, vary region, and other modifiable commands helped us improve the final outputs, instead of having to prompt over and over again.

In the journaling flow we began by introducing more visuals are regular intervals to the user. At the beginning of every chapter we introduced a chapter cover with an image that encapsulated the theme of the chapter.  We did the same at the start of each chapter. At this stage we had net new visuals to create and old ones to replace Using discord made it easy for the team to collaborate and iterate. Remixing, variations, upscaling, vary region, and other modifiable commands helped us improve the final outputs, instead of having to prompt over and over again.

I created prompting guidelines to help the team generate illustrations that have a similar style in terms of lighting, camera angles, colors, and level of detail.

/imagine a closeup illustration of a casual job interview in a simple bright room. Soft focus with minimal background, simplified geometric shapes,  minimal human figures, subtle gradient textures, harmonious color palette, diffused lighting, balanced composition, narrative focus, --ar 4:3 --no suit, tie, corporate, clipboard

Prompt format: /imagine a camera angle illustration of a scenario in a setting, style, color, lighting --ar aspect ratio --no anti-prompt
Every chapter starts with a cover image that introduces the theme
Every module begins with an image that introduces the main ideas
lesson & insights
  • Countering bias: To represent our user base and real people we needed to actively adapt our prompts. We had to prompt for diversity in gender, age, race, and socio-economic status. We incorporated terms into our prompts to generate more representative people and scenes. We used words like casual candid multi-cultural middle-aged among others to modify the outputs. Here is a closer look at some methods that worked for us.
  • Understanding constraints: Generative AI models can make incredibly compelling visuals, but many models struggle with creating diagrams, infographics, lettering, and understanding really complex concepts. Sometimes it takes many tweaks to produce a desired output. We often modified our original scenarios or tried new ones to come up with visuals that fit the journals. So instead of a scene where. landlord is handing a key to a new tenant, we generated an image of person unpacking boxes, while moving into their apartment.
  • Improving prompt writing: a basic understanding of lighting, camera angles, and graphic compositions drastically improves a persons prompt writing ability. So instead of asking for a /imagine a woman stretching outside, we would ask for sometime for specific like /imagine a wide front view of a mother doing leg stretching exercise in an urban park, casual workout, lunge, plus sized, in the style of editorial illustration, simplified shapes, greens dark ambers and grays --ar 4:3
  • Countering bias: To represent our user base and real people we needed to actively adapt our prompts. We had to prompt for diversity in gender, age, race, and socio-economic status. We incorporated terms into our prompts to generate more representative people and scenes. We used words like casual candid multi-cultural middle-aged among others to modify the outputs. Here is a closer look at some methods that worked for us.
  • Understanding constraints: Generative AI models can make incredibly compelling visuals, but many models struggle with creating diagrams, infographics, lettering, and understanding really complex concepts. Sometimes it takes many tweaks to produce a desired output. We often modified our original scenarios or tried new ones to come up with visuals that fit the journals. So instead of a scene where. landlord is handing a key to a new tenant, we generated an image of person unpacking boxes, while moving into their apartment.
  • Improving prompt writing: a basic understanding of lighting, camera angles, and graphic compositions drastically improves a persons prompt writing ability. So instead of asking for a /imagine a woman stretching outside, we would ask for sometime for specific like /imagine a wide front view of a mother doing leg stretching exercise in an urban park, casual workout, lunge, plus sized, in the style of editorial illustration, simplified shapes, greens dark ambers and grays --ar 4:3
  • Countering bias: To represent our user base and real people we needed to actively adapt our prompts. We had to prompt for diversity in gender, age, race, and socio-economic status. We incorporated terms into our prompts to generate more representative people and scenes. We used words like casual candid multi-cultural middle-aged among others to modify the outputs. Here is a closer look at some methods that worked for us.
  • Understanding constraints: Generative AI models can make incredibly compelling visuals, but many models struggle with creating diagrams, infographics, lettering, and understanding really complex concepts. Sometimes it takes many tweaks to produce a desired output. We often modified our original scenarios or tried new ones to come up with visuals that fit the journals. So instead of a scene where. landlord is handing a key to a new tenant, we generated an image of person unpacking boxes, while moving into their apartment.
  • Improving prompt writing: a basic understanding of lighting, camera angles, and graphic compositions drastically improves a persons prompt writing ability. So instead of asking for a /imagine a woman stretching outside, we would ask for sometime for specific like /imagine a wide front view of a mother doing leg stretching exercise in an urban park, casual workout, lunge, plus sized, in the style of editorial illustration, simplified shapes, greens dark ambers and grays --ar 4:3
Content creators use the vista server to produce assets for all courses made available to external users. Each course gets it’s own channel to keep things organized

Say hello

Let's connect and collaborate to make great things happen! Use this form  or drop me some lines at copy

copied!

Send
feather
Thank you! I'll be reading your message soon.
Oops! Something went wrong while submitting the form.