Kickstox

Kickstox is a digital platform that combines elements of fantasy sports and stock trading. It allows users to buy and sell virtual shares of football players based on their real-life performances and market demand. 

Users can build and manage portfolios of player shares, competing with others to achieve the highest returns.

PM2024_UxUi_Mockup_2Devices_Kickstox

Kickstox was dissatisfied with the progress and outcomes of the platform development.

The user interface and user experience design were deemed inadequate. Feedback from users highlighted difficulties in navigation, an unattractive visual design, and a lack of intuitive interactions. These issues collectively contributed to a poor user experience, further exacerbating low engagement levels.

The platform lacked scalability, making it challenging to introduce new features, functionalities, and dynamic content effectively.

Developing and conceptualizing innovative game design ideas that enhance user engagement.

Crafting intuitive and engaging user interfaces and experiences that make gameplay seamless and enjoyable.

Creating visually appealing graphics and elements that align with the football universe and enhance the overall aesthetic of the platform.

Designing a compelling and effective landing page that attract new users, effectively communicate the platform’s value, and drive conversions.

Problem

Kickstox was dissatisfied with the progress and outcomes of the platform development.

The user interface and user experience design were deemed inadequate. Feedback from users highlighted difficulties in navigation, an unattractive visual design, and a lack of intuitive interactions. These issues collectively contributed to a poor user experience, further exacerbating low engagement levels.

The platform lacked scalability, making it challenging to introduce new features, functionalities, and dynamic content effectively.

Solution

Developing and conceptualizing innovative game design ideas that enhance user engagement.

Crafting intuitive and engaging user interfaces and experiences that make gameplay seamless and enjoyable.

Creating visually appealing graphics and elements that align with the football universe and enhance the overall aesthetic of the platform.

Designing a compelling and effective landing page that attract new users, effectively communicate the platform’s value, and drive conversions.

My Role

Scope

24-month capstone project 

PM2020_UI_Kickstox_3Devices

The Process

Research

Aside with all information, expectations and requests received from the client, I ran an actionable analytics over the existing beta version deployed.

This helped me to identify several UI/UX issues and pain points to be considered for the design and UX improvements.

In parallel, I received some valuable feedback – from Kickstox team – about beta users and their experience with the game.

I did a benchmarking to get inspired and see what competitors were doing and how they solved similar issues for their users.

Mood boards were created to provide design with more cues and help defining the style, voice, direction and language of the new Kickstox interface.

Coupled with a few sessions with the client we gathered all required information to start crafting the user experience and the user interface for the new Kickstox game.

Build User Persona

With the first data from beta users, their needs and expectations, the following step was to summarize those users into user personas to create a reliable and realistic representation of Kickstox key audience segments for reference. 

User Stories & Site Map

A simplified but comprehensive description of all requirements was done through the creation of user stories describing the type of user, what they want and what they see.

Those user stories were a lightweight method for quickly capturing the “who”, “what” and “why” of the game requirements and interface.

Sitemaps were created to better understand how pages were prioritized, linked and labeled.

Generate Ideas

We organized a few sessions with the Kickstox team to share our findings from research, listen and debate new ideas and constrains.

Once we had an approximated vision of the future game, logic, user portraits, and the environment and devices involved it was time to start sketching (low fidelity) wireframes to help visualizing things.

Wireframing

The wireframes included the most basic content and visuals and together with the user stories, helped to map out the shell of the new interface, its screens and basic information architecture.

With those wireframes, we were also able to identify additional improvements and user interactions.

Processes and team work flow was defined, organized in sprints, and we used collaborative tools like Slack and Trello to create, assign and manage tasks and resources.

I worked very closely with the PO and Dev team to get their feedback from business and technical perspective, streamline processes and speed up the design deliver.

Design System

Concurrently with crafting the initial high-fidelity mockups in Sketch, I initiated the creation and development of a rule-based Design System.

This Design System was designed to underpin various elements such as branding, typography, web components, icons, and colors, with the overarching aim of establishing visual uniformity in alignment with the Kickstox style.

Moreover, this Design System played a pivotal role in offering comprehensive design guidance and direction to both the design and engineering teams.

This versatile Design System subsequently formed the foundation for the entire game’s user interface, extending its influence to all ensuing marketing collateral, including landing page, emails, presentations, displays, and social media materials.

Incremental Design

Instead of work on the design and development of a fully-featured solution before its launch, a minimum viable product (MVP) was defined for the pilot game launch and we used an incremental design approach strategy.

This incremental vision allowed us to deliver the output, in our case designs, in small increments for fast implementation, while making improvements in the global solution.

The Platform

Visual Design

I crafted high-fidelity mockups for every screen, outlining the definitive theme, specifications, design patterns, and supplying all the requisite guidelines and assets essential for the seamless implementation of the frontend, executed in React JS and SaaS

Implementation

With the active involvement of both backend and frontend teams from the project’s early stages, they were able to commence implementation even as the Visual Design phase was ongoing.

The backend team took the lead in constructing all the essential backend functionalities, subsequently integrating them seamlessly with the UI once they had access to the design artifacts and assets, all in adherence to the roadmap and workflow defined for the Minimum Viable Product (MVP).

This approach enabled us to swiftly introduce a pilot version of the game, facilitating its launch, testing, and the collection of invaluable user feedback.

Beyond merely seeking input, users played a pivotal role in influencing our design decisions, with their feedback on the MVP version proving instrumental in providing insights and enhancements.

Furthermore, their feedback guided the strategic direction for new features and future developments.

This approach enabled us to swiftly introduce a pilot version of the game, facilitating its launch, testing, and the collection of invaluable user feedback.

Beyond merely seeking input, users played a pivotal role in influencing our design decisions, with their feedback on the MVP version proving instrumental in providing insights and enhancements.

Furthermore, their feedback guided the strategic direction for new features and future developments.

Onboarding

We placed significant emphasis on enhancing the onboarding process, with a keen focus on offering users clear guidance to foster engagement and elevate the overall gaming experience.

My primary role involved addressing critical elements of the onboarding process, leading to the creation and implementation of various supportive features such as the walkthrough tour, first-look tour, in-context tooltips, notifications, and blank states, all meticulously designed to ensure a seamless and engaging user journey.

My primary role involved addressing critical elements of the onboarding process, leading to the creation and implementation of various supportive features such as the walkthrough tour, first-look tour, in-context tooltips, notifications, and blank states, all meticulously designed to ensure a seamless and engaging user journey.

Onboarding Elements
Onboarding Elements

Landing Page

The Landing Page

The web version of the project includes a landing page and the user platform interface accessible after onboarding.

The landing page introduces and guides users through the main features and benefits of the Digital Twin Certificate, showing how it helps Audi car owners create and share a detailed profile of their vehicle with potential buyers or dealers.

PM2020_Web_Kickstox_D_08