First to Market Action Sports Betting

1. Stakeholder Interviews

I began the project by consulting with four key stakeholders to understand their unique visions and objectives. This ensured that our direction was aligned from the outset.

Initially, my objectives were:

1. Conduct market research, for which the stakeholders provided some examples.
2. Interview potential users to gather insights.
3. Work on the Information Architecture (IA) to establish a solid foundation for navigation.
4. Develop user task flows to understand user journeys.
5. Begin crafting wireframes to visualize the user interface.

2.  Industry Analysis

Considering the absence of direct competitors in the action sports betting niche, I examined three prominent websites in the broader sports betting industry - Barstool Sports, Action Network, and Dimers. This analysis allowed me to understand the market dynamics and gather design inspiration. The insights gained from their user interface designs, content presentations, and features significantly influenced our own ideation and design process.

3. Discovery User Interviews

During the discovery phase, I conducted in-depth interviews with five individuals who bet on main stream sports and have a strong interest in betting on action sports. These exploratory conversations aimed to dive into their unique experiences, betting preferences, and how they typically gather their information. By actively listening and analyzing their shared insights, I was able to identify common trends and patterns. These observations subsequently shaped our understanding of user expectations and needs, thus playing a vital role in our design decision-making process.

4. Design Challenge

Our design challenge was to seamlessly translate the vibrant, knowledgeable brand personality into an engaging and intuitive user interface that captivates our target audience. Additionally, we aimed to deliver comprehensive event information, how-tos, and sports statistics in a visually appealing format that is easily digestible for our users.

I was onboarded on January 17th with an initial goal to launch the MVP by February 19th. However, soon after beginning, the deadline was moved up to February 2nd. Thankfully, the site was built using Elementor and WordPress, allowing me to take an active role in development. Given our developer was based in India, we faced time constraints, but it was essential for us to iterate swiftly.

5. Flow Diagram

To showcase all the crucial features, I created a simple flow diagram highlighting the primary tasks a user can execute. Below is an example of one such primary user flow.

6. Problem Statement

How can we design an intuitive and engaging platform for NXTbets.com that appeals to action sports enthusiasts and strengthens the connection between fans and athletes in the betting landscape?

7. Low Fidelity Mock Up

As the first concrete visualization of our platform, I started by creating low-fidelity wireframes using Figma. This phase was crucial to map out the primary user flows and to lay the foundational structure of our interface. The aim was to align the basic functionality and layout with the needs of our users and the business goals, before committing resources to high-fidelity designs and development. This early visualization helped us to iterate quickly and validate our ideas with minimal risk, laying the groundwork for a user-friendly betting platform.

View Low Fidelity Screens here: Figma

8. Prototype

I then created a low-fidelity wireframe Figma file to strategically map out user flows, forming an agile foundation for the platform. The next step was to create a quick prototype to test and get some swift validation, ensuring alignment with the stakeholders visions and user needs.

View Prototype: Figma

9. Styleguide

After finishing the basic design and simple screens, I made a style guide. This guide made sure our website looked consistent and matched our brand's feel. It helped make the design process smoother and made sure our brand's look and the user's experience worked well together.

View Entire Styleguide here: Figma

10. High Fidelity

Once the initial wireframes received approval, I proceeded to develop high-resolution versions of the user interface (UI) that enhanced the visual aesthetics. Given our project's focus on mobile-first design, a significant portion of the layout direction revolved around prioritizing the mobile experience. This approach ensured that the design and layout elements were optimized for mobile devices, aligning with our goal of creating a seamless and engaging mobile user experience.

View High Fidelity Screens here: Figma

11. Prompt Engineering

Taking advantage of the growing popularity of GPT and Midjourney, I seized the opportunity to create valuable assets for our startup. Since we needed to be mindful of our budget, this allowed us to establish a sense of direction and aesthetics.

Many of the images in the style guide were generated using prompt engineering, which not only aided in shaping the brand's creative direction but also ensured cost-effective asset development.

12. User Validation Interviews

I conducted 3 remote usability tests to ensure that the MVP would meet their expectations. The usability tests involved tasks that would be typical of a user journey on NXTbets.com and observing their interactions with the platform. This process helped identify areas that were confusing or difficult for users.

What I Learned:

• Users needed an easier way to find promo buttons
• Promos should be easy to understand
• There should be a conscious effort to use twitter to share betting information

What needs to be fixed

• Promo offers need to be updated with ease internally
• Promo offers need to be easily found on the site
• Unbounce landing pages need to be streamlined

Working on

• Building new promo offers widget with a developer
• Replacing unbounce landing pages with our own versions
• Streamlining content development system internally

13. MVP Live and Direct

We started with a handful of ideas we threw around in a brainstorming session. Then, it was up to me to take those big thoughts and turn them into something you could actually see and feel. So, I started sketching the wireframes, making our product a real, tangible thing. Then we started testing. I've gotta tell you, watching our prototype perform felt a little nerve-wracking. But, it was crucial. It showed us what was working and what needed some extra work.

While doing all of this, we also started created some really useful landing pages. They had everything from events to how-to guides. It was gratifying, seeing everything fit together like puzzle pieces. And I learned a ton. Every prototype test gave me more insight. With each design iteration, we were improving and learning from what we found.

One of the best parts? Definitely the feedback we got from the early users. They helped guide us, showing us where we needed to refine or add more. As we made these changes, the MVP began to grow and adapt. The great part was that it started to match what our users were looking for. And that's what it's all about for me: building something our users will genuinely love.

Reflections

What was the biggest problem I identified?

The main problem I identified revolved around the limitations posed by the development constraints. Specifically, due to these limitations, stand-alone stats/data pages couldn't be effectively implemented using WordPress Elementor in conjunction with the API .json data file tables.

This obstacle hindered the seamless integration of essential statistical and data-driven content within the platform. We've worked around it to make it work however we're working on improving the code so they play nice.

What were the biggest areas the stakeholders reacted to?

The stakeholders' most significant reaction was when I assumed the responsibility of website development. This decision enabled us to iterate rapidly and make substantial progress.

Initially, the stakeholders were not inclined to conduct interviews during the project's early stages. However, I emphasized the importance of user insights, and they eventually agreed. These interviews proved to be highly beneficial for UI development and were poised to contribute to the achievement of the business's objectives.

Next Steps

The future focus is on refining the platform based on user feedback, enhancing data presentation, and broadening the content strategy. The goal is to evolve NXTbets.com into an even more powerful V2 in the upcoming months.