HORROR VAULT

Handoff Documents

About Horror Vault

#0 IMMERSIVE EXPERIENCE

WELCOME TO THE
HORROR VAULT

PRELUDE TO A DIRE END

PETRIFY

Welcome to our horror website - where scares never end! With a minimalist design and immersive content, you'll easily navigate through bone-chilling stories and unnerving videos that will keep you entertained and terrified. So come on in and get ready for a thrilling ride into the darkest corners of horror!

Duration

16days

Research & Design

8days

Development

Overview

A SIGN OF DEADLY INTENT

ABOUT

We noticed that many interactive websites with immersive experiences fail to meet standard UX principles, making them less user-friendly despite having impressive frontend development.

The Horror Vault is a project created by CrackLabs with the specific aim of providing the best possible frontend development while also maintaining basic Human Interface and UX principles, ensuring a user-friendly and immersive experience.

PEOPLE-FIRST

GOALS

  • Create a people-friendly design.
  • Use progressive disclosure to reduce clutter.
  • Ensure the website is minimal, easy to use, and navigate.
  • Use a dark theme.
  • Provide an interactive and immersive experience
  • Make the website accessible with Voice Over functionality.
  • Establish a good information hierarchy.
  • Design the website to meet the personality themes of Horror, Friendly, Minimal, and Entertaining by using the appropriate Font Style, Sound effects, Animations, transitions, Gifs, Jpegs, Videos, and Design Elements.
  • Conduct user testing to ensure the website is user-friendly.

Design
Process

Research


The research phase focused on identifying existing interactive websites on Awwwards.com and analyzing their user experience. The research revealed that most interactive websites were not user-friendly nor easy to use. These websites had complex navigation, unintuitive user interfaces, and required high cognitive effort from people.

The analysis also showed that people often abandoned these websites due to frustration and the inability to navigate them. Furthermore, users found it challenging to engage with the content due to poor user experience, leading to reduced retention rates.

Based on these findings, it was evident that there was a need for a people-friendly and easy-to-use interactive website.

Ideate


The ideation phase focused on developing design concepts that addressed the shortcomings of existing interactive websites. The goal was to create a website that provided an immersive horror experience while ensuring ease of use and user-friendliness.

To achieve this, the following design concepts were developed:

  • Simple Navigation: The website's navigation would be simple, intuitive, and easy to use. This would ensure users could quickly access the content they were interested in, reducing cognitive effort and frustration.
  • Interactive Elements: The website would incorporate interactive elements, such as animations and sound effects, to enhance the user's horror experience. These elements would be seamlessly integrated into the website's human interface, providing a seamless experience.
  • Responsive Design: The website would have a responsive design, allowing it to adapt to different screen sizes and devices. This would ensure people could access the website on any device, improving accessibility.
  • User Testing: The website would undergo user testing to identify and address any usability issues. This would ensure the website's user experience was optimized, reducing frustration and increasing retention rates.

Sketches & Design


The next step was to create wireframes to visualize the website's layout and structure which were done on paper. The wireframes showed the website's structure, layout, and functionality based on the research findings and aimed to provide a simple and easy-to-use interface for people.

We made sure every screen of the website answered the following questions which will improve how intuitive the website is:

  • Where am I?
  • Where can I go?
  • What will I find when I get there?
  • How do I get there?
  • How do I leave here?

How do I leave here? Figma was the preferred tool for the design of the website. The Horror Vault website's overall design is scary and immersive with a black and red color scheme, clear typography, and easy navigation. The use of sound effects, Gifs, and videos creates a creepy atmosphere for an interactive horror experience. Progressive Disclosure was incorporated during the mobile design of the vault to reduce clutter.

Prototype


The prototype was also designed using Figma.The prototype showed how the website would look and function. It included interactive elements such as buttons, menus, and links. The prototype was tested for usability by a group of users who provided feedback on its design and functionality. The feedback was used to refine the design and improve the user experience.

Development


The development phase of the project involved creating a responsive design that would be accessible on different devices such as desktops, laptops, tablets, and mobile phones. The website was built using HTML, CSS, and JavaScript, and the Bootstrap framework was used to ensure the website was fully responsive. The developer used the latest web development technologies to ensure the website was optimized for speed, accessibility, and search engine optimization (SEO).

The website's interactive features were implemented using JavaScript, which included animations, hover effects, and pop-ups. The animations were used to add visual interest to the website and create a dynamic user experience. The hover effects were used to highlight interactive elements such as buttons and links, and the pop-ups were used to display additional information or content.

Testing and Feedback


To test the website's usability and functionality, we conducted a series of tests that included:

  • Usability Testing: We invited a group of individuals who had different levels of expertise with interactive websites to test the website. Participants were asked to perform specific tasks on the website, and their interactions were recorded.
  • Focus Group: We invited a group of individuals who were interested in horror websites to provide feedback on the website's design, content, and overall experience.

Results: Based on the testing and feedback we received, we found that the website performed well in terms of usability and user-friendliness. Participants were able to navigate the website easily and complete tasks without any difficulties.

Launch & Post-Launch Testing


After several iterations of development and testing, the website was ready to launch. The team ensured that the website was search engine optimized, and all the necessary SEO elements were incorporated into the website's design. The website was launched on a secure hosting platform, and all the necessary security features were implemented.

The post-launch testing phase will involve a survey that will be sent to a sample of users who have interacted with the website.

Design a minimal, easy to navigate and People-Friendly interface.

The overall design of the Horror Vault website is intended to be scary and immersive. The color scheme is black with red accents, with neutral colors of gray and white. The website has a consistent design throughout all pages with easy navigation. The typography is bold and clear, to make it easy for users to read.

The Horror Vault website is designed to provide an immersive and interactive horror experience for people. The black-themed design, as well as the use of sound effects, Gifs, and videos, will help to create a creepy atmosphere. The various sections of the site will offer a variety of horror-themed content, including a hover card quiz-like section named curses, serial-killer facts, scary stories, an unfinished murder mystery, would you rather, and a Spotify playlist for horror music.

Color Palette

01

Primary

#000000

02

Accent

#E5322E

03

Complementary

#215D1F

04

Neutral

#FFFFFF

05

Neutral

#151515

Mockup

Screen, Sketches, & Notes

Typography

The fonts used in this project are

  • SF Pro Display
  • SF Pro Text
  • Great Vibes
  • Melted Monster
  • Bloody
  • YouMurderer BB

Tools

We Shape Our Tools To Shape Us

Meet the Horror Vault Team


Kamil Oseni

UX Researcher, Human Interface & Interaction Designer


A brilliant designer and a wicked genius, CrackLabs lead designer paved the way in creating an immersive and user-friendly project with dynamic interactions, tailored to meet people’s needs. Thanks to his expertise, we delivered a flawless experience that looks great and works even better!


VIEW PORTFOLIO


Victor Ogbonnah

Frontend Developer


Our frontend developer who brought the Horror Vault project to life with exceptional frontend development skills. Thanks to his hard work, we now have a stunning website that exceeds expectations!


VIEW PORTFOLIO


Don-Pedro Kizito

Project Manager


A multi-disciplinary designer and developer, specialized in crafting beautiful, user-friendly interfaces and seamless digital experiences. His expertise in UI/UX design, web development, HTML, CSS, JavaScript, and other modern web technologies allowed him to prioritize productivity and ensure that the project was completed on time.


VIEW PORTFOLIO

Pre-Launch Feedback

Petra Okelola

UI/UX Designer & Content Creator


  • I would love if blood were dripping down the red button. The copy that leads to the case study / about should be more intuitive.
  • The playlist of the day is my favorite section of the website, the design looks so clean
  • The copy that leads to the case study / about should be more intuitive.

Collins

Frontend Developer


  • Love the interactions, especially on the about page where the card shrinks to reveal the handoff documents.
  • I can’t tell if they’re trying to launch a movie premiere or if they’re telling you a story about a horror event.

Michael Fajemilehin

Product Analyst


  • The sound effects are amazing, that’s what attracted me to the site.
  • The layout is also very straight forward and simple to use, each section having its own entertainment. Really great work!

You are a message away from getting the best service ;)

We’re always happy to hear from you! Get in touch with us anytime to work with us. Simply use the form or connect with us on social media, email or by phone.

Email
inquiries@Cracklabs.io

Contact form