Otherside — UI/UX & Web Development for Yuga Labs

First iteration concept direction for the homepage

Homepage Hero Concept Direction v1

Improved conceptual direction for the homepage

Homepage Hero Concept Direction v2

Final direction of the homepage UX/UI and visual design

Homepage Hero Concept Direction v3 - Final

Designing the homepage, part of my process is to have some sort of end result in my mind with how different elements would flow and interact. So the intention here was to have a beautiful parallax effect between the first two sections. Followed by intricate animations of the gradients and embellishments, in to a marquee of Otherdeeds.

But then, as you scroll further into the “Interoperable” section, this becomes a scroll based experience to explain that people will eventually be able to take their NFT’s and bring them into the game as playable characters, so I went with a deck of cards with a flick-through animation on scroll.

But for the V1 launch of the website, we needed to ensure certain features were feasible, which meant that a lot of features I had designed, remained planned for a future release.

The most interesting challenge for me with the Otherside website was being able to allow users to launch in to the game very quickly, while allowing newcomers to scroll down and learn about the game, but additionally offer seasoned developers to view whats on offer with the ODK.

Homepage V1 Launch version

Otherdeeds Scroll based reveal animation

Mobile Navigation Responsive UI

For the navigation of the Otherside website I wanted to something a little different to my normal approach, which would be a full screen take-over menu. But this time I decided to go with a mega-menu style, essentially a half screen modal to present the Primary and Secondary menus, with a game trailer CTA.

Additionally, the engineers wanted to use Glyph to help with user sign ups, so I refined the onboarding flow and gave it a consistent UI design to feel on brand.

User onboarding via the website is done with a themed glyph integration

Onboarding Glyph integration

Obelisk Custom storytelling scroll reveal experience

Obelisk An early 3D / Webgl concept

The original Obelisk page used an illustration similar to what you see here, but everything was fragmented, static pieces scattered down the page. It worked, but it didn’t feel alive.

I wanted to push it further. My first concept was a fully immersive 3D WebGL experience that would rotate on scroll, revealing and highlighting different sections as the content came into view. It was dynamic, cinematic and bold, but ultimately the visual direction shifted.

We pivoted to an illustration approach. Instead of abandoning the idea, I reimagined it: as you scroll, each piece lights up in sequence, delivering the content exactly when you need it. The interaction stayed just as fluid and intentional but now in a style that better fit the Otherside brand.

Obelisk Illustration based - Final direction

The Switch World view to ODK view and intended transition

Pagination Unique UI element for left/right navigation

The ODK page opened up a lot of opportunities to experiment with new interaction patterns and visual ideas. I explored multiple ways of showcasing games, featured titles, newly added releases, and more while also introducing a concept for highlighting different aspects of the ODK itself; a lightweight carousel with its assets wrapped in a custom browser-style UI to frame each feature in a fun, distinctive way.

One recurring interface element across the site is the left/right arrow navigation. Instead of relying on a standard pattern, I wanted to create something more aligned with the brand; something playful, a bit gamified, and intentionally unconventional. It’s definitely unique, but that’s exactly what makes it feel right for this experience.

The ODK page design with several interactive sections

ODK Page Designing sections and organising flows

Game Details In-depth look at an internal game page

An intricate UI detail for the game thumbnail design

Game Selection An intricate UI detail for the game thumbnail

By designing a Netflix-style interface with the ODK, I was able to simplify the user journey early on, ensuring that browsing games and events felt familiar and intuitive. Users can immediately start streaming in the browser, launch the native app with the Play Now button, or dive into a dedicated detail page via the Learn More button for all the contextual information they need.

For the detail page I wanted to do something a little different than any other internal page. These pages would be individually treated, to ensure good accessibility. For this one for example, I extended the sky to give room to the game logo, will a good 100vh of scroll before bringing that gallery into view. The idea would be that the background would be in a fixed position, then slowly fade out as you scroll down, to keep the user feeling more immersed.

Litepaper A beautiful way to browse the docs

Litepaper Navigation Unique interface to jump sections

It was a true pleasure to work with you. As a Producer - I’m super glad we found you and your level of expertise and reliability is simply unmatched!

- Roman, Senior Producer @ Yuga Labs

AdamRoberts

Design &Engineering

Leave your details