VALVE INDEX VR
Landing Page Design
During this project we develop a product landing page for The Valve Corporation’s Valve Index, a high end consumer virtual reality system.
Through a process of research we will understand the product, the consumer and their motives.
The challenge will be to design and code a landing page that will maximize the sales conversion rate with consideration of a user sales funnel.
My Role
UX Research | UX Writing | UI Design
Timeline
3 Weeks
Solution
Campaign with landing page sales funnel that emphasizes the superior capabilities of the Valve Index in comparison to its competitors.
PROJECT OVERVIEW
Team
Tools
Figma | Github | HTML | CSS | Bootstrap | VS Code
Problem
Our landing page for the Valve Index needs to stand out amongst more affordable competitors in a very niche space.
2 UX/UI Designers
DESIGN PROCESS
DISCOVER
Competitive Analysis
User Interviews
Affinity Diagram
DEFINE
Insight
Challenge
Hypothesis
IDEATE
Inspiration
Sales Funnel
Style Guide
DESIGN
Prototyping
User Testing
Final Product
DISCOVER
Competitive Analysis | User Interviews | Affinity Diagram
Objectives
Competitive Analysis
Engages user with interactive elements.
All imagery is relevant to its reference.
Compares competitor specs.
Displays valid social proof (Awards and Specs).
Makes “buy now” available at all times.
Displays compatible apps and games
Identify the specific considerations people make when making large tech purchases and how they research.
Explore the software and apps consumers want/expect from a VR experience.
Learn the motivating factors behind current and potential VR users involvement in the VR space.
We began by analyzing three competing brands in the VR space. The most impactful web impressions were made by showing visually engaging/interactive imagery, and showed easily digestible system specs.
User Interviews
We sent out a survey that received 19 responses, and interviewed 5 people. Our survey was used to narrow down the demographic of people would be interested in the niche VR space. We found that many people would not in most circumstances be interested in making an at home VR system purchase, but those who would were highly interested in video games and the wider tech world. We tailored our interviews to target what motivates those people in choosing tech products and gaming systems.
We asked… “What influences you the most when making game console/tech purchases”.
When making large tech purchases people typically focus on price relative to device quality and hardware specifications. We found that a large price tag can be scary, but people who understand the tech space will spend more if they find the product can deliver more than the competitors.
While researching tech people are often more trusting of unbiased resources for product reviews and don’t at all trust cherry picked reviews. They understand that a lot of research is required and seek out tables and find side-by-side product comparisons very useful and time efficient.
VR is a niche space and those who get in are typically gamers and tech folk. Some people “just don’t get it”, but for those who do, game variety and machine capability are extremely important.
Affinity Diagram
When we compiled our findings into an affinity diagram, we were able to decipher that most users were gamers who do a great deal of research to get the best quality for the price when it comes to tech purchases. When making these decisions regarding gaming systems, and specifically VR systems, there was a few common threads amongst all our interviewees.
Users care about:
DEFINE
Insight
If a user is going to make a VR system purchase, that system needs to be highly capable and offer the types of games and apps that they are specifically interested in.
Challenge
The Valve Index is amongst the higher end of VR systems and that comes with a higher price tag. How do we highlight this system in a way that appeals to our user demographic?
Hypothesis
If we can showcase the Valve Index as the cutting edge in VR technology and emphasize its capabilities and game varieties, we can increase the systems overall sales.
IDEATE
Inspiration | Sales Funnel | Style Guide
INSPIRATION
The visual style should sleek and high tech. The existing brand does this by using futuristic imagery alongside a futuristic neon color palette.
We loved the use of movement to engage the user and create the feeling of “revealing something new”. The bold text to delivers straight forward messaging that is clear and easily digestible.
SALES FUNNEL
Because the final product will be a single landing page, our approach involves conceptualizing a sales funnel structure that weaves together our insights, challenges, and hypotheses, resulting in an actionable marketing strategy.
The funnel will emphasize movement with our visuals that are simultaneously engaging and informative. All text should be concise and to the point.
We will build interest by showing gameplay, which will also serve to feature a variety of high interest games and genres.
We will create an informative and easily comprehensible table comparing the detailed specs our users care most about. We will allow interested users to open more details about specifics if they are curious bolstering a trustworthy reputation by offering complete product transparency.
There will be a sticky “Buy Now” button which allows the user to make a purchase at any moment.
Easy Comparisons
Use easy comparison methods to compare against competitors while highlighting what sets us apart.
Offer a “Full Specs” page for tech buff who may want specific product capabilities.
Detailed Specs
Use Compelling visuals that serve to stimulate product interest while also informing function.
Engaging Visuals
Show that the product has garnered awards. “We aren’t the only ones who think this product is great”.
Social Proof
Keep written definitions short and to the point to avoid disengagement.
STYLE GUIDE
We chose a single font that resembles the existing branding that Steam built to be a mainstay for their already very established image. Poppins was a good choice for this.
A mixed weight headline font was used to mirror the Valve Index logo, carrying over a consistent feel.
The writing style should always emote a feeling of cutting edge technology and bolster the image that the Valve exceeds in it’s technological capabilities.
Concise Text
DESIGN
Prototyping | User Testing | Final Design
Prototyping
“I like that there I can compare with systems, but what if i want more specific info?”
Besides a series of direct user testing we also ran a supplementary online survey to cast a wider collection of data. We found that the above findings were supported by our survey results. In addition to this we had many comments stating that we did not do a good job of demonstrating what types of games and apps could be accessed with this system.
The feedback we received prompted us to make the following changes:
Add a more visually engaging background image.
The design process concluded with the creation of a high-fidelity prototype in Figma.
This was followed by the development of a functional landing page using HTML, CSS, Bootstrap, Visual Studio Code, and GitHub.
User Testing
After testing we learned that we needed to change a a lot of visual elements. The design coherence and overall aesthetics needed to be improved.
“The organization in this section is off putting and disrupts the visual flow”
“The red and green color combination feels a lot like Christmas colors”
Break up headers and sub headers with images and other visual content.
Reorganize imagery and apply consistent padding and spacing sitewide.
Change the color palette to reflect a more appropriate feeling.
Add a section that showcases video of a variety of popular games and genres.
Add a full system spec sheet accessible by pressing a button.
Final Design
Conclusion
Given more time and resources we would explore implement the following ideas:
Build a more in depth specs table that expands with tab
Gather and create higher quality images and video.
Create more interactive and “hover over” effect elements.
We began the design process by sketching the basic layout of our lading page and converting that to a Lo-Fi digital wireframe.
Once we had a skeleton built we were able to apply our style system. Our Mid-Fi mockup gave a more complete impression of how the end result might look and feel.
From there we were able to engage with users and gather feedback on how we might improve our next iterations.
“A black background here feels empty and boring”
“This text is really dense and it feels a bit crammed in”