Storyverse AI

Overview

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 is a key selling point for Storyverse AI.

Final Design Solution

I created reusable components such as buttons, images, and a main navigation header to keep designs stylistically consistent.

The placement of UI components 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 Creator Dashboard page (created using mock data in Google Sheets)

I used Stitch to generate the three notifications for the Sample Story and Creator Dashboard pages, quickly making high-fidelity notifications that fit my design vision and aligned with the established typography (Figtree for body text and microcopy) 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 screenshot and use in my high-fidelity designs.

Similarly, I also experimented with AI image generation, using Microsoft Copilot and ChatGPT to generate book cover images, either from brief yet descriptive prompts or from full short stories I had previously written, to accelerate the process of developing high-fidelity wireframes. I chose Copilot and ChatGPT as I found they are reliable when it comes to creating high-fidelity images with readable titles, whereas other AI models may be prone to generating realistic images with unintelligible titles.

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 Page wireframe (see below).

Process

I started by creating a competitive analysis to compare three major storytelling platforms—Wattpad, Archive of Our Own, and Medium—and one AI-drive character creation platform, Character.AI. Analyzing the pros, cons, and affordances of each led to key takeaways that I incorporated into my design.

I then created two user personas—one for a freelance writer and one for a reader—to ensure my design catered to their needs. For instance, since the writer persona, Emily Parker, needs to know how users engage with her stories, I added an analytics dashboard to the creator profile in my wireframes.

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.

While I was constrained by a lack of existing user research, my competitive analysis enabled me to gather key insights from industry-leading story-sharing platforms, 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 Gestalt design principles to group components together).

Conclusion

Storyverse AI represents 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 five stylistically consistent high-fidelity wireframes. Likewise, Stitch enabled me to iterate on the design of high-fidelity notifications.

I used AI tools like 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.