A Kickstarter Backed Redesign of Obsidian Portal


Op tablet


The world's largest online GM notebook & wiki

Obsidian Portal is the web's largest tabletop roleplaying wiki and management system. In 2013 my company, the Agile League, updated a classic rails-backed application to a modern responsive user dashboard with ajax components. The update was funded in part by a successful Kickstarter campaign, Obsidian Portal Reforged.



Flame dragon

Making an old Wiki new

The old design was based on a simple Rails MVC view/update model. The Agile League was tasked with updating the design and implementing a scalable ajax solution with a dashboard that allows for user user generated custom styles and templates. At the time, phone and tablet views were on the rise, and we wanted to create a mobile and tablet friendly tool for managing a wiki on any device while gaming. The updates performed were also tied to a KickStarter campaign and gave us user input on changes and features to implement.



An Application for Gamers

Obsidian Portal's users are tech savvy fans of tabletop roleplaying games who want something beyond a notebook to manage all aspects of their gaming experience. The users of the site had spent countless hours updating and customizing campaigns and wikis on the older non-responsive version and were very invested in changes and maintaining their experiences. The audience is primarily male(84%), and skewed towards young professionals, with an age range of 24-35 for over 50% of the user base.

Op shirt 2
Op shirt


Researching Roles & Rolls

I was first tasked with a minor logo refresh and marketing illustrations for the ReForged Kickstart. It was great to dust off my screen printing knowledge and illustrate a few promotional shirts. Once the materials were in place for the KickStarter campaign, I shifted focus into UI/UX research.

My first UX task was understanding my user base beyond the analytics data. I needed to understand what I was building for and why. What did Obsidian Portal offer that was better than a physical notebook or a free forum or wiki for tabletop gamers? I found a group of welcoming gamers in a long running Dungeons & Dragons campaign. Since they were all working or in college (our target demographic), it was a large group of eight players who would come and play as their schedules allowed, missing a week here or there, keeping a consistent group of six players at the table. After a few sessions, we set the whole group up with the classic Obsidian Portal and began using it for all campaigns. We played D&D, Savage Worlds, and basic board games, using Obsidian Portal as our main organization tool.

I was able to even run a small campaign to experience all sides of the gaming community. I applied this knowledge to help create a highly customizable dashboard and campaign page designed to work across multiple tabletop systems. We also beta tested new features as we built with Kickstarter backers on a staging server and adjusted designs and features based on feedback in a forum. My test gaming group used these features for game organization and scheduling, which helped with our rotating player roster and increased game time.

Research ongoing (and continuous, as even after the completion of the redesign, I stayed with my gaming group), I shifted focus to front end design and development.

Op marketing

Badges
Player Achievement Badges


Creating a dashboard with a Campaign in mind

Our users had customized gaming campaigns already in place, meaning much of our page structure had to seamlessly transfer to our new design without breaking their wikis.

This was my first time attempting to design a functional dashboard, and early designs leaned heavily on the one dashboard I knew: the WordPress admin. Sections resembled widgets with margins, card views, and drop shadows. The sidebar was collapsible for space, with a fixed admin bar at the top of the page. Once we started building and receiving feedback, we moved to a flat design with no cards based on user feedback. These WP-based concepts were meant to guide the process and conversation, and were adjusted into something much more unique. All core dashboard colors and css is also adjustable by campaign level settings.

Obsidian portal


Op 1
Op 2
Op 3
Op 4
Op 5
Op 6
Op 7
Op 8
Op 9
Op 10


The Dragon is Slayed, but the Campaign Lives On

Short term, the kickstarter and redesign led to an 18% bump in new users, and increased site-wide growth year over year by 10%. The final success came with a sale of Obsidian Portal and all its assets, which was one of the hopeful goals of the KickStarter and redesign: to help raise the awareness and profile of the Obsidian Portal brand.

The Obsidian Portal ReForge was also one of my first opportunities to design and build features in an Agile environment. Using mock ups to drive the user feedback, beta test those designs live then move all design and front0end into a rapid evolving live application with local/staging/production environments, is still a process I use today, though in a much more focused manner.