Hackathon

Plotgen
Team
Timeline
Role
Tools
2 Devs & 2 Designers
Sept 2023
UX/UI Design, Frontend
Figma, Tailwind CSS, Next.js

Overview

Storytelling taken to new heights
Plotgen drew inspiration from the storytellers and artists who excite, move and thrill us with the magic that can be found in their work. That short story or comic that you've always wanted to make? Plotgen can make that dream come true.
‍
This project was completed for HackTheNorth, Canada's biggest Hackathon, in 36 hours.

The Inspiration

💡 How can we use today's generative AI tools to elevate storytelling?
We wanted to empower others with the same kind of magic that is now realizable with AI developments like LLMs and Diffusion Models. Seeing how new tools from companies like BentoML and Cohere make it easy for developers to build products from these developments, we knew we had to do something in the space of generative AI.

Future Implications

🎯 How could Plotgen help communities?
Authors and artists frequently seek cost-effective ways to find partners for creative projects. Plotgen can be used to find inspiration, templates, and writing prompts to kickstart their journeys on various platforms. Plotgen would be particularly beneficial for individuals struggling with speech or literacy, offering opportunities for skill improvement and creative expression in collaborative works.
Design

🎨 Visual Identity

The colours and overall design is fairly minimal in hopes to reduce the cognitive load and overstimulation once the storyline text and images are fully generated.

🏁 Final Screens

The Hi-Fi mockup was completed in Figma, acting as a baseline for the final frontend development. The UI is made to lead the user with prompts that help them create the storyline they want by starting with a basic prompt entry then a customizable theme selection. The word limit slider acts also acts as a way to calculate tokens needed to run the NLM and diffusion model for generation. Users are also able to choose to read their comics either horizontally or vertically, depending on the type of comic they would like to create.

DevPost
Reflections

🤯 Challenges

Helping our devs and learning frontend development!

This hackathon was a completely different scale than the ones me and my team have attended before; so we were all definitely not prepared for the long grueling 36 hours.😴 Because our backend on this project required much more attention, I had the (challenging) opportunity to implement my design and work on the frontend more than I have typically had the chance to.

🤓 What I’ve Learnt

Basic Tailwind CSS & Next.js

I haven't had much opportunity to learn CSS and much frontend implementation, so it was a refreshing challenge to get the chance to do so this Hackathon and also learn from my devs!

🥅 Improvements for the Future

Overall design clean-up/reinvention

Although I am relatively happy with the design of our product, future steps would include fleshing out more of the design details and cleaning up the overall UI design. Additionally, I would love to make the design have more options that allow a user to customize their overall storyline as well as the style of their art.‍