Community Buff: Designing Arcadia, Explorations in UI/UX

OP Games
5 min readAug 6, 2022

Arcadia’s Dynamic Duo of Design

Our last Community Buff was an exciting deep-dive into the visual elements of Arcadia and the kind of experience we want our community to enjoy as they traverse through the platform. Christian Sng and Yuolmae Ang Hui Guo, from OP Games, walked us through the design path and thought process behind the Arcadia website’s user interface and user experience design. Christian is a UX Designer and Strategist and Yuolmae is a UI/UX Designer. The two make the core of our UI/UX team.

This is what the two look like at work.

In this article we echo what the they shared in the community event on Discord.

Before we get into the meat of it, let’s define UI and UX. UI refers to the aesthetic elements, the visual aspects by which people interact with a product. UX on the other hand, is all about the user experience with the service and/or product.

As the gateway to our project, Arcadia must see no stone left unturned. We pride ourselves in forming an incredible team from all around the world to build Arcadia in a way that looks, sounds and feels kick-ass — nothing less will suffice!


Design for Inclusivity

On a macro level, this means that we do our best to ensure that our platform is accessible to all types of people in spite of their ability. However, on a more micro scale, we need to understand that as a web3 gaming platform, it is imperative that we design for different gamer archetypes, as well as different levels of familiarity with the web3 space.

As part of the web3 community, it is one of our goals to ensure that more users are on-boarded onto web3 — and this means combatting gatekeep-y elements like jargon and the assumption that all users know as much as the average degen.

Degen, regen, whatever you are, you’re always welcome in Arcadia. ❤

A large part of how we integrate web2 users onto our platform is by adopting an educative lens when designing and introducing features across the platform. These users need hand-holding through certain processes in order to help them understand web3 concepts like how and why I need to create and connect a wallet, how transactions and smart contracts work, as well as how and why it takes a certain amount of time for transactions to be confirmed on the blockchain.

Design for Transparency

In the same vein as the above, trust-building is extremely important. It is not enough for users to know that Arcadia is a trustworthy platform with a trustworthy parent company managing it. When dealing in the web3 space whereby elements like financial value and identity come into play, it is extremely important that the platform builds trust through transparency.

We may not all look as trustworthy as this cat, but our hearts are in the right place!

This can be realized in design through overcommunication and constant clarification. By spotlighting vital information at the appropriate time and using effective signposting, we can guide users through ambiguous journeys and ensure that the need for trust is fulfilled at key decision-making junctures.

Design for Familiarity

At the core of it all, Arcadia is a gaming platform. That means that our users are, in some shape or form, gamers. By leveraging already established behaviors and preferences, we can increase the level of intuitiveness and delight through familiarity.

Gaming platforms, in-game economy, quest pages, marketplace, etc. are nothing new in the web2 space and companies like Steam have invested loads of time and effort into designing and building a gamer-centric experience for their platform. Borrowing industry best practices extends beyond the gaming world as we look to e-commerce sites to enhance the familiarity of the marketplace, and FinTech platforms for the presentation of earnings on the referral page.


UI For You and I

How does one make a website? As the artist Sol Lewit says: “The idea becomes a machine that makes the art.”

From a design standpoint, we first had to determine the basic idea of Arcadia. We wanted to preserve the love for the 8bit style we grew up playing in the arcade. We also wanted to show data, representing the tournament capabilities and blockchain technology behind our platform.

How does this reveal itself in designing for web3? There is this concept called atomic design, wherein we build up atoms into molecules into templates and into final infrastructures. This method is scalable, using small parts to build up towards a whole.

We introduce our branding colors into the mix, using colors that evoke joy and excitement. We use fonts that evoke retro vibes and strike viewers’ attention. As we bring the shapes, colors and font choices into the mix, we are able to build towards a page.

These are our tournaments pages, where users will be able to engage in public or privately hosted tournaments designed not just by OP, but other members in our Arcadia gaming community! At a glance, users get to see key information such as prize pool information, the number of current players and whether this tournament is boosted. Players are encouraged to utilize boosters sold on our marketplace that promote the tournaments you host. More loyalty rewards and earning potential for hosts are coming further down the pipeline.

All these features and user journeys must be presented and laid out in a way that considers user experience — something easy to use, fun and intuitive. Everything is interlaced and all facets of the system have to work in close synergy for the sweetest overall effect.

Website | Twitter | Discord

Don’t forget to subscribe to our Medium for more updates and informative articles on blockchain, gaming, and Web3.