☁ ☺
Close up of lorebot application openend up in the chatroom of a dungeons and dragons livestream, with the lorebot logo in the top right corner
Lorebot

Product Design (6 weeks)

An AI tool built for Twitch live-streams that catches you up to speed without disrupting the moment.

Role

Sole Designer

Skills

UX/UI Design
User Research
Prototyping
Motion Design

Tools

Figma
After Effects
Illustrator

Background


Twitch live-streams present a unique digital space to authentically interact and find community with others.

The view of a single live-stream

Navigating from the home page to individual streams

Problem Statement


When a viewer joins a live stream, they have no way to know what they’ve missed beyond scanning an endless chat.

Moreover, catching up on missed content currently means having to disrupt your experience as a live viewer.

Solution


I designed an AI tool that allows users to fluidly jump between past context and the present live experience.

To achieve this, Lorebot was built to inform viewers in the
most challenging, information-dense stream environment
I know of: multi-hour, Dungeons & Dragons streams.

54s concept video

1. Process Snapshot

1st Interview Insight: The Disconnect

Convenience Outweighs Community



Most interviewees didn't watch live-streams even if they did watch streamers, because they’d rather see a highlight reel at their leisure than an unedited broadcast.

2nd Interview Insight: Design Space

Chat is a Refuge



After interviewing, I decided that any UI intervention I attempt should be largely designed within the live-stream chat panel. People just like to watch things together.

Deciding on a Direction

Integrating with current Chat UI



Though I explored some disruptive designs, I determined my solution had to integrate into the existing chat, as viewers rely on the chat's consistency to get a foothold in any stream.
I used simple gray screens to both explore more immersive chat orientations that disrupt conventions, as well as interventions that preserve Twitch chat's current qualities.

Ultimately I found that Twitch chat's UI conventions were too important to tamper with, so chat integration was the key.

Refinement

The AI play-by-play idea was the most viable option, so over the course of 2-3 weeks, I fleshed out it's core interactions and visual design.

UI iterations from start to finish.

2. Feature Breakdown

Jumping with the Adventure Log

The log is a living catalog of stream moments which informs and allows viewers to jump between past & present.

Chat, Fact Check?

All viewers can flag AI entries they deem inaccurate by requesting a re-roll on the entry.

With enough requests, stream administrators are notified, and can then prompt the AI directly to improve the re-rolled entry.

Viewer POV <--------------------------------------------------------> Admin POV

Asking @Lorebot

Chatters can @Lorebot to ask it questions directly in the chat, mirroring how they normally communicate with one another.

Credits & notes.

Nov-December 2024


Figma, After Effects, Illustrator

Advised by Andrew Twigg & Justin Edmund


Special thanks to Evan & Neal "Koibu" Erickson

More to come! Page will be promptly updated!