2023

Website and mobile app
UX/UI

Horse Racing
NFT-Based game

Build a stable of winning racehorses
and create a legacy by buying, breeding and racing.

Equine background
Equine image
01

Equine NFT horses come with a wide range of physical and mental stats that contribute to their overall performance in virtual racing and breeding..

About

Equine is an NFT horse racing game.
Race, breed, sell & buy horses.

Section 2 background
Project
Equine
Info table image
Year / Month
2023 / 03-06
Scope
UX, UI, Development
Client
Noble Steed
Date
May 20 - Feb 23
Equine is an NFT horse racing game.
02

The personas helped identify potential user needs and challenges, which were taken into account when designing the user interface.
By addressing the needs of both NFT collectors and newcomers,

Numbers

Experience the virtual ride. Let your horses run fast!

Experience the virtual ride. Let your horses run fast!
Section 3 background
03

Project
Architecture

User Flow

Equine NFT Games prioritizes user experience, with an intuitive interface and customizable features. The architecture emphasizes ease of use and accessibility, with a seamless player experience.

Section 3 background
User Flow
Section 4 background
04

UX Sketches

Grids & Spacings

Step into the shoes of a seasoned stable owner as you enter a dynamic virtual realm that combines the excitement of horse racing with the innovation of blockchain technology.

UX Sketches
05

Manrope

Typeface

Typeface
Section 6 background
06

Development Overview

Equine successfully went live with website, web application, and mobile application always in sync with one another.

Daily & Weekly Standup Meetings

Regular communication among team members through daily standup meetings ensured everyone was aligned and any roadblocks were addressed promptly.

Agile Methodology

We adopted an agile approach, breaking the project into sprints, allowing us to iterate, adapt, and respond to evolving requirements quickly.

Weekly Standup Meetings

Prescheduled weekly meetings acted as a strong bridge between our team and the client, allowing our developers to demonstrate their progress and gather the feedback necessary to introduce adjustments.

Version Control

We utilized Git and Bitbucket for version control, enabling seamless collaboration and tracking of code changes.

Continuous Integration/Continuous Deployment (CI/CD)

CI/CD pipelines were established to automate testing and deployment, enhancing efficiency and providing multiple environments for Development, Staging and Production.

Section 7 background

Technology Stack

Our choice of technology stack was critical to the project's success. It included:

Technology Stack

Technology preferences

01.
Website
Website

Built with NextJS as a static site and managed by means of the Wordpress CMS for on-demand regeneration and deployment.

02.
Web Application

Built with React to enable running on the Client's side ensuring an exceptional UX and avoiding unnecessary server overloads. This strategy played a pivotal role in providing 3D experience and seamless connection with Cardano blockchain.

03.
Mobile Application

Built with React Native, as this project was meant to be game like application, we utilized RN to use it as UI layer and implement custom functionalities by leveraging native capabilities on iOS and Android.

04.
Backend

Built with ExpressJS, since NodeJS with a number of available seamless integrations and event-driven architecture worked like clockwork in this project. Backend played a crucial part as the majority of services had to stay up-to-date about the user blockchain wallet information and handle incoming requests with speed and precision.

During the development phase, our team faced various challenges, but we embraced them as opportunities for growth:

Syncing website and web app

Syncing website and web app

Both platforms have login: Connection to wallet features. Once you log into one of them, you should be able to access to your profile in the other one too. Our team tackled this by utilizing the same origin cookies and making sure that our domain and subdomains can use cookies for authentication.

Making WASM file work on Frontend Apps

Making WASM file work on Frontend Apps

Having a single wasm file for such diverse project and making it work on every platform required custom configuration for each one to load and be able to consume it. We can say this was the most critical and hardest to tackle, but with enough research on this technology, our team was able to provide wasm file connection.

Game UI Feeling

Game UI Feeling

The main Web App needed to have both informative views and 3D views. The latter was the most important for the users. As you can guess, implementing this to run without any design any design mistakes on countless devices requires great attention to detail and, of course, pin-point testing. At this stage our E2E tests and meticulous QAs did a solid job to make sure quality is always there.

Section 8 background 1 Section 8 background 2
07

Step into the shoes of a seasoned stable owner as you enter a dynamic virtual realm that combines the excitement of horse racing with the innovation of blockchain technology.

Race

Experience the virtual ride. Let your horses run fast!

Upcoming Races
Winnings
Info table image
Results
Leaderboards
28 tracks
16 locations
Experience the virtual ride.
Section 9 background

Select the right racehorse for the right track.

Section 10 background
Step |

Select a race to view additional information about its properties and other useful details.

Step ||

Get your horses and jockeys to participate in live races for a chance to win great prizes.

Select the right racehorse for the right track.
Select the right racehorse for the right track.
Section 10 background 2
08

Equine NFT horses come with a wide range of physical and mental stats that contribute to their overall performance in virtual racing and breeding.

Stable

Revolutionising the Track. Dive into the the next-gen digital stables.

Physical stats
Mental stats
Breeding horses
Racing horses
Jockeys
Configurator
Training program
Revolutionising the Track.
Section 11 background 2
Result
94.7%

A horse breeder carefully selects and matches horses to produce offspring with desired traits.

Breeding

Breeding

Owners and breeders should understand the five main physical stats, including speed, stamina, acceleration, endurance, and agility.

Revolutionising the Track. 2
Revolutionising the Track. 3
Section 11 background
09
Section 12 background

Choose the right jockey, to help your racehorse win.

Result
24.5%

Jockey has a significant impact on a racehorse's abilities. So, selecting the right one is crucial.

Choose the right jockey
Section 12 background 2

Browse, create, buy, sell, and auction NFT Racehorses.

10
We believe in people, planet, &
purpose before profit.
Choose the right ONE.
Horses
Library of skins
Jockeys
Misc
Browse, create, buy, sell, and auction NFT Racehorses.
Section 13 background