A Landing page that Sparks Joy

Dropout.tv contacted me about redesigning their landing page for Dimension 20, a roleplaying show that often has a table of comedians and personalities playing Dnd or other tabletop games. The goal initially was to design something that was fun and narratively driven. A site that was easy for casual people to visit, but had easter eggs and lore for the hardcore fans.

A low fidelity sampler platter

Here the approach was simple, an escalating series of ideas that started with more traditional website builds, going more and more towards a full narrative experience. Dropout being a company comprised of fun and joyful risk takers, they chose the most narrative driven and experimental option.

EXTRA, EXTRA, READ ALL ABOUT IT

One of the big objects initially was, whatever the format, could we provide some site elements that had lore and extras for fans, while being quick to gloss over for newcomers. The original idea was for some sort of book or paper, but once the newspaper was chosen things started to come together quickly. I love writing, so I jumped at the opportunity to work with Dimension 20’s other designer and writer Skye on some additional articles for the paper, (as she had already written the main adventure article.)

Steampunk is funny because aspects of it are taken from wildly different time periods, so looking up early newspaper looks and headers was a blast. I also added a light source to the paper, so the other elements would pop out more, and so it looks like it was being illuminated by a lamp, to work with the other elements that would be added next…

Keep it Secret… Keep it safe fun

One of the other goals was to add secret or extra elements that could be uncovered. I pitched several options, and the team quickly landed on “secret notes that that be uncovered.” Initially this was going to be a lighter, but in an early episode of Cloudward Ho! the gang has to interact with some glowing crystals to solve a puzzle, which was a perfect fit.

Adding density and surface standardS

When creating all these elements, Dropout didn’t have many standards for spacing, density, or mobile behaviors. I worked with developers to make sure all the component behaviors worked on different surfaces correctly and scaled correctly, in case they were to be reused later for future seasons.

Final Page and Communitiy Engagement

The page itself was a success in terms of users, and the community eventually found all the easter eggs that tied into lore based on the first four episodes of this season of Dimension 20, after a user on twitter discovered the easter eggs.