Mockup of the character builder UI used for making edits to your character in the character creator portion of Livetale.

Livetale

Livetale is a digital roleplaying platform that promotes embodiment of your digital avatar to produce more emotion driven experiences for TTRPGs. Players can create or leverage Tales to tell stories together. Each livetale is different, even if they share the same source.

the nitty gritty details

role
Senior Visual Designer
when
2024 - present
for who
Unplay
where
Fully remote
how
Figma, Photoshop, Illustrator, Unity
New website header as part of the redesign I did for Unplay's Livetale website.

what are we trying to solve?

Roleplaying games are played partially in the imagination and partially using a game board or VTT. The connection we have to our characters is limited to the voice acting we bring to the table for our characters. When telling complex stories with moments of joy, sadness, anger, and surprise, you need tools that help others feel the things you are trying to express.

There is no one platform that allows for character voice modulation, facial tracking, and collaborative storytelling all within a 3D platform that allows for UGC.

proposed solution

Livetale is a digital platform that leverages MediaPipe for facial recognition and integrated voice modulation. This way, if you're a grizzly deep-voiced individual, you can sound like your half elf princess character. Players can come together to be who they want to be - voice, face, and body are all controllable so you can play out your dramatic melodramas in real time alongside your go-to roleplaying friends, or the new ones you meet on our platform.
Mockup for the Beta program as well as Tale overview that features tale image, description, and text of the tale.

who are we making this product for, and how will they use it?

We first went though and established the different goals users will have when coming to our site. Users fit into a few different categories: First time visitor, Member, TaleWeaver.

First time visitors are here to gather information and see if this is something they're interested in. Our goal for first time users is to hook them into the experience and sign up. Once we have them in our ecosystem, that barrier to entry and to buy into our product dissipates.

Members are people who are familiar with what we do here and may have some different goals. They may want to find a livetale to play in, join their friends, update their user information, read lore about tales they're a part of, see their beta sign up rewards, invite new users, and manage their upcoming roleplay sessions.

Taleweavers have all of the use cases of a member, but with some additional features. They may want to write lore for their campaign, make a new tale, create new characters for their campaigns, invite friends to play in their campaign, update their schedule for the next session, un-invite a bad apple of the party, and manage their earned income.

With all of this in mind, I began to map user flows that depict the pages we need on a high level.
Taleweavers permissions and use cases for creating tales.
Taleweavers permissions and use cases for creating tales.

Spellbook - the design system

When it came time to develop, I worked alongside our front end engineers to establish how we planned to go about implementing designs.
I created a design system in Figma for us to use as we update designs and webpages going forward. This included creating the bare essentials like a comprehensive light and dark mode color scheme, as well as creating comprehensive guides on how to use the components that make up the design system.
Color Guide
Color Guide
Text input guide
Text Input Guidelines

Designing for Unity

In addition to the work on the web, a big portion of the work needed to be done is also on the Unity portion of the experience.
The character builder is one of the places that I helped out the most on.

I began by doing competitor analysis on systems with character builders, primarily using Baldur's Gate 3 and Hero Forge as inspiration for categorizing and designing the components to be used in building a character. The system we went with divides and conquerors large categories into more manageable bites.

We start broad with Base, Body, Head, Face, and Mannerisms which make up your characters personality. Within each subsection we get more granular and allow users to get more or less detailed in their character's creation.

In order to reduce choice paralysis and making users feel overwhelmed, we found that reducing the amount of content a user has to worry about on each screen helps them spend more time making purposeful decisions on their character.

We also realize that there are people who may not want to spend large amounts of time on character creation and may want to just describe the character they want! That's why we also implemented an AI generated character builder that can intake your character description and spit out a custom character using our software.

Conclusion + Take-aways

During this design process, I learned a lot about Figma and design systems that work at scale. A lot of the research going into the facets of the experience we were creating lent itself to creating dynamic systems that worked cross platform. Researching a demographic of creators and getting direct feedback from playtests allowed me to make large-scale changes that improved the overall experience of our users.

As we continue development, the feedback we are receiving is being processed, analyzed, and made into actionable decisions to improve the UX and visual fidelity of our experience.