Colyseus.io is a full website design that provided SaaS information for Colyseus Arena, an open-source multiplayer solution.

At Lucid Sight, the goal was to entice video game creators to use the digital product, Colyseus Arena, a multiplayer platform that allows the creator to monitor players interacting with their game across the globe, through one central hub.

Challenges included consolidating vast amounts of information in a digestible and compelling way, with very few images and screenshots/illustrations to play with.

This was the result.


Colyseus.io — Desktop + Mobile Spreads

The home page required sifting through and deciding which valuable bits of information were essential to draw in the viewer without being cluttered. It was important to tease value while also optimizing click-through.

The product page is the main selling point for Colyseus Arena, and gives users the opportunity to view documentation of the product that they are potentially investing in. It also expounds on features and payment plans.

Carousel Design

Custom UI Elements

Each payment plan and category is color-coded, giving clarity to the user, and giving recommendations based on user needs. Each popover gives a summary of benefits.

Gratification & Feedback

While not essential for function, feedback and gratification to the user promotes click-through, repeated interaction, and a human-like interface experience with the site.

Mobile Menu

Responsive Design

For different breakpoints, various menu styles are required. For this Schedule a Call popover, the design can go from some large and wide, vs. a more narrow approach for tablet or mobile.

Design application & collateral was provided, as part two of the project included a cohesion between main product site and company branding.


Misc. Site Spreads

A B2B Saas design system with eCommerce conversion in mind.

*Note: Colyseus.io was sold and returned to the original creator in 2022. It is now a different product, and this refurbished design system does not exist on the current site, but is still live on the original Node.js showcase.

Questions I asked during this journey:

  • Who is this product for?

  • What would make the user choose Colyseus over competitors?

  • How does color lend itself to the power of the product/vertical?

  • How can the site give information without becoming overwhelming?

Next
Next

Preppd: Meals For All