Problem

Create a cloud organization product to meet the needs of a yet-identified user base. The app must allow users to:

Upload content

Organize that content into categories

Create networks

Share content with networks

Solution

Bag of Sharing is aimed at helping pen-and-paper roleplaying gamers have a better gaming experience. It focuses on file sharing and team creation/management. Now pen-and-paper gamers can:

Send files selectively.

Share files instantly.

Organize files into folders.

Process

Competitive Analysis

Read competitive analysis

Few tools exist to help tabletop Role Playing Gamers and their teams realize greater storytelling. Tools like Role20 focus on visual information and delight, providing maps and animations. Other tools, like D&D Beyond, are proprietary and only work with one game system out of thousands.
Google Drive and Dropbox provide much of the functionality that roleplaying gamers are looking for, but each has drawbacks. Both are geared toward business. Dropbox’s collaborative space comes at a high monthly premium. Google Drive team management is not intuitive and difficult to navigate. Leisure-focused platforms, like Pinterest, are a community favorite but are mostly utilized for aesthetic inspiration out of gameplay.

User Surveys

View the original survey

A user survey was sent out to identify users’ current cloud storage needs, and use types. Most people use Google and Dropbox for the vast majority of situations. Pinterest was a popular hobby and leisure tool. As the competitive analysis suggested, people made do with the tools at their disposal, but none were optimized for file sharing in a pen-and-paper RPG environment.
Follow up interviews were conducted, and users who play pen-and-paper RPGs were asked about the features and characteristics they desire from a cloud collaboration app. File sharing and intuitive team building/interacting were the highest priority features.

Personas

View the personas

Tabletop roleplaying games are perhaps more popular than ever. Shows like Community, Stranger Things, Harmonquest, and Rick and Morty have brought RPGs into nearly every household. Podcasts, Twitch Streams, and Youtube channels are devoted to RPG play and culture. More people are playing than ever.
Two personas were developed based on user surveys and interviews. Khara is a college student, strapped for cash, and obsessed with pen and paper gaming. She needs callaboration tools that are portable, as she often catches the bus to games. Hari is now a full-time RPG gamer who runs an actual play podcast network. He needs powerful file sharing that can help him devote more time to creating captivating audio entertainment.

User Stories

View the stories

Market research, user surveys, and personas all honed in on specific user needs. To give these more focus, I developed a set of user stories that stated user desires and then prioritized them. This exercise yielded the essential functions Bag of Sharing needed for a successful Minimum Viable Product. Referring back to these stories was essential for avoiding scope creep (especially with various tabletop roleplaying gamers consulting on what would be “cool” throughout the process).



User Flows

View the user flows

I developed various user flows. Some were very complex. Some were less complex. Ultimately, whether from the start or from user testing, I found that the less complex the user flow, the easier time the user had learning and using the app (an important lesson learned from Devo’s Freedom of Choice).

Wireframes

User flows made clear exactly what users will do to complete tasks with Bag of Sharing. Wireframing explored many different versions of how users will do those things to complete those tasks. Configurations explored include:

All actions at the top of a dashboard, which organizes content into 5 categories

All actions, including search and menu, moved to a bottom navbar

All actions moved to a bottom Floating Action Button, with a standard search placement

Original dashboard

Updated bottom nav

Search with tabs

Bottom nav & tabs

Branding

View the style guide

Brand Name

I wanted Bag of Sharing to reflect the diversity I have seen in my own games. The tabletop RPG community has been traditionally conceived of as a refuge for the other. I wanted to celebrate that history of inclusivity, especially as the gaming community, at large, deals with a toxic history. I also wanted to emphasize the collaborative and creative aspects of Bag of Sharing.
I generated a list of terms from the vast lexicon of RPGdom. Eschewing the narrow medieval fantasy imagery evoked by one style of RPG, I wanted to nod to the community without penning it in. There is a common trope in these games where a member of a team suddenly has an item from the collective inventory. It doesn’t make sense, and shouldn’t have happened. It’s called the bag of sharing. It’s implausible, magical, and incredibly helpful, just like the app.



Logo

Again, calling to the RPG community at large was the goal. I chose a familiar form, the 20 sided die, and deconstructed it. Emphasizing a single face, comprised of an equilateral triangle, the logo expands out along the lines of the flattened triangles around it. The logo evokes a sense of infinite possible triangles, a nod to the collaborative and creative elements of tabletop RPGs.

Color Palette & Typeface

Bag of Sharing is vibrant and active, like the community it celebrates. I chose a palette of highly saturated tones, supported by understated tints and shades. The main colors are the complimentary teal and watermelon tones, which are used in large bold planes when possible. These are assisted by another complementary set of bold colors for accents.
Rubik is stark. It is reminiscent of 20th-century Grotesque typefaces, and evokes a print feel. At the same time, the slightly rounded corners soften Rubik and invite readers to stick around.

Mockups & Testing

Mockups

Branding guidelines provided the framework to build high fidelity mockups. During this phase I didn’t just apply a color palette to wireframes. User feedback and iterative exploration led to different solutions, including cleaning up navigation and utilizing user-friendly CTAs and snackbars

Early Mockup with bottom nav

Early confirmation with reversal action

Simplified navigation

User-friendly snackbar

Testing

User feedback included preference tests through Usability Hub, in-person and email interviews, and, perhaps most importantly, user testing the prototype. The feedback from these tests was essential to refining the interface and creating a quality user experience. Improvements discovered through user testing include:
Simplifying to a floating action button
Moving account settings to remove otherwise useless hamburger menu
Using snackbar notifications that an action is complete, and including a prominent reversal CTA.

Conclusion

Summary & Beyond

Bag of Sharing meets a basic need of the pen-and-paper roleplaying gamers, by providing portable storage, organization, and collaboration. A collaboration tool adapted to any game system is highly anticipated by the community. But these features are only the beginning
Concepts for features of upcoming releases include:
Native file types like character sheets.
Initiative trackers (to keep track of whose turn it is in a fight, for example.)
Split-screen/ screen-in-screen A/V conferencing for remote games
Social platform for finding people to form games, find user-created content and have others follow your games

Meta-Conclusion

I have so many takeaways from this incredibly enriching project. I learned a deep appreciation for Google Material Design Guidelines and the research that led to them. I also learned that obsessing over a particular layout may lead you to ignore what your users need. If it weren’t for testing, I would probably never have faced the fact that my preoccupation with bottom navigation was ignoring user tendencies. I also learned, through interviews with tabletop roleplaying gamers, that the community is even more enthusiastic than I had ever imagined.

Back to top

Connect with me

I am open to new freelance projects and full-time opportunities in UX design and responsive web development.