01 | How Might We

How might we create a centralised platform for fans of the author H.P. Lovecraft while also being a resource  for new readers being introduced to  his works?

02 | The Solution

The legendary author HP Lovecraft has a literary legacy that continues to influence almost every horror story written since his death. His works, which often included religious cults to ancient evil Gods, have created a cult following of their own.
‍
Needless to say, introduction to the Lovecraft Mythos and the works within it isn’t the easiest thing. Many people have tried and failed to join the storytelling after being overwhelmed by the amount of content.

We set out to create a way to have all Lovecraftian lore compiled in an easy to understand format that could be embraced by long time fans and serve as an introduction for complete newcomers.

03 | The Design process

Over 3 weeks we worked in a set of three weekly sprints to research, ideate, and test the app mockup.
‍
Done remotely, the ideation process took place on Mural, and involved us talking to peers in our program that fit the target demographic of 20 somethings that are interested in Lovecraftian horror, are current fans of H.P. Lovecraft's works, or are interested in becoming a part of this fandom

Wherever possible, we would test using a low fidelity Figma mockup to get feedback on better spacing the information and text through the app.

The way our app looked went through three shifts:

The first was a low fidelity mockup used for mapping out the screens and testing the flow.
‍
The second was a higher fidelity mockup created based on feedback from testing, sort of like our MVP for the project.
‍
The third and final high fidelity mockup was created as a proper UI design that was the look we truly wanted.

04 | Online Whiteboarding

One of the major parts of this project was to get us all used to collaborating with other designers virtually through teams and digital whiteboarding services. We used MURAL through our process for a whole variety of ideation activities.

Online collaboration boards was a god send when going through the ideation phase. Since our team had a 50-50 split between XD and Figma in terms of design tool preferences, MURAL became our go to while we went through activities like 5 Why's where we'd carry over results from our hills activities, and during importance difficulty matrix charting. The matrix was a great way to plan out feasibility in terms of features.

Since we were doing user tests online, we would often come back as a team and use feedback grids to track key feedback and responses we would each get during our testing.

05 | What we MAde

The final mockups were created to cover all the major screens, and were primarily created as a dark mode theme.
‍
We made a conscious decision to switch all large paragraphs of text — the stories and wiki entries — to serif fonts for better readability. Our research on websites hosting Lovecraft's work would often discuss the order and grouping for the beset experience reading as a new reader, something we carried on over to our app design when sectioning off the library.

06 | What we MAde

The first round of mockups were created to cover all the major screens, major user flows, and were primarily created as a dark mode theme.
‍
We made a conscious decision to switch all large paragraphs of text — the stories and wiki entries — to serif fonts for better readability. Our research on websites hosting Lovecraft's work would often discuss the order and grouping for the beset experience reading as a new reader, something we carried on over to our app design when sectioning off the library.
You can view a video of the prototype here:

07 | High Fidelity Screens

While we created the prototype with considerably high fidelity screens, we went back with our user test results and fleshed out the UI some more. For this version I created a design system and edited the screens ensuring the app looked like an actual app that fit in with other established apps.
The following images cover the major sections of the app and their corresponding screen mockups.

01. A collection of all of his work, short stories, poems longer writings; with reading order suggestions for new readers, with annotated versions of all possible text.

02. A Lovecraft wiki, a vital feature to help users navigate their way through the Mythos. Also includes discussions and links to other writers vital to the Cthulhu mythos not related to Lovecraft.

03. A gallery for user content not limited to one specific type of media, allows for sharing of fan works.

04. Community aspects such as forum style message boards and chats.

08 | Looking Back

The retrospectives activity sort of pushed home exactly how well this process really went. Though there were the occasional hiccups with people being missing for certain meetings and us not using class time to the fullest as a result. And we made sure to voice those issues and mark them down, we accepted the shortcomings of our process all the same.
‍
I’m also really glad we ended up with the topic we did, while a bit miffed we didn’t stick with the original design challenge, I’m glad we did something different from the rest of the groups and ended up with a rather unique topic.   The actual process of just picking a topic was an interesting experience with all the ways we kept trying to stay with the cult concept, without picking a space that would step on toes and become problematic. Which was bound to happen by having something based on real world cults with some of these organisations basically being extremely intense religious groups.

tanvi chhabra

KVLT