Role: User Experience, User Interface Design and Front-end developer
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).
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…
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.
We wanted a specific guide for app design, so we created a persona to represent a typical user.
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”.
This one changed constantly on each interaction, we usually found missing paths or steps.
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”.
Having the chance to test a prototype like this opens up new opportunities, and unveils pending designs, features, or pieces of the architecture.
I have a video showing this paper prototype, if you want to take a look write me back at contact @ freshorangedesign.com.
Here is a screenshot of one of the initial Wireframes, one of the team members created some sample images using Midjourney.
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.
These other images show how the user generates and downloads an adventure
We also thought of having a basic user administration view, creating users, changing roles, and adding credits.
There are many other interactions, but it’s difficult to include them all here.
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.
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.
Feel free to check this video,with a quick demo of CERVANTES.
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 email@example.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.
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).