Designing a customer-centered web experience for VR development
before / after
When was it?
June 2021 - July 2021
What did I do?
I was the UX designer on a hybrid marketing, design, and development team at Stradea Design Labs. My responsibilities included: discovery, research synthesis, information architecture, wireframing, and web design
What did I use?
Adobe XD, Photoshop, Premiere, Miro, Wordpress, Elementor
Leading VR development
XpertVR is one of Canada’s leading Virtual Reality (VR) development companies. In fact, they won Clutch’s Top B2B Company award two years in a row — in 2020 and 2021. The company provides a range of services geared toward research and training. These include VR simulation development, data collection, VR hardware sourcing, consulting, and tech support. At project start, XpertVR had three types of users: academic researchers, trainers, and research participants.
Although XpertVR was receiving monthly enquiries for VR projects, they found that the majority of these came from referrals and Clutch reviews. When potential clients contacted the company through their website, their emails often expressed uncertainty about what XpertVR did. Clients didn’t know how the company could address their specific VR needs.
XpertVR hired Stradea Design Labs to redesign the website. Our goals were to identify customer frustrations while onboarding and to understand the individual customer journeys for researchers, trainers, and participants. In the end, we hoped to increase site traffic and engagement by 25-40%.
The redesigned website had a hard launch date of August 14th. This left us with a tight two-month timeline for the entire development cycle. I had to complete all user research, site mapping, and wireframing by July 1st.
The Kickoff Workshop
The first UX meeting with the XpertVR team was essentially a discovery workshop. The goal was to understand the specific problems the company was trying to solve and to align everyone behind a common plan for the web design. Evan and Drew, the company founders, felt that researchers, trainers, and participants were lost when they first came to the site. Email enquiries would often read, “We’re starting to work on a VR project at our school and would like to learn more about your company.”
I asked the team if they could describe the current customer journeys for their three user types. This helped give some initial direction to the problem space and to the user research that would follow. By the end of the meeting, we had a clear goal: to redesign the site so that it would provide a clear path for each user through their respective journey.
A study of the site
With this added focus, I put together a research plan. I wanted to observe the individual customer journeys in action and find out what the users’ frustrations were while onboarding on the site. Some of the core questions included:
- How do customers perceive XpertVR when they first use the site?
- What specific goals do customers have when first using the site? Are there mental models that customers have for the steps they expect to take?
- When going through the site and getting info, do users understand the quality and complexity of the user stories that are being told? Is it coming through clearly in the site or does it only come through user experiences when already working with XpertVR?
Stradea set up Google Analytics on the XpertVR site two months prior to project start, in April 2021. Before jumping into user research, we met with the team to discuss metrics affecting site traffic and user engagement.
Some of the metrics we looked at for user engagement included loading times for desktop and mobile and overall site accessibility. Loading times were quite fast: 0.56 seconds for desktop and 2.74 seconds for mobile. But, AODA compliance was limited, including WCAG contrast issues and missing meta descriptions for some pages. Usability testing would help show these metrics in a more human-centered way.
As for traffic, the website audience was 1276 people in April. Of these, only 417 were return users. We looked at this discrepancy through the lenses of on-page SEO, SERP ranking (placement in search engine results pages), and the overall domain authority score. The SEO was low, 50/100, and there were no SERP rankings. This was definitely impeding site traffic and causing the domain authority score to be lower, although a score of 22 was still decent for a fairly new B2B site.
Who learns with VR?
To begin user research, I sent out a screener survey to several Facebook VR enthusiast groups to find participants for the user interviews. The goal was to find people who had some experience learning with VR products and services. This would help the findings more closely reflect the experience of a potential client interacting with the XpertVR site. The responses below revealed important trends in the prospective participants.
First, the majority were beginners who only tried a couple of VR products or services. I made sure to address this in the user interviews to ensure that the content and site architecture weren’t creating too much cognitive load for users.
Second, the most common entry points for learning about VR were product or service websites and social media. This helped reinforce the customer journey for the research participants, who mostly came to XpertVR from posts on Reddit, the company Facebook page, and Facebook ads.
Interviewing in the VR space
Structuring the user interviews was one of the most challenging parts of the research process. One concern was to make sure that the XpertVR site was accessible to beginners, especially based on the screener findings. At the same time, there were three distinct user types and their corresponding customer journeys that had to be engaging.
With this in mind, I structured the interview into three broad sections:
- Background questions exploring a participant’s experiences, goals, and frustrations while learning with VR
- A contextual inquiry testing the XpertVR site for each of the three user types — researchers, trainers, and participants — in order to see how they interact with the website touchpoint of their customer journey
- Competitor analysis testing overall usability with two sites the XpertVR team identified as direct competitors — Talespin and PixoVR
I tested six participants, with each interview lasting about an hour. You can see a snippet from a usability test below.
In hindsight, I would’ve opted for a larger testing group — 15 participants. For one, usability testing would be more focused for each user type, providing more substantial results. Also, the tests could be shorter, around 30 minutes, alleviating some of the exhaustion participants experienced toward the end of the hour.
Understanding XpertVR through the users
The user interviews provided important insights about overall usability. Comparing the XpertVR site to its competitors, users felt frustrated by large amounts of white space separating sections of content. None of the users scrolled below 50 percent of the homepage content. They also felt overwhelmed by large sections of copy without clear CTA’s to guide them toward the information I asked them to find.
Interestingly, the majority of users were looking for data to validate their decision to do business with XpertVR. They were uncertain about XpertVR’s value when first landing on the homepage and wanted some sort of video or media to explain exactly what the company creates. It was also important for them to see case studies showing XpertVR’s work as well as businesses they’ve partnered with. This showed that it was important to take preventive messaging into account when rewriting some of the website content.
I used all of these findings to create complete customer journey maps, showing the entire path the users took from discovering XpertVR to conversion. For researchers and trainers, there were opportunities to simplify landing page content and reduce cognitive load. For participants, the main opportunity was to give control of the system back to the user in the research portal. All users would benefit from clear value propositions in the copy and prominent CTA’s leading to the services for their particular journey.
Creating the website structure
With the customer journeys defined, I started working on a sitemap that would easily fit the users’ mental models. This was a balancing act with the marketing and branding research that was happening simultaneously. The sitemap had to include branding content for four behavioral profiles — cautious competence, optimistic belonging, cautious engagement, and cautious autonomy — while remaining concise and easy to navigate.
Since users would view the site from left to right, I made the Homepage, Our Story, Meet the Team, and What We Do tabs the first four items, in that order. The homepage had to be a sort of navigation itself, providing clear entry points for the three customer journeys and their corresponding information and services. For the most critical section at the top, above the fold, I started with the branding tagline followed by our story. This would provide “why” messaging early on, inspiring trust in XpertVR.
Visualizing through wireframes
Now that the site map was in place, I could begin to visually arrange all of the content in the customer journeys. I started with the three most important pages which would validate XpertVR for their customers:
- The homepage
- Our story
- A services subpage — VR Training & eLearning
The homepage was the most substantial. I started with the branding tagline and hero image along with a clear CTA to help researchers, trainers, and participants learn what XpertVR did and why. I then created an Our Story section with a clear “learn more” CTA to make it easier to validate XpertVR. These sections were above the hold and would engage users within three seconds of viewing to ensure a lower bounce rate.
The Our Story page followed. It was second in the top nav and a crucial part of the why-based messaging to inspire trust in XpertVR. Like nearly every page on the site, Our Story ended with a contact form to simplify engagement with the XpertVR team and to personalize the experience based on the page content.
The final static page I wireframed was the VR Training & eLearning subpage. This essentially provided a template for the other service pages and ensured that the service was clear, there was validation through selected case studies, and it was easy to get in touch with a team efficiently through a service-specific contact form.
Since dynamic content was a large part of XpertVR’s SEO strategy and overall growth, I finished by making templates for case studies and team members. The company would easily be able to access these in the Wordpress CMS and quickly create modular content.
Ready to launch
Outcomes and lessons
At the time of writing this case study, the site was in the final stages of QA. You’ll be able to see the new XpertVR site here. While it would take several months to see the impact of the redesign, we reached XpertVR’s goals in a deeply user-centered way. For one, we uncovered serious usability issues through contextual and competitor analysis. Now, the layout of content and customer journeys are more efficient. Most importantly, we made sure that the three user types could easily complete the flow to get the information and services they needed. The site matched these users’ mental models more closely than before.
This is all a big win for the users and the XpertVR team, but it was certainly a challenging process. There were some important lessons learned.
Managing user research scope
As I mentioned earlier, conducting a three-part user interview with background questions, contextual analysis, and competitor usability testing created excessive cognitive load. Participants were exhausted by the end of the hour-long interviews. This might have affected the accuracy of the findings. It would’ve been better to have a larger sample size and explore each user type and their journey with a separate group of 3-5 participants.
Balancing user-centered design with content-centered design
A web experience should not only be efficient and accessible but should accommodate the visual and written content within it. It seems straightforward, but it’s challenging when branding and behavioral activations are involved. I had to think quite a bit about copy and its balance with interactive and static UI elements like buttons and images, respectively. Business wouldn’t happen if users didn’t trust the content.
Adapting to and accepting the limitations of visual builders
Visual website builders like Elementor greatly improve workflow but also come with limitations. For instance, it’s not possible to perfectly follow atomic design and assemble composite components that can be globally edited from a main instance. For the blog posts I built, I had to reverse-engineer circular image masking for over 20 images because of a change in design preferences. For next time, it would be best to finalize all high fidelity decisions before any development.
After the site launches, we’ll conduct usability testing to look at general site usability and clarity of the specific customer journeys again. In about three months, we’ll crack open Google Analytics to look at site traffic, SERP, and SEO. I’m excited to see how the improved customer journeys improve understanding of what XpertVR does and lead to more engagement through the site.
Onstage music live-streaming