Building a gaming platform to enter contests, play games and win prizes.
In fall 2019 I accepted a project for the construction of a non-traditional e-commerce platform. At that point, the project didn’t even have a name, so there was a lot of work required to bring this site to life.
Ayloft was designed by myself, with a small team of developers I hired to help execute the project. I managed the project, the team, created the UI/UX and visual elements.
Originally the platform was intended to have a charitable element, though recent regulations in the state of California made certain roadblocks for that aspect of the platform. Instead we allowed the charitable elements of the site to be enabled or disabled on a per-campaign basis.
Through these explorations we arrived at the name Ayloft, a word which carries a lightness and sense of flight. In addition, we were able to gain wide access to the name on social media for consistency across platforms and domains.
The name is well-suited for a platform that allows customers to compete to win large prizes.
By building user flows, every situation was considered, tested, and iterated upon.
I also performed stakeholder interviews to gain additional insight into user methodologies while designing.
"I kept getting frustrated because I couldn't understand what the site was about. Once you added the breakdown, I understood right away." - Stakeholder
Eventually, the emphasis on clarity paid off, users explored more of the site after we added a “How does it work?” section directly to the main page, and a practice section to the site which enabled users to experience the game before committing to the platform.
Ayloft’s game is a simple matter of predicting where the ball stops moving on the playing field. As the ball slows, it disappears, leaving the user with only the previous velocity and direction to use as context clues for the final location. Users then place markers on the map to guess the ball’s final location.
My client wanted to ensure absolute security with the game, to prevent any method of cheating. By rendering a portion of the game offline, the final coordinates are kept completely inaccessible until a winner is announced.
Ayloft’s game mechanic requires three distinct elements:
Figma, Illustrator, and Webflow were used during the prototyping phase. The final design was built directly with HTML/CSS using Next.js.
We used Digital Ocean as the host, Prismic as the CMS, MongoDB as the database, and Stripe as the payments processor. These additional decisions were made with the assistance from my developers. This stack was used to ensure ease of use for the client as the platform continues to grow.
I developed a game template within Unity built to the constraints of the web interface.
Originally I planned on creating an entire platform exported from Unity which would provide the client with a dashboard in which to create the games. Unfortunately after a few days I realized I was creating more problems than I was solving. Instead I opted to build a file that my client could open in Unity and make modifications whenever desired.
If I could have done this differently, I would have calculated the time of development between my options, before starting this process. I would have effectively saved days of work.
Once I had created a system which would export a video and final coordinates, I moved on to the interactive layer inside the site.
The largest challenge here was to ensure compatibility in the game with both mobile and desktop users. I opted to use Leaflet.js (an open source JS library for interactive maps) as the game’s web interface. By going this route, no user would have a greater advantage by zooming in more/less based on screen size.
I worked closely with my developer to ensure that the navigation and interface in the game were easy to understand.
Once users have completed placing their points on the map, the platform saves those points under the user’s name in the database.
We developed a script to pull data from the database for each game, and calculate the winner based on the final ball coordinates. Once calculated, the client is able to share the winner via a CMS section of the site.