linkedin icon

FALLEN
LONDON

Check it out here:

PROTOTYPE

Type:

Individual Project

Role:

Wireframing, Ideation, UX Research

Tools:

Adobe Illustrator, Figma

Duration:

2 days

Fallen London is an text-based browser roleplaying game with an avid online following. Players like me enjoy engaging in text-based roleplays featuring our characters engaging in hijinx. I decided it would be fun to imagine social media integration for the game for roleplay purposes. This would be a spiffy opportunity to study social media for UX insights.

Studying Social Media Plaforms

Twitter

Twitter's trends stuck out to me for its potential to get eyes on relavent content. I decided to make them into relavent events. I also took notice of how the content was structured.

Linkedin

I appreciated how Linkedin displayed user information. The dots on the profile denoting the availability of the user was a good way to denote player coordination for setting up roleplay sessions. In partuclar, their chat window was a good way to get players to communicate with each other.

Discord

Discord's users are represented in a interesting way. They are stacked together to the left and have statuses that indicate action. For this feature integration, it would be important to know what players are available for roleplay, so I reasoned that the user ought to be able to see their friends at any given moment.

Wireframing

Quick sketch

This part was a blast! I came up with a bunch of ideas on how to structure content, but I wanted this project to be something achievable with relatively low cost. My friends who play the game got a kick out of my project and offered a bunch of fun and interesting ideas like codenames and spygames where players would do research on other player profiles and create faux profiles to achieve their ends. At the end I settled for something that looked recognizable as a social media platform like Reddit.

Wireframes

The content began to solidify in the grey scale wireframes. The socia media gambit paid off and the website looked perfectly believable in terms of the structure of content.

These wireframes laid down the perfect ground work to the high fidelity prototype.

Reflection

I showed off my prototypes to Fallen London fans in various social media communities. Many people were of the opinion that Fallen London deserved to have some sort of social media feature and this was a good direction towards it. This project was a fun excuse to check out UX trends in various social media and I had a really good time making it.

If you are interested in the project, check out the high-fidelity wireframe.

Projects

AMVETS

Designed the checkout for a veteran charity's donation page

Ridge Meadows
Chamber of Commerce

Redesigned the website and prototyped the map feature

CybersnakeX

Designed UI elements as well as participated in UX for combat system

Tavern Buddies

Directed the creation of a mobile app that connected Dungeons & Dragon players

Gotchi

A speculative UX project with the purpose of helping users manage electronic waste via a cute accessory

Vancouver Tool Library

Redesigning website and improving self-checkout to reduce work load on staff

Tough Titties

An award-winning redesign for a breast cancer awareness brand