@font-face {font-family: 'Urbanist-Regular';src: url('https://www.kevinvittini.com/wp-content/uploads/2024/02/Urbanist-Regular.ttf') format('truetype');}@font-face {font-family: 'Urbanist-Bold';src: url('https://www.kevinvittini.com/wp-content/uploads/2024/02/Urbanist-Bold.ttf') format('truetype');}@font-face {font-family: 'Urbanist-Light';src: url('https://www.kevinvittini.com/wp-content/uploads/2024/02/Urbanist-Light.ttf') format('truetype');}@font-face {font-family: 'Urbanist-SemiBold';src: url('https://www.kevinvittini.com/wp-content/uploads/2024/02/Urbanist-SemiBold.ttf') format('truetype');}@font-face {font-family: 'Honk-Regular';src: url('https://www.kevinvittini.com/wp-content/uploads/2024/02/Honk-Regular.ttf') format('truetype');}

Landing Page Redesign and Chat Feature Creation for XR Sports

Screen-Shot-2022-06-02-at-8.27.50-PM

Overview

XR Sports is a software that provides influencers with a platform where they can interact with their fan base and supporters through gaming and content creation.

As a gaming community platform, their goal in to bring users together to exchange knowledge with one another and use the platform as a touchpoint  for communication when playing video games.

Role: UX Research | UX designer 

Tools: Figma | Miro | Notion

Research methods: User interviews | competitive analysis | Usability testing | Heuristic Review

I conducted a heuristic review to understand the sites usability and user journey.

Process:

The heuristic analysis helped me get acquainted with the current user journey as it pertained to the features that the stakeholders wanted their product to have.

I was also on the lookout for potential painpoints the users might experience to validate during usaility testing.

Finally, I wanted to draw a connection between the stakeholder's vision for the product and the features that were currently available at this stage.

Observations from heuristing review

Screen-Shot-2022-09-15-at-8.37.42-PM

Through a series of interviews we learned that communication in gaming is crucial for an engaging experience.

Process

Based on the preliminary research we were able to identify our users as streamers, theire viewers and casual and competitive gamers.

We interviewed members of the target audience to learn about their digital experiences in the gaming community. 

I, Then, created an affinity map to identify patterns and pain points across all users.

Users' responses  about their gaming experiences

Screen-Shot-2022-09-20-at-4.49.55-PM

Usability testing revealed that users had difficulty navigating the site.

Process

We asked users to complete several tasks while they think out loud. We observed their reactions and behaviors as they explored different components of the site.

Through usability testing we found that users were unable to complete the tasks given to them based on the current user journey. Users were confused and misclicked several times before giving up.

 

Observations from usability testing

Screen-Shot-2022-09-21-at-11.12.16-AM

To make sure we followed a user-centered approach, we created Carlos, who represents the user base of the product.

Screen-Shot-2022-06-18-at-8.40.18-PM

Bio

Needs

Frustrations

Carlos is a 27 year old competitive gamer who lives in San Francisco. Video games have provided a safe space for him to create a community of like-minded people and share his hobby with others.

To be able to communicate with his team effectively; to feel challenged by the tasks in the games he plays; exciting and engaging content to watch and participate in.

Trolls and people who don't take the competition seriously; hopping on different platforms to perform one activity; not getting recognition for his achievements.

Screen-Shot-2022-06-08-at-9.21.03-PM

Understanding the problem and Identifying Solutions.

Challenges 

1. Users do not have access to any communication features while on the site.

2. Design elements and information architecture were inconsistent hence, making navigating the site confusing.


MVP's

1. To create a chat that allows users to interact with each other while on the site.

2. To redesign the landing page with new and existing users in mind.

I looked into different chat features from direct and indirect competitors to learn about industry standards.

Screen-Shot-2022-06-20-at-11.33.41-AM

High fidelity prototype of chat feature

Screen-Shot-2022-06-20-at-12.48.19-PM
Screen-Shot-2022-06-20-at-12.33.22-PM

Process

We decided to look at features that were present across the board on the competitors' sites and were supported by our findings from user interviews.

We user tested at low fidelity prototypes until users were able to successfully complete all the task presented to them.

Results

We ended up with a chat that allows users to create a group chat and an accessible way to join a voice chat.

The chat window is separated by 2 columns: the top one shows each individual contact and the bottom one shows all groupchats that the user is a a part of.

I designed a landing page that offered new and existing users an experience relevant to their needs.

Low fidelity prototypes of the onboarding experience

Process

By showing the Log in/ sign up information on the right side of the screen, existing users can directly access their accounts.

New users curious about the product can click on "learn more" to decide if the product is a good fit for them.

Screen-Shot-2022-06-09-at-11.06.39-AM
Screen-Shot-2022-06-09-at-11.10.49-AM

Pagination

Alows users to navigate back and forth between screens and Informs the users on which page they are on at a given moment. 

Sign Up

The last page of the journey will include a call to action button to sign up which will take users back to the first screen of the landing page.

Screen-Shot-2022-06-09-at-11.22.40-AM

Onboarding Experience User Journey

Next Steps

The main theme that came up throughout this project is communication. Although we had conceptualize a chat feature for the platform, there are many ways to promote a community in an online platform.

We had considered the impact of creating  a feed on this product and we know that next steps would lead to more ways of connecting users.