Cervantes – AI One-shot generator

Role: User Experience, User Interface Design and Front-end developer
Tools: Research, Paper prototypes, Figma, JavaScript, React, Nextjs, CSS, Tailwind, Firebase, Open AI API.

With a group of friends, we created a small project with Nextjs as a framework using Firebase and OpenAI. It was a pretty fun experience, the web application creates a “one-shot” adventure based on some inputs. I was in charge of interviews, research, documentation, daily scrum, paper prototypes, wireframes, and some Front-end development (with another developer).

STORYBOARD

Before making any design decisions I wanted to have a quick draft of what the “product” was all about. The main inspiration was our need to create wacky one-shot role-playing game adventures to enjoy with friends. Fernando already created a nice inspiration board…

Storyboard by fer, it includes a simple input that created the whole adventure. The idea boar includes characters photographs, maps, and more.
Fer’s inspiration board

And I did this really quick storyboard to support the scenario.

  • The user wants to create their own adventure. A friend recommended an application to them.
  • The application provides various options to choose the type of adventure to create.
  • The application generates the adventure for them and provides a file or package for them to download the complete adventure.
  • Finally, the user can play with their friends either in person or online.
Funny doodles representing a Dungeon Master creating an adventure and then sharing it with friends.

PERSONA

We wanted a specific guide for app design, so we created a persona to represent a typical user.

This is a persona sheet created for the web application, starting Robert Weber, 38 years old, Computer Forensics Investigator, married with children

We also created a stakeholder Map, taking into consideration every key group that takes part in this main proposed problem “A person that wants to create their own unique adventure”.

USER FLOW

This one changed constantly on each interaction, we usually found missing paths or steps.

Diagram of the user starting from the need to create an adventure and foreseeing every possible road or desision.

PAPER PROTOTYPES
Here are some screenshots of the paper prototype, I really enjoy doing these paper prototypes, they are really helpful in showing interaction early on and you can add, remove, or edit easily and “on the fly”.

Explaining the left slider that should show information about how to use the web app
Explaining the left slider that should show information about how to use the web app
Explaining the right side of the design, it includes a login form and I was talking about getting the social media sign-in buttons on top.
Explaining the right side of the design, it includes a login form and I was talking about getting the social media sign-in buttons on top.
The Software Architect served as a user and he explained that he usually uses an email or password to re-share this information with their family, it was a nice finding.
The Software Architect served as a user and he explained that he usually uses an email or password to re-share this information with their family, it was a nice finding.
Here we were checking the registration form
Here we were checking the registration form
After a user has filled out the registration form, an illustration, and message should let them know that it was successful. Here he noticed that we needed to add to our architecture an email delivery service
After a user has filled out the registration form, an illustration, and message should let them know that it was successful. Here he noticed that we needed to add to our architecture an email delivery service

Having the chance to test a prototype like this opens up new opportunities, and unveils pending designs, features, or pieces of the architecture.

Dashboard view showing on the left side the options or
Dashboard view showing on the left side the options or “prompts” and an animation (funny, that was crutial) to explain how to generate an adventure.
We included a randomize button to add different values to the prompts in case the user wanted to create something really fast. The cameraman suggested adding a random option in each field.
We included a randomize button to add different values to the prompts in case the user wanted to create something really fast. The cameraman suggested adding a random option in each field.
Between the time the user clicks on generate adventure we need to show a funny animation, some suggestions were goblins cooking in a big pot.
Between the time the user clicks on generate adventure we need to show a funny animation, some suggestions were goblins cooking in a big pot.
Showing how the adventure will be displayed with a download button.
Showing how the adventure will be displayed with a download button.
Different options to download that adventure in PDF, HTML, and Markdown.
Different options to download that adventure in PDF, HTML, and Markdown.

I have a video showing this paper prototype, if you want to take a look write me back at contact @ freshorangedesign.com.

WIREFRAMES
Here is a screenshot of one of the initial Wireframes, one of the team members created some sample images using Midjourney.

Wire frame first view showing a gobbling on the left side and the validate your email option on the right side.

This is version 2.0, this time, I was very careful to avoid adding color. Wireframes should be grayscale and shouldn’t include images. The images below show the login view and main dashboard.

Login with carousel on the left side and the login form on the right side
Login with the carousel on the left side and the login form on the right side.
Login with Google sample
Login with Google sample
Feedback in case the Authentication popup was closed, the one from Google.
Feedback in case the Authentication popup was closed, the one from Google.
Loading animation
Loading animation
Loading animation success showing a big checked sign
Loading animation success!
The main dashboard shows the options available to create the adventure: credits, settings, mission, who is going to provide the missions where is the adventure located, and how the party meets.
The main dashboard shows the options available to create the adventure: credits, settings, mission, who is going to provide the missions where is the adventure located, and how the party meets.

These other images show how the user generates and downloads an adventure

Sample of the loading animation while the app is creating the adventure. On the left side is the input form, on the right side, the animation.
Sample of the loading animation while the app is creating the adventure.
The adventure is created, we can see the complete text on the right side and a button to download. On the left side the inputs are filled with what we would like the adventure to have.
The adventure is created, we can see the complete text on the right side and a button to download.

We also thought of having a basic user administration view, creating users, changing roles, and adding credits.

Administrator view, with a list of users and possible actions.
Administrator view, with a list of users and possible actions.
Single user edition modal window.
Single user edition modal window.
Modal window to validate if the administrator wants to delete an user.
Modal window to validate if the administrator wants to delete an user.

There are many other interactions, but it’s difficult to include them all here.

IDEATION
Ideation and new opportunities arise the more we work on the One-shot generator, here is a simple example of some ideas, but we had many more.

FRONTEND

We used nextjs as a JS/React framework, and tailwind as a CSS framework. Talking about the moving parts of the application, one thing that accelerated the development was using Firebase to manage all the user data, and of course, the main technology of this demo was using OpenAI API.

DEMO

Feel free to check this video,with a quick demo of CERVANTES.

Login screen, Users can use Google to log in as well.
Sample of the main dashboard, users had about 50 credits initially to start playing around with different options to create their one-shot adventure.
This image shows the adventure already generated.

The one-shot adventure is available to be downloaded on Markdown, it includes Introduction, Characters, Villain, Scenes, Plot Twist, and Endings. Here is an example of the output for an Adventure using the Eldrish Horror Setting:

# Introduction

In the bustling city of London, a mysterious and ancient artifact has gone missing - the lost book of ancient mermaid invocation. Legends say that this book holds the power to summon and control mermaids, granting great fortune and unimaginable abilities to its possessor. However, it also carries a dark curse that brings destruction and chaos to anyone who misuses its powers. This adventure revolves around the quest to find this lost book before it falls into the wrong hands.

## Characters

1. **Evelyn "Evie" Whitaker**: A skilled archaeologist with a deep fascination for ancient artifacts. Evie possesses extensive knowledge of mythical creatures and legends surrounding mermaids. She is determined to find the lost book before it causes harm.
    - Profile: Evie is in her early thirties, with short brown hair, green eyes, and a scholarly aura. She wears practical clothing suitable for fieldwork.
    
2. **Samuel "Sam" Blackwood**: A talented hacker who stumbled upon encrypted files hinting at the existence of the lost book. Sam seeks adventure and excitement, always ready to challenge himself in dangerous situations.
    - Profile: Sam is in his late twenties, with long black hair tied in a ponytail and piercing blue eyes behind his glasses. He dresses casually but carries various technological gadgets.

3. **Lucinda "Lucy" Chambers**: A gifted psychic with inherited clairvoyant abilities that allow her glimpses into hidden realms. Lucy joins the quest after having visions about the lost book's potential disastrous consequences.
    - Profile: Lucy is in her early twenties, with flowing red hair and intense hazel eyes. She possesses an otherworldly aura that sets her apart from others.

## Villain

**Drake Mortimer**: An unscrupulous collector of rare artifacts who seeks ultimate power through possession of the lost book. Mortimer will stop at nothing to acquire it, even if it means unleashing chaos upon the world. He employs a horde of loyal henchmen to aid him in his malicious pursuits.

## Scenes

1. **The Pub**: The player characters meet in a dimly lit pub in London to discuss their shared interests in ancient artifacts and legends. They stumble upon a mysterious old man who claims to have information about the lost book's whereabouts. However, before revealing anything substantial, the old man vanishes, leaving behind a cryptic clue.

2. **The Haunted Library**: Following the cryptic clue, the party finds themselves in an eerie, abandoned library filled with dusty books and strange whispers. They must navigate through traps and puzzles while evading supernatural creatures guarding the hidden chamber where the lost book is rumored to be kept.

3. **The Final Confrontation**: With the lost book finally within reach, the player characters confront Drake Mortimer in his secret hideout beneath an ancient temple located on an isolated island off the coast of London. The party must outsmart Mortimer's henchmen and defeat him before he can unleash the book's dark powers.

## Plot Twist

During their search for the lost book, the player characters discover that it can either be used for benevolent purposes or utter destruction depending on how it is invoked by its possessor. This revelation forces them to question their initial goal and consider alternative ways of handling such powerful artifacts.

## Endings

1. **Triumph of Justice**: The player characters successfully retrieve the lost book from Drake Mortimer's clutches and decide to destroy it using a forbidden ritual they uncover during their adventures. By doing so, they save humanity from potential devastation and earn recognition as heroes among those aware of their courageous acts. This ending opens up possibilities for future adventures involving other ancient artifacts or mystical mysteries.

2. **Temptation of Power**: Succumbing to temptation, the player characters decide to keep the lost book for themselves. They believe they can harness its powers for good, but slowly, they are consumed by its dark magic. This ending leads to a follow-up adventure where the player characters must confront their inner demons and find a way to break free from the cursed book's influence before it destroys them and everything they hold dear.

Here is the link to the demo: https://cervantes.dev.mon5.com/, if you want to check it out, just write me back at contact@freshorangedesign.com.

What we wan to improve:

  • We would like to improve the look and feel of this prototype, getting closer to the initial wireframes.
  • In one redesign we wanted to show the one shot generated with art and fonts related to the selected genre.
  • An invite system to give away credits to friends so they can try creating their own One-shot adventure.
  • i18N, we wanted to share this within Spanish speaking communities.

Thanks to…

Thank you so much to the team Alexander Moreno (Architecture, prompts, AI-generated images), Fernando Tucci (Prompts, E-learning design expert, developer), Nelson Galán (Back-end developer), Óscar Vísquez (Front-end developer), and special thanks to Edd “El peque” (who helped us record the paper prototype).

By the way! Fer @JFTucci has this amazing project using AI called Kansei @KanseiApp, If you want to learn a new language you should definitely check it out https://kansei.app/

Related Posts