Storyverse AI

Overview

Storyverse AI is a platform I designed where AI-powered agents empower users to chat with a story's characters, while creators can easily track the performance of the content they publish.

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, 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 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. I found that using Stitch to generate UI elements rather than full wireframes kept design details consistent and increased efficiency.

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 text.

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 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. I filled in the template with content, resulting in the final design solution (see above).

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.

If I had more time, I would have conducted evaluative research with my high-fidelity wireframes to unlock user insights, then used them to iterate on this project.