Storyverse AI is a platform I designed that would allow authors to share fictional stories with users. AI-powered agents empower users to chat with a story's characters, leveraging AI to explore new ways to engage with stories. The integration of AI to further engage readers with popular stories is a key selling point for Storyverse AI.
You can check out the interactive prototype or click through the high-fidelity wireframes below.
I created reusable components such as buttons, images, and a main navigation header to keep designs stylistically consistent.
The placement of UI components, information architecture, and the UX copy (save for the sample character interaction on the Character Interaction page) represents my original work, as does the selection of typography and colors and the creation of UI components besides the notifications. These include:
Main navigation header (customized from the Labyrinth UI Kit)
Buttons (customized from Penpot's Wireframing Kit v1.1 and Google's Material Design Kit)
Filters with checkboxes and tags, including a searchbar for story tags (customized from the Labyrinth UI Kit)
Analytics graphs for the Author Profile and Analytics Dashboard (created using original mock data in Google Sheets)
I used Stitch to generate the three notifications for the Sample Story and Author Profile pages, quickly making high-fidelity notifications that fit my design vision and aligned with the established typefaces and color scheme. I screenshotted low-fidelity notifications and gave descriptive prompts including the hex codes of colors for the page and notification backgrounds, as well as for the text, button, and icon colors, to ensure the tool generated precise UI components I could then use in my high-fidelity wireframes. I found that using Stitch to generate UI elements rather than full wireframes kept details consistent and increased efficiency.
Similarly, I also experimented with AI image generation, using Microsoft Copilot and ChatGPT to generate book cover images to accelerate the process of developing high-fidelity wireframes.
I wrote a brief story synopsis as part of the prompt for the AI image generators, then refined details such as the graphics in the foreground of the book covers, until I was satisfied with the output. The book covers needed to show a diversity of genres and styles that could appeal to a broad user base, so the integration of AI into my design workflow showed me the importance of tasteful discernment in which AI-generated pieces of content was worthwhile to put on a high-fidelity design solution versus which needed more refinement.
For the Character Interaction page, I prompted ChatGPT with my original short story, Mulberry Lane, asked it to roleplay as the character of Christopher Cat, and recorded my prompt and its response in the Character Interaction wireframe.
While I was constrained by a lack of existing user research, I created user personas to align my design solution with needs I would verify with evaluative research if I had the time. I also completed a competitive analysis of industry-leading story-sharing platforms, such as AO3 and Wattpad. This led to insights such as keeping the pages where the user reads a story minimalist and focused on text. I also relied on my knowledge of UX heuristics and best practices to design a user-friendly site (e.g., using the Gestalt principle of similarity and group similar components together).
Next, I designed low-fidelity wireframes in Penpot (an open-source alternative to Figma) to visualize the placement of content on each page. I used components from Penpot's Wireframing Kit v1.1 and Labyrinth UI to quickly mock up the structure of content.
Storyverse AI is a user-centric experiment in incorporating AI into UX design workflows as much as it does the incorporation of AI into storytelling and creative work. By leveraging Penpot's reusable component libraries, I designed seven stylistically consistent high-fidelity wireframes.
Likewise, Google Stitch enabled me to iterate on the design of high-fidelity notifications. I used AI tools like Google Stitch, Copilot, and ChatGPT to accelerate the creation of high-fidelity wireframes. Whereas a team might have in-house graphic designers, using these tools wisely allowed me to add lifelike images to the wireframes while keeping the design human at its core.
If I had more time, I would have conducted evaluative research with my prototype to unlock user insights, then used them to iterate on this project.