Preciser: Sports Analytics

Team: 2 UI/UX designers, 2 Developers, 1 Data Scientist

My Role: Sr. UX Designer

Duration: 6 months

Tools: Figma, VUE.js

🔮 Project Overview

Preciser is an early stage startup and provides high accuracy data analytics for Fantasy Sports players. Fantasy Sports is a growing market and is projected to have 500 million users by the end of 2030. Currently, there are over 80 million people who play Fantasy sports but there is no tool in the market that provides game data that is fully functional. Of those 80 million active users, only 20% of players report they know how to use the data correctly. As an early hire, I was actively involving in UX research to define user persona, problem areas, and pain points, and laid down the design foundation as well as built a design system for the team to ensure design consistency throughout the platform. I was responsible for overseeing the end-to-end product design process and communicating the voice of the brand to the end user. How can we stand out from the competitors and improve the user experience?

✨Analytics

The industry standard for sports betting platforms is that the users spend 7 minutes a day on average on the platforms. We want to increase this number by introducing community so the players can connect with each other and share information as well as form private and public leagues to enjoy their game.

During the initial survey round, we were able to define user archetype for Preciser. A common customer archetype is made up of:

  • 80% male,

  • 50% between the age of 18 and 34

  • 67% are employed full-time

  • 47% make more than $75,000

  • 78% play fantasy baseball

  • 34% play fantasy basketball(NBA)

  • 19% play fantasy baseball

Problem Area

We live in a world with an overwhelming amount of data. With the right usage, the data can be very helpful, but not many people know how to use the data we have available. One of the biggest problems for Fantasy sports players is that there is no real analytics tool out there they can use to help understand the game data. The analytics tools that are available are difficult to use because they often do not provide any context for the user to understand the data, and are not beginner friendly.

Pain Point

Current analytics tools focus on providing numbers like Excel sheet where, unless the user is already familiar with the layout of the site and understands exactly what to look for, looking for a valuable data set becomes very difficult. One area we are going to focus on is the data visualization. In order to present the data in a more beginner-friendly, human centric way, it is important to move away from a huge list of numbers and design a data visualization graphs that are cohesive, easy to understand, and intuitive. We are achieving that by using color coding, selecting the information and data that actually matter to the user’s decision making process, and giving the full control of the data and how it’s presented back to the users.

Data Visualization

Data visualization will be the key factor that distinguishes Preciser from its competitors by organizing and presenting data in a way that is scannable. I worked closely with the Data Scientist to understand the raw data that we have and turn it into a visually cohesive graph.

So we took data that looks like the images on the left and organized them visually to present the same data to look like the images on the right to help the viewer digest the information better.

Now that we have the type of data that we like to present, we had to figure out information architecture and work on how people will use the platform and find analytics.


Information Architecture

First, we worked on mapping out the user workflow when they enter the platform as a new user.

Second, we worked on the actual layout of the website like nav bar, sub nav bar, and the subsequent pages.

We also worked out a flow for the filter options to help the users manipulate the graphs for the most optimal results.

Design Process

My Approach

With the information architecture and the user workflow clearly defined, and the type of data we are using for analytics, it was time to start designing. Putting in the work up front to figure out the overall mapping of the site made it much clear for the team to understand the direction of the design from the start. We got the branding material from Marketing, and based on the material, I decided that we will be using the orange color as the primary to communicate with the user how Preciser is beginner friendly, cheerful, and inviting, while also incorporating the light blue green to instill credibility.

At the same time, I also got together with the development team and brainstormed the overall structure for the landing page as well as some of the key features the company wants to highlight. Determining the key features to push and showcase also helped fine tune the information architecture.

The team got together during design workshop to hash out the design process, key features, and page layouts.

Here is the branding material from Marketing.

Mobile First Approach

For the initial design phase, I implemented mobile-first approach to ensure responsive layout as well as put down the groundwork for a native app development in the future.

Landing Page

For the landing page, I also recommended that we focus on single CTA on the landing page to increase the conversion rate because when the user sees too many features and distractions, they are less likely to complete the most important task: SIGN UP. Once the user signs up using their email address, they can then decide which payment plan is the right option for them as well as browse and test the platform.

The stakeholders also had copies written out for the landing page. I rewrote some of the copies to make the message more clear, concise, and to the point.

Desktop Design

Final Thought

The beta is live now and is finally launching in August and the team will have to begin testing the product to tweak the details. It was a very rewarding and exciting project for me as this was the first time I led the end-to-end product design process from UX research, defining user persona, market research to mapping out information architecture, ideating wireframes and a live beta site. Wishing them the best success moving forward and very grateful to have met and worked with some of the most talented individuals I came across.

Previous
Previous

Gearfire Capital x Acqualify Workflow Revamp

Next
Next

BridgeCare Landing Page