Weave UI Redesign
Building a seamless experience between
digital & physical.
Weave is a multi-faceted roleplaying tabletop gaming platform for the digital generation.With a tarot-inspired deck of cards, six dice, and a mobile application, Weave’s physical components inform the game’s digital output of storytelling choices.
One of my biggest focuses as Monocle Society’s Art Director was on developing Weave’s digital user experience to drive user engagement. I set in motion the redesign of the mobile application with the intention of building a more fluid experience between the players' digital and physical interactions. Because of our limited time frame and small team size, the project was executed with a lean UX approach with the intent on iterating through rapid prototyping and immediate feedback.
My Role & the Team
I led the user experience and executed all of the the interface designs for this project, collaborating and iterating with our producer, team of developers, and community manager throughout the process.
Weave game physical cards, designed by Brianna Johnson
Weave was designed as a storytelling platform with physical and digital components. We observed that hype for the game was high, with consumers eager to purchase the physical game, but app retention rates were not aligned with our product sales. With this project we sought to improve the digital experience and increase user retention in preparation for the release of our digital marketplace.
Assumptions & Hypotheses
We believe that simplifying and aligning the digital visual design experience with Weave's physical game will increase user engagement and retention. This project's success will be informed and measured through user engagement and retention analytics. Additionally, we believe that pushing other avenues of engagement besides digital gameplay will drive brand engagement & loyalty. This data would be tracked through the use of deep links on the featured section of our app's landing page and relating that data to their engagement statistics.
Determining Our Proto-Personas
Photo from Geek & Sundry's weekly live streaming show, Weave Society.
Weave has had quick success with much to do with the game’s online presence. Early in the game’s release in 2017, Monocle Society built partnerships with up-and-coming Twitch & YouTube content creators, offering a new way for both industries to engage with their communities.
Through these digital services, the game has obtained a wider reach than common tabletop games and rpgs. To narrow down our target audience we captured our assumptions of our users across a range of three personas with the intention of gathering the research to validate and adjust these assumptions throughout the project. Our personas included:
The Trepidatious Novice
The Confident RPG Veteran
The Ambitious Content Creator
Inherently trepidatious, one of their first times playing a tabletop RPG.
Needs the app to feel comfortable and have a visual simplicity with similar components like other apps they commonly use.
Reluctant to change their RPG play style and hesitant to use an app for their campaigns.
Needs the app to be utilitarian in its structure and design, but with unique elements that enhance gameplay.
Excited about utilizing this technology to enhance their content and add to their viewer's experience.
Needs the app to compliment their unique stream & clearly present game information to viewers.
Still from Weave Society's special episode Weave in Space on G&S.
Overlay designed by myself.
Field studies / user interviews
User research insights were gathered throughout the design process with Twitch and Youtube being two of our most useful tools. Pointedly, we noted the results as heightened experiences and recognized that all available interactions between a user and the game were viable. Sessions of the game were also moderated in-person, and user comments in our community Discord communication board were gathered.
Ideation & Design
Through the ideation process I pushed to experiment and create a broad range of ideas, find their strengths, and adapt them into an informed final design. Additionally, I built a shared understanding with my team through formal and informal collaborative design sessions.
I developed the design aesthetic of the application, focusing on a clean eye-catching interface with pops of color and imagery to give a sense of hierarchy. The pure backgrounds allow the user to focus on content and remain immersed in the world outside of the screen.
Sketches from one of my solo ideation sessions.
The landing screen was devised from ideation sessions on the original seasons screen. A designated landing page would allow us to provide users with updates and information, plus give access to quick access to common navigation flows. Additionally, it provided a new source of revenue through ability to showcase content-creator-sponsored ads.
Presented here are some of the final screens created for this project alongside original designs and process shots.