Designing a landing page for a virtual reality arcade

Ayushmaan Singh

Logo Designer
Web Designer
Product Designer
Figma
Project Brief: The objective was to create a visually appealing landing page while also taking into account it's target audience and product functionality.
Timeline of Project: 7 days

Problem Statement

Design a landing page for a virtual reality arcade games company.

TL; DR Checkout The Final Prototype

Or check the video (I’d recommend playing the prototype)👇
Watch on YouTube
The case study is divided into Act One: Intro, Act Two: Research, and Act Three: Showcase. Feel free to jump to the section that interests you the most.😇

😁 Act One: Intro

Refining The Problem Statement

I approached the brief in two different ways. The first idea was to showcase a VR headset product, while the second idea was to propose a subscription service. Considering the prevalence of gaming companies adopting a subscription model, I decided to go with the latter.
Hence, the final problem statement I decided to focus on was: Designing a landing page for a VR arcade gaming subscription service.
But Who is The Intended Audience?
The intended audience for this landing page is people who already own a VR headset and are passionate about gaming. I aimed to capture their attention by evoking the nostalgia of arcade gaming in this new and futuristic form.
Desired Outcome
Through this landing page, my goal was to pique the curiosity and excitement of the target audience regarding this new product in the gaming world while also prompting them to either try out a game or commit to a paid plan.

🤯 Act Two: Research

My Design Process

For this project, I followed a systematic design process to reach the outcome. The initial iteration took me four days, after which I incorporated feedback and made subsequent iterations.
Incorporating AIDA framework
During the ideation phase, I utilized the AIDA framework, which I learned about in one of our 10k Designers cohort classes. The framework consists of four parts: Attention, Interest, Desire, and Action. If you’re interested in reading more about this framework, then follow this link. This framework played a crucial role in guiding my design decisions. I studied the information architecture of various gaming websites and how they implemented the AIDA framework to lead users toward the desired outcome. Let’s understand how I applied this framework to create a business-generating landing page.
Attention: Captivating hero section with copy that generates curiosity.
Interest: A video trailer showcasing the experience of the service.
Desire: Games showcase. Showcasing games that they enjoyed in their childhood, tapping into the nostalgia of those days.
Action: A free-to-play showcase section that wants the user to initiate a five-hour game trial on popular games.
Research
To gain insights, I conducted secondary research on how other game companies designed their landing pages. I analyzed their structures and content. For example, an observation was that lengthy scrolls were used to display key features, which I thought could be improved.
Competitive Analysis
Competitive Analysis

Key Features of The Product

Based on my research and ideation, I identified several key features to highlight on the landing page:
Low download size: To address the issue of large game file sizes, the focus was on highlighting that the product has a low download size.
Community and Events: A platform where gamers can connect with others who share their interests, play together, and participate in events.
Rewards: Incorporated a rewards section to tap into the nostalgia of traditional arcades. Similar to physical arcades, users can earn tickets that can be exchanged for rewards. This feature enhances retention and competitiveness within the platform.
Play for free: Recognizing that many gamers prefer to try a product before committing, I added a game trial feature. This allows users to play multiple games for 5 hours each, enabling them to decide if they want to subscribe to the service.

Information Architecture

Wireframing

During the wireframing stage, I explored various layouts and adjusted the information architecture accordingly. Here’s a snippet of some of the wireframes.

Branding

Aimed for a retro-futuristic branding aesthetic, combining the nostalgia of arcade games with the futuristic vibe of VR gaming. After several iterations, I finalized the wordmark logo that perfectly captures the intended vibe. I drew inspiration from numerous sources, including Pinterest.

Style Guide

For the style guide, I opted for a dark mode design, considering the preferences of the target audience. The primary green hue draws inspiration from old-school space and army games.

🥰 Act Three: Showcase

Visual Design

In addition to websites, I sought inspiration from various physical products and posters. My mood board consisted of different elements to fuel my creativity
Final Version, or I Thought So...
To arrive at the final version, I underwent over 30 iterations, adjusting layouts, fonts, and other design elements. The most time-consuming aspect was determining the key information to display in each section and clarifying the purpose of each section.

Iterations

After getting this reviewed by a lot of mentors, I worked on the feedback and created iterations for each section.
Section Height: Reduced the height of certain sections that exceeded 800 pixels to ensure they fit within the screen.
Iterations With Copy, Colors, and Microchanges: Adjusted the button colors to meet contrast requirements. Additionally, I made the copy more concise and reduced the font size. The top tag above the hero title was changed to display the number of players online, which serves as a form of social proof.
Pricing Section Revamp: To assist users in making informed decisions regarding pricing plans, more focus was placed on the Basic plan, leveraging price anchoring. In the previous version, the emphasis was spread too evenly across all three plans, and the information hierarchy was flawed.

Final Design and Breakdown

I conducted a thorough breakdown of each section to understand its purpose and how both the business and end-user were considered.
Hero Section: The aim was to capture attention with an enticing and appealing design. The copy is clear and actionable. A video featuring gamers playing and enjoying the service is included to generate curiosity and showcase the gameplay experience.
Videogame Showcase: The highlight here was the abundance of game titles available, catering to a range of interests. By featuring multiple titles from different genres, users can easily identify a game that interests them, thus increasing their engagement.
Free-to-play Showcase: This section provides a low barrier for entry by offering free trials of popular titles. Each title can be played for 5 hours, after which the free trial ends and users are prompted to subscribe to the Basic plan.
Features Section: Positioned midway through the landing page, this visually stunning section showcases the platform’s best features. Its purpose is to recapture the user’s attention and focus their interest.
Pricing Section: The Basic plan is given the most emphasis as it is the most popular and affordable option. A toggle between monthly and annual plans nudges users toward the annual plan by offering a discount. This benefits the business by encouraging long-term commitments
Rewards section: Emphasis on how users can win rewards. By displaying rewards and a leaderboard, users are motivated to engage with the service, creating a sense of possibility and motivating them to try it.
Testimonials Section: Drawing inspiration from trending games, I incorporated testimonials from popular streamers on YouTube and Twitch. Including snippets of these streamers playing the videogame adds legitimacy and encourages users to experience the game themselves.

Let's build together! Get in touch if you want to get something like this made for you

Partner With Ayushmaan
View Services

More Projects by Ayushmaan