PROJECT MANAGEMENT, UI/UX & WEB DEVELOPMENT

Creating Ayloft

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.

Think

Proposal

My client wanted a platform built similarly to BoTB (Best of the Best) and Omaze. In essence, users can compete in an online game in order to win prizes. The number of users entering the games provides income for the prize to be purchased and delivered to the winning user.

Before beginning, I was presented with a detailed overview of the desired product that the client had built to highlight their idea. My client had visited a few other firms before coming to me, and had received quotes of over $200k to complete the project.

Bloated concepts are common, and by reducing the scope of development, we were able to create a higher-quality, and better-targeted product.

I was able to create a proposal for the product at a fraction of the cost by leaning on pre-existing services that would prove to add greater flexibility while reducing product complexity. UX improvements are important, both for users, and for employees.

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.

Brand

Without a pre-existing company name or image, I interviewed the client over a few sessions to extrapolate the root inspirations and motivations behind the product.

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.

User Experience

Especially in situations where e-commerce mixes with gamification, the user should be able to understand the purpose to each step of the process.

By approaching the UX of the platform in stage one, I was able to identify key weaknesses in the structures of Omaze and BotB (the platform’s closest competitors). Through our research we were able to design and formulate best practices for our design standards.

We designed each flow to emphasize user conversion with clarity.

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

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:

Build

The Site

Once the design direction was established, I created the structure and hierarchy of the design to ensure effective use. The aesthetic elements of the design were given attention during this time, but not finalized until the later rounds of review.

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.

The Game

I devised a strategy to hardcode the game’s visuals into a video, with an interactive layer above.

I developed a game template within a popular game engine built to the constraints of the web interface.

Originally I planned on creating an entire platform exported from the game engine 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 the game engine 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.

Conclusion

Ayloft is a rather complex platform in a small package. It personally reminds me of a small sports car, with a large engine inside a tiny frame.

Upon completion of the project, I was about 80% satisfied with the design. For a project such as this, budget and time constraints were of great importance to consider. The journey from the initial concept to the live product is leaps and bounds ahead of anything else within this budget category, and it truly provides Ayloft with a firm foundation to build on.

We frequently pushed deadlines early into the project, but learned to conquer the issue as we locked down on our project management. We eliminated scope creep and focused specifically on our goals and objectives.

As the UX designer also in charge of this project, I quickly learned to focus, and lead by example. The ability to manage this project yielded benefits for everyone involved, including myself.

As Ayloft works towards further roadmap goals, I credit the product’s success to my history of experience in design and management, deep analysis into understanding the future users, and a strong development team and pleasant client experience.

— Jarren