Overview

This redesign is a personal project meant to bring a new perspective to Dead by Daylight’s pre-existing website. With many leading game companies opting for a more cinematic and interactive design approach on their websites, I wanted to update DBD’s website to reflect some of the emerging design trends in the current gaming industry.

Dead by Daylight is a 1v4 multiplayer horror game developed by Behavior Interactive that features original characters and famous icons from various popular horror franchises. There are four survivors who must try to survive against the killer’s onslaught and ultimately escape to win the match. Meanwhile, the killer tries to stop them at all costs and wins by killing all the survivors.

Throughout this case study, I will explore the current themes within DBD and establish new ones to create a cohesive yet eye-catching website. The contents of this case study mainly highlight UI Design decisions. However, I incorporated some UX research to better understand user needs and preferences.

NOTE: The contents of this case study may not represent Dead by Daylight or Behavior Interactive’s views or plans.

Timeline

5 Days

Team

Solo Project

My Role

UI/UX Designer

tools

Figma, Photoshop



Timeline




The Goal

Establish a consistent horror-filled narrative while simplifying UI to highlight game art and increase overall clarity.
Research

Market Analysis

I began my research by selecting four websites that I thought were either well developed or lacking in certain areas. I pinpointed the pros from two stronger websites and the cons from the other two. My main focus is on what made each website worthwhile to visit and aspects of a website that kept users engaged. I also looked for improvements to ensure that I am able to solve some of them for Dead by Daylight’s main website.


Riot Games - League of Legends

League of Legends is a 5v5 MOBA developed by Riot Games. It grew widely popular after it was released in 2009 and has continued to grow ever since. League of Legends has also solidified its spot in the gaming industry as one of the popular esports games. For this game, I will be specifically looking at which aspects make this website popular.



Key Features
  • Established theme with typography choice and cohesive button and banner designs
  • All banners have limited descriptions making the website more visually appealing
  • Uses animations for a fun and exciting website experience
  • Organized with large graphics that highlight art
  • Clean and minimalistic look


EndNight - The Forest

The Forest is a multiplayer survival horror game that follows the story of a man who has lost his son after their plane crashed onto a mysterious island. Players are tasked with finding their lost son while having to manage food and shelter to survive in the wild. As the story develops, players come to find that they are not alone on the island.



Problems
  • Detailed background image makes the text difficult to read
  • Home and game have separate tabs, which could be confusing
  • Could highlight a variety of different game aspects more
  • Right now the game seems to be only showcasing the survival aspect


Saber Interactive - Evil Dead: The Game

Evil Dead: The Game is an asymmetrical multiplayer horror game developed by Saber Interactive. The game is based on the popular horror franchise, Evil Dead. Thus, much of the gameplay follows the characters and storyline of the movies. As a newer game, Evil Dead’s popularity is expected to grow as the game continues to develop.



Key Features
  • Detailed descriptions, giving players much-needed information where it is needed
  • seamless transitions between segments of information
  • A clear horror theme that is consistent throughout the website
  • Highlights trailer and gameplay


Respawn Entertainment - Apex Legends

Apex Legends is a battle royale shooter game developed by Respawn Entertainment. It was initially released in 2019 but expanded to support more platforms in the years 2021-2022. Players can choose from a variety of heroes to play from and join a team with two other members. The company has recently revealed its mobile version that is coming for players soon in 2022.



Problems
  • Lots of complex visual aspects could be overwhelming for users
  • Does not use videos or anything to highlight gameplay on the homepage
  • Text over complicated backgrounds make it difficult to read
  • Not very engaging for users

Analysis

Current State of Website

After conducting a market analysis, I wanted to pinpoint some of the issues that I felt the current website was facing. I then decided on how the website was to be improved based on my previous research findings.


01 Cluttered & Distracting

There is a lot of text right when users enter the homepage. It may distract the user or make the user feel overwhelmed when browsing the website.


02 Hierarchy of information

Much of the important information, such as recent game updates or relevant news, is hidden below all of this content.


03 Missing Theme

Due to all the different cards and designs that are incorporated into this website, there is a lack of a consistent theme besides the use of red buttons.




ideate

Sketches

Before creating a prototype, I sketched out each screen separately to see how users may want to interact with the website. I mainly focused on four aspects of the website: the homepage, trailer, gameplay, and highlighting the different horror franchise collaborations.




Lo-Fi Prototype

The Basic Framework

I then created lo-fi prototypes while trying to highlight the major improvements I wanted to make to the current website. To counteract the issues that I focused on during my analysis, I designed the lo-fi prototype to prioritize these three solutions:


01 Decluttering

The new prototype opted for a more minimalistic approach by removing all text from the homepage minus the title of the game and the buttons. This way, the art from the game is highlighted rather than the text.


02 Reorganize

Contents on the website are to be reorganized to prioritize giving users the most important information first. The gameplay section is moved lower and the collaborations section is moved up since it is an important marketing aspect of the game.


03 Consistent Theme

New font, colors, and images will be applied to different screens to set a clear horror theme throughout the website.




Mid-Fi Prototype

Visualizing The Website

To better visually understand how different pieces of the redesign were going to fit together, I added on some color and images to create a more refined look. The focus here was to be able to understand visual design problems in the website so I could make changes easier.




Usability Testing

Alterations

I asked users for some feedback on mainly the visual aspect of the website. Then, I made several changes to my initial design to better reflect users' tastes and preferences.



Recondensing The Trailer Feature

I initially intended for the trailer section on the website to be a feature of its own rather than simply a button. However, during testing, users noted that the trailer did not need to have its own space on the website. Rather, it could remain a button to conserve space and allow for a more condensed website that retains the attention of users better.




Shifting from Screens to Banners

Throughout this process, I went through several versions of the horror collab character section on the website. I initially gave it a full screen's worth of space, but it ended up looking empty. To resolve this, I ended up filling up some of the empty space with more background accents to make the page feel more complete. However, this made the page more cluttered and went against my initial decision to take this website towards a minimalistic approach. Finally, I decided to make it into a banner to make it smaller and have it match with another banner that I wanted to add. The way users would click through each character was also changed to make the website more interactive.




Adding A New Feature

With the new changes in changing a screen into a banner, I felt I had to include another banner. The news and updates section was already formatted as a banner within the original website. Thus, I added the new feature and moved it towards the beginning of the website to allow users to quickly access new information.




Hi-Fi Prototype

Finalized Web Design

In the final design, I stitched everything together to be as seamless as possible when transitioning from section to section. I used mist to hide borders because it is a common theme throughout the game and is a relevant part of the gameplay. I excluded the bottom of the website because I decided that the current website design for that section did not need to be changed.

Feel free to check out the final prototype below! ↓

Hi-Fi Prototype

Moving To Mobile

I also decided to include a mobile version of this redesign to see how it would look on a phone. All cards are shrunk and texts are enlarged to account for a smaller screen. The layout has been changed and everything is now center-aligned.

Design System

Core components Of Dead by daylight




Closing Thoughts

Reflecting On The Project

Takeaways

This project was a really fulfilling experience where I was able to learn more about web design and cross-platform compatibility. Specifically, I learned more about designing screens that made users more engaged when interacting with the website and how consistent themes affect the overall quality of the website.


Challenges

I found the most challenging part of this project to be figuring out which layout for screens would work the best. I initially thought that all the screens could be made separately and then stitched together with a transition. However, I realize that the full website looks completely different after putting all the pieces together. It made me rethink my process and I had to constantly combine screens together in order to see what a finalized website would look like.

I also found it difficult to revise the collab character section from the original website. I knew I wanted to head in a minimalistic direction with muted colors to bring a darker aesthetic to the screen. However, I had a hard time trying to put bits and pieces together without having the screen look too empty but also maintaining a minimalist approach.


Next Steps

This redesign will always see improvements in the future. If I were to work on this project longer, I would want to create the full website from top to bottom and design some separate screens that users can click into. The main focus of these new screens would be to continue the theme I had already established and to make the website more interactive for users.

Looking further, I feel that animations and moving parts in the website would take the redesign to the next level. I would like to animate the mist in the background and have some characters move when users hover over them. Overall, I feel these ideas are there to create a fun and more engaging experience for users when entering the website.