The Challenge

OBJECTIVE

After achieving peak hardware performance and integrating essential functionalities into the Ronin UI, the team recognized that the UX/UI design fell short of the high standards originally envisioned for the Tanto. Committed to matching the Tanto's innovative benchmark, the Ronin Dojo team embarked on elevating the UX/UI design for their native user interface.

Their objective was to create a minimalist dark mode UI aesthetic that elegantly complemented the unique sleek appearance of the Ronin Dojo Tanto.

Establishing Structure

SOLUTION

Considering my success criteria, I started devising a plan for structuring the UI layout. Recognizing the necessity for mobile compatibility, my initial approach was to modularize each feature within the Ronin Dojo stack. This concept drew from my background in creating responsive product designs for the SaaS industry.

Adopting Shu Ha Ri

MASTERY

To bring the Ronin Dojo’s team vision to life, I believed incorporating Japanese Samurai influences in the design was crucial. I aimed to integrate elements reminiscent of the Tanto’s aesthetic, envisioning each modular container slashed at the corners like the Tanto’s casing.

As I delved deeper into this concept, each segmented module fell neatly into a grid layout that immediately evoked the image of a traditional Japanese Bento Box. Eureka! This was my moment of clarity, confirming I was on the right path. Interestingly, in 2024, a new UI trend known as Bento Box UI emerged. Surprisingly, I had conceptualized this style two years before it became mainstream in design.

Complementing Color

SCHEMES

After implementing on the structure, my next task was to create a dark mode color palette that incorporated Ronin Dojo’s brand colors. Given the existing use of red in the brand's color scheme, I went with a light blue to complement the warm tones in the design, creating a distinct Cyberpunk atmosphere. I then utilized the black to establish a comprehensive value scale intended for both the background and foreground.

The Power of Symbols

NAVIGATION

Once the color palette was established, my focus shifted to Iconography, aiming to streamline navigation in the Ronin UI. By integrating symbolic, recognizable icons to communicate different features, I aimed to enhance UI navigation, particularly emphasizing on mobile user experience.

This principle has held true since the stone age with ancient pictograms and still remains relevant today, especially when it come to optimizing mobile UI navigation.

Establishing The Design

AESTHETICS

After ensuring all prerequisites are met and elements are in place, the penultimate step is to develop the UI design. By leveraging the established branding from the Ronin Dojo team and integrating it with new design elements, we can design a composition that effectively showcases the aesthetic direction of the UX/UI redesign. Creating a concise moodboard is one of my favorite steps that I incorporate into my process, as it sets the tone for the final user interface design.

Ask & You Shall Receive

DELIVERY

It was time to put everything together the success criteria had been met and the moodboard aesthetic was set, the next step was to develop the Ronin UX/UI design. Through multiple refinements and valuable insights gained from collaborating with the project clients, the final product fully embodied the original vision of the Ronin Dojo Team.

“ Design isn't finished until somebody is using It. ”

Ronin UI Prototype

The Impact

RESULT

Following the project's completion, Samourai Wallet enthusiasts could enjoy an enhanced user experience with an intuitive UI that prioritizes usability and accessibility. Moreover, the new UI was optimized for mobile devices, ensuring convenient access for users.

Since the launch of Ronin UI 2.0, the Ronin Dojo team has successfully deployed 35 software releases, enhancing the original feature set and introducing new features beloved by Samurai Wallet enthusiasts. Throughout continuous development, the team has steadfastly maintained the UX/UI design principles established with the launch of Ronin UI 2.0.

On September 30, 2023, the Samourai Wallet team initiated a scheduled server maintenance phase. During this downtime, data revealed that 85% of active Whirlpool users were operating self-hosted Dojo nodes, while only 15% of the active Whirlpool user base experienced downtime. This inadvertently confirmed that most active Whirlpool users were effectively running on Ronin Dojo.

The highlight of the Ronin Dojo UI 2.0 release was its 100% Free Open Source Software (FOSS) nature. The Ronin Dojo team envisioned making this software accessible to all users, not just those who owned the Ronin Tanto. Embracing a FOSS code base offers numerous advantages: transparency, collaboration flexibility, higher code quality, enhanced security, and increased innovation through community involvement.