OVERVIEW
RPS Gamba is a blockchain based, wagered rock paper scissors game built on Blast L2. As a 3 man team (a smart contract engineer, a full-stack developer and myself as the lead product designer), we saw an opportunity to make a game that could be enjoyed by degenerate crypto gamblers.
Hence, we picked the most well known game of all; rock paper scissors.
As the lead and sole UX & UI designer, I was responsible for seeing the product through from inception all the way to development.
This project was a great learning experience and had me wearing many different hats ranging from graphic design, outsource management, marketing and within that even content creation.
ROLE
Lead Product Designer
Flow mapping, Competitor analysis, Wireframing, Interaction Design, Design system creation & management, Responsive UI Design, Prototyping, Testing & Iteration, Graphic design, Marketing
DURATION
6 Months
Flow Mapping
Since we were just a team of 3 looking to beat competitors to market, we worked in a very agile way and sidestepped tedious tasks such as project strategy documents in order to get to launch as soon as possible. Hence, the first step in the design process was flow mapping.
Mapping user flows was an important step to take as to visualise how users would navigate within RPS Gamba, which helped us optimise screen layouts for intuitive, goal-oriented interaction.
twitter & fund gated experience
non twitter-gated login
private game creation
Competitor Analysis
In order to gain both inspiration and a sense of direction as to how the design should develop, I looked at other games and collected materials for the team to discuss collectively and decide on a direction we’d like to take UI wise.
I looked through dribbble to find what other game launcher designs looked like. Typical elements here consisted of card-based layouts with banners as focal points.
Despite providing some layout inspiration, these were still lacking as a game launcher interface. Growing up, the 3 of us in the team all loved playing Call of Duty, so that was the next port of call.
Collectively, we were much more keen on the Call of Duty UI than what dribbble had to offer and ended up taking a lot of inspiration from one of our favourite franchises.
However, the ‘personality’ and overall aesthetic of the CoD UI wasn’t something that was necessarily compatible with a rock paper scissors game. I felt that a more cartoon-like, childish approach was more befitting of our game. Something along the line of the Clash of Clans UI…
Bold and black outlines, bouncy and friendly fonts made up the character of the Clash of Clans UI, and I felt these attributes would fit RPS Gamba very well.
Wireframes
Once we collectively decided on the direction to take from the competitor analysis materials I had collected, I began building wireframes in order to validate the UI concept as well as construct the information architecture.
Here are just a few examples of the wireframes:
home page
create private game
loading screen
game page
High Fidelity
Once we were happy as a team with the look and flow of the low fidelity wireframes, I began to bring the vision we gained from my research to life.
One of the first steps for me in crafting the high fidelity UI was finding suitable backgrounds for the game. Now, I’m no artist and we were trying to save money at every turn, so I looked to tools such as Midjourney and Photoshop generative Ai to help me create these backgrounds.
There were quite a few instances of trial and error here and these are just a few of the many images that were generated for me by Midjourney:
Backgrounds
The emerging theme that we were trying to achieve was a medieval castle, and as the user would navigate through the different pages of the game, they would be presented with a different part, or different room of the castle.
As a team, we shortlisted these 3 images as the favourites from what Midjourney and I were producing:
Theme
Home page - looking from user’s own castle out onto an enemy’s
Loading page - the armoury, room in the castle
Battle page - Dungeon of the castleA vital step prior to creating the UI was to build the basic components we would be using for consistency throughout the platform. I made typography, colour and padding standards in order to keep the design consistent and shared them with the engineer in order to align what was in Figma and the code base.
Design System
Once the stage was set, I began building upon the wireframes and constructing the high fidelity user interface.
UI Design
Since we were trying to launch as soon as possible, the team agreed that my time as a designer was better spent building the UI and prototyping, for the most part, was a luxury we couldn’t afford time-wise. Instead, effective communication ( Figma documentation and frequent team meetings ) was our way of aligning on what the expected behaviours of the designs were.
However, communication can only take one so far, and so there were in-fact instances where I had to build prototypes, such as:
Prototyping
We knew that there would be a demand for mobile gameplay. So, while building the UI for desktop I had to ensure that mobile functionality was just as good, and that the design was responsive all the way up to the mobile breakpoints.
Responsiveness
Certain requirements, such as graphic design, fell outside of my own capabilities. Despite this, these tasks needed to be completed all the same and so we took to outsourcing these tasks, with me managing the commissions.
Prior to the commissions, we made do with what I could generate with my own skillset, primarily using the Adobe Illustrator Ai generator:
Outsource Management
These assets were ‘good enough’ to launch with but were certainly something we wanted to improve post-launch and so we did via commissions. Prompting the artist with key pieces of inspiration was vital in ensuring that our vision for these assets was being fulfilled.
What I’ve shown above is not the entire lifecycle of RPS Gamba. As a matter of fact, when we started this project we attempted to get it all done in 24 hours as a challenge. Of course, that was not the case and the project took much longer than just the 24 hours we had initially set ourselves. I wrote a twitter thread on our journey if you would like to read more!
Needless to say, iteration played a huge role in the development of the RPS Gamba.
Iteration
RPS Gamba v1.0
RPS Gamba v2.0
Today - RPS Gamba v3.0
Account Abstraction & Integrated Wallet
Account Abstraction in the Web3 ecosystem is a game-changer for user experience, particularly in onboarding users from Web2 into Web3 platforms. It offers a seamless transition by providing an authentication process that feels familiar and trusted. Once onboarded, users received a unique Web3 wallet tied to their account, which they were able to use across the platform to manage their on-chain activities and data. This approach made the Web3 interactions in RPS Gamba feel natural, as our users were able to play without being overwhelmed by the complexities typically associated with blockchain technology.
One of the standout features of Account Abstraction is its ability to handle transactions without requiring direct user approval every time. This means that interactions on the blockchain can occur behind the scenes, making the experience more fluid and reducing friction for the user.
However, a challenge arises when users engage with multiple products that implement Account Abstraction. Managing numerous embedded wallets across different platforms can lead to confusion and clutter, especially when each wallet requires funding with the native token for transaction fees (gas).
To address this pain point, we designed and implemented an internal wallet within our platform. This wallet consolidates the user's embedded wallet into a single, easy-to-manage interface. With features like deposit and withdrawal, users can effortlessly access and manage their embedded wallet without needing to leave the platform. This design simplifies the overall experience, making it far easier for users to manage their Web3 interactions, keeping the focus on the platform's core offerings rather than the complexities of the underlying blockchain technology.
In essence, our approach to Account Abstraction not only enhances the user experience by minimizing friction and complexity but also empowers users to engage with Web3 technology in a way that feels intuitive and straightforward.
Marketing
RPS Gamba was a project that had me wearing many different hats and employing my skillset in a variety of ways.
We took it upon ourselves to do the marketing for RPS Gamba, and it fell to me to run the RPS Gamba twitter account. This meant that I had to make sure the account was active so that the algorithm favoured it, and subsequently our reach would increase.
Memes
What better way to integrate RPS Gamba into the Web3 community than memes on twitter?
While maintaining a presence on twitter, we also utilised our in-built marketing system; our affiliate program. This would act as an incentive for larger accounts to share our game to their network, as they would end up being paid for it.
To communicate this affiliate program, I had to produce assets the team would use to out-reach (warm & cold) and onboard players to our game.
Affiliate Marketing
In unison with our affiliate program, we also tried to out-reach to larger accounts on X, prompting them to play our game in a very targeted and bespoke scheme. Some examples of the assets below:
Targeted Marketing
Post-launch improvements…
After having launched we noticed improvements we could make as a team but also received a lot of feedback from our players, and though they have yet to be developed these improvements have been designed and are in the development pipeline.
A way of navigating to other games from within a game, saving the user having to go back to the home page and scroll to ‘my games’. Also game specific notifications.
My Games Panel
Emotes
Player emotes, from spectators (bottom) as well as the two players.
A mini-game within RPS Gamba. We implemented this to incentivise game activity whilst also adding another layer of competition within the platform.
King of the Hill
Round History
A display of what weapon was selected by either player in previous rounds.
The Team
A huge thank you to both @DylanKentish & @BuiltByFrancis for supporting me in leading design from inception all the way to where RPS Gamba is today. What a ride, and what a learning experience!
