Design Dive - ENCTR U.I.

Welcome to the second edition of what we'll refer to as a "Design Dive", moving forward. I'm JP, lead designer for ENCTR.

Here's the latest on my side:

• ENCTR App is getting a visual overhaul
• ENCTR UI is a new addition to the project, a fully-fledged design system built around MUI.
• Because of our new design system implementation, Battlescape is having its UI / UX adjusted.
  ‍
  Just to clarify, we are updating the user interface and user experience of Battlescape components. Logic is largely unaffected.

Visual Overhaul

ENCTR App is receiving a visual overhaul, starting with our finance modules.

^{Interactable prototype card. Press [R] to refresh the prototype.}

‍

If you've used DeFi features and other decentralized apps before, you know how important it is for things to simply work. You don't want to be presented with 24 different options and buttons. You simply want to trade, swap, and exchange your tokens. On top of that, the same efficient DeFi experience should carry over to different devices. Wrapping your $EXAMPLE token on your computer should take the same amount of time, and contain the same (if not less) actions on your mobile device.

This is our approach to the new finance modules. Our previous screens simply didn't look all that functional, we'll be the first to admit that and do so with integrity.

Any time you want to convert or buy/sell $ENCTR, everything will be simplified, coherent, and live on the center of your screen. Type your amount, choose your actions, and confirm the transaction.

In the above example, the areas in which we've improved upon are fairly obvious; better readability, denser layouts, clearer actionable items. We're able to achieve better UX / UI with our new design system, and that will be covered in the following section.

It's important to understand that with a visual overhaul, it also leads to fixing other underlying issues that were pushed to the back of our pipelines — issues outside of the ENCTR App itself. Our main website will see some additional interface updates as well, mainly to tie the visual experience together.

Under the surface

Without a doubt, the biggest improvement to our infrastructure is creating alongside an established design system.

If you don't touch design or development often, think of design systems as a dynamic rule book, one that contains visual and logical rules for how your products look and behave.

Design systems are slowly becoming more "liquid" by nature, meaning they can be used and interpreted easier, upgraded or adjusted easier, and more widely applicable to different mediums.

With ENCTR UI, this design system serves to make everything we put out between the website and application as coherent as possible.

‍

‍

One design philosophy we're sticking to is emphasis of elements. ENCTR UI blends both elevation and depth to emphasize importance of information. In the above example, contrast between surfaces naturally guide the eyes in different places.

Material Design took the concept of elevation and lighting to found one of the biggest visual guideline systems in the world. Read more about it here.

Cutouts through a surface and implied elevation of objects; these fundamentals are persistent throughout ENCTR UI. Using neutral color backgrounds, such as black or grey, leaves plenty of room for us to use color as a secondary guide. The "Next" button, for instance, is super exposed and obviously of importance. That's only because it contrasts everything else around it.

‍

‍

Custom components are dynamic objects for our application that combine the design system and external purpose. A big library of buttons and boxes don't exactly achieve anything for you, unless you put them into context.

For example, we take our design system stylings (font, color, shape), and can build custom components that a user will interact with. The above image is how our "Bond" elements are constructed.

‍

Battlescape

‍

There's a couple key updates to cover for Battlescape, our first gamified module.

Firstly, all of the peer-to-peer Esports wagering will be done so using stablecoins, not $ENCTR. It's all about meeting the middle ground here — there's essentially two groups of people who will use this module; holders, and everybody else. While holders seemingly wouldn't have an issue using their $ENCTR balance to wager, it completely gates new users off. Users that have little or no knowledge of the ENCTR ecosystem would have to go through multiple steps and conversions before they're able to wager.

Seeing as Bonds will be the most popular and efficient method of acquiring $ENCTR, an "educated" holder will likely have stablecoin balances regardless.

People that are first stepping into crypto & are looking for Esports wagering options would be able to use their $USDT or $DAI right off the bat. Most of the popular, centralized gambling sites have already moved to accepting cryptocurrencies. Loading up your wallet for Battlescape should feel like a familiar experience to other Esports gambling platforms.

The key difference is that Battlescape involves no betting against the house, it's all on-chain, and the underlying logic for rewarding match outcomes can extend way beyond a team winning or losing.

We plan to pack a ton of functionality into Battlescape and use it as a way to onboard people into the ENCTR ecosystem through its strategic positioning in the intersection of Esports and entertainment. The last thing we'd want is to hinder our amount of active users by adding too many steps for entry.

Three high-level clicks. Connect, wager, claim. If we can succeed in streamlining the Esports wagering experience to that tight of a user flow, we'll be sitting at the top of all other platforms.

User Interface Adjustments

How Battlescape displays its matches is getting an overhaul. In initial stages, I underestimated the importance of being able to find "that match". I'm talking about the match that you've been waiting for since last week, you sit down at your desk and pull up Twitch. It's Team A vs Team B and it starts in 15 minutes.

How do you find it on Battlescape...?

You simply find it with filters that make sense.

‍

‍

Because of the fact we can technically pull so many different matches, it naturally makes sense to use a persistent "table" component with search and filter options that do the heavy lifting. Another benefit that Battlescape leans on is that we aren't using ratios. Wagering inside the module is done so through pool based systems.

"Pools betting" is a modernized form of betting where every users wager is combined into a single pot, or pool, and then divided between whoever predicts the correct outcome. In pool-based betting, there is no "against the house". Instead, the house (that's us) simply create and host the pools for you, the user, and you battle against other users for a share of the pool that you have collectively created with your wagers.

The big difference between fixed betting and pool-based betting is that you are competing against other users, and the better you do in comparison, the more you can win. In the context of Esports, you can see how upfront knowledge of team performance and player statistics could allow you to place your wagers more tactfully.

On top of that, the wagering experience is just... easier.

If you're more a visual learner, here's a nice TL;DR

‍

‍

"Here's the current pool amount, here's your balance. Wager X amount of $TOKEN on an outcome." That's the Battlescape experience. Multiple-selection outcomes tied to ratios are often confusing and obfuscate what you're actually doing with your money.

‍

Layout & Structure

An additional widget system will be integrated with the Battlescape release - internally, we call these "widgets"! Yes, they're the same name. But these widgets are super cool. I've included an image below for reference. There's tons of use cases for widgets throughout the module, and one that I'm most excited to work on are the Event widgets.

Think of Events as a conglomerate of matches and pools, all related to one another. Rather than displaying every single wagerable match in a long list (which is totally possible), event widgets provide a quick and organized filter. Say you wanted to catch all of the VCT tournament matches but didn't want to apply all of the generic filters each time you load the app or connect your wallet. We'd throw all of those tournament matches into their own page, which can be reached by entering the VCT (Event) widget on the dashboard.

‍

Once inside, you'd be presented with a condensed page, styled to match whatever event you're viewing. All the bells and whistles are there, minus the extra filter clutter. Event pages only display the wagerable matches or pools that co-inside with said event.

By including a breadcrumb system at the top, it'd be super easy for you to navigate between the dashboard, specific match pages, and various other places within Battlescape.

The beauty of working with Event pages is that they're multi-purpose. If the ENCTR team wanted to run our own official tournament, or partner with a tournament organization, it would be extremely easy to setup an event page for that scenario.

Every single wagerable match will appear dynamically throughout the module. If you see a match inside of an event page, that doesn't mean it's exclusive to that page. You can find and place a wager on the same match from the generic dashboard list, you'd just have to apply various filters to achieve a similar view.

Ease of Use

At some point in development we were considering a "pin" functionality. Every match component would have a pin icon, allowing you to save specific matches to your dashboard and find them easier. After some exploration, it was obvious that this was sort of a band-aid solution.

I'm working on a new component that acts like a pin board, but streamlines that user flow with additional functionality. Say you wanted to place a wager on a match; selecting that button places a wager card into your side board, a singular view that sticks to the right side.

You can queue as many wagers as you want before finalizing any transactions. You could fill your side board with four wagers, enter the specific wager amounts for each, and then use the bottom confirm button to finalize all of them at once.

‍

What's Next

I could continue this article for another 12 pages, there's alot to discuss and garner feedback from regarding all the various modules in the works. My hope with any of these posts is to unveil that development curtain every now and then and educate those that are interested in the design aspects of the project.

Once we get more of our Battlescape views built out I'll continue this specific post with a further look into the wagering experience. Ideally these will build up to the module's release itself.

I'd also like to tease another unannounced module that will slot into our release schedule. This module is going to introduce a brand new experience to the ecosystem and allow you to forge your own path with ENCTR.

Until next time.

‍

Website: https://enctr.gg

Twitter: https://twitter.com/ENCTR_Official

Discord: https://discord.gg/CgPYkPb6N5

‍
Contact Information

For any project related questions:

Luka Antolic-Soban - Chief Executive Officer - luka@enctr.gg

‍

For any partnership, influencer or marketing related questions:

Aaron Nichols - Chief Brand Officer - aaron@enctr.gg

For design inquiries:

JP Pellegrino - Chief Design Officer - john@enctr.gg