Flame 🔥
"Steam" for Web3
OVERVIEW
Top to bottom design of Flame, a Web3 game store and multi-chain wallet
TEAM
Ross Krasner, CEO
Wyatt Mufson, CTO
Rick Ellis, CPO & Creator of Steam
+ 5 developers & 1 graphic designer
TIMELINE
August 2021 - Present
TYPE
Full-Time Project at Ryu Games
PROBLEM
Painful UX, No Discoverability, Zero trust
Web3 games require multiple steps across multiple platforms just to get started, causing frustration and drop-offs. We wanted to create an all-in-one platform with single-step onboarding and a familiar store interface. My focus on design was to create an intuitive, accessible, and modern gaming experience for gamers.
PROBLEM 1:
How do gamers discover new games?
I started the store page design process by researching what interfaces gamers were accustomed to. I used FigJam to dump my research and have discussions with the team about what we liked and disliked about existing platforms and which additional Web3 features we wanted to add to the Flame browsing experience.
After our discussions for the game page, we decided to prioritize these five features for our MVP. They matched closest to our goal and would make the most impact on our users. These were also features that gamers are already familiar with and would have an easy time onboarding to.
PROBLEM 2:
How do non-crypto users know how and what currency to purchase?
Now that I solved how users would discover games, I moved on to solving how users would get started playing the games. To do this, I decided to create currency cards that would display not only which currencies were needed to play a game, but also what the function of the currency was and how much the user already owned.
Gamers should be able to see:
Gamers should be able to see:
- The name and logo of the currency
- If the crypto is a currency or an NFT
- How much of the currency they own
- What the in-game use of the currency is
- How much of the currency they need to get started in-game
- A link to purchase the currency
- The USD value of the currency
- Which assets are required vs. recommended to purchase
WIREFRAMES
The MVP
With the goal and features set, I had a clear idea of what the users should experience when they opened Flame. These were key for the wireframes and I made sure to check back at the feature list and mission statement often while designing.
DESIGN SYSTEM
Next step was to create a functional and cohesive design system to create an aesthetic experience for gamers. I iterated through many color palettes, fonts, and styles and eventually landed on a simple one-color design. I saved the orange color for call-to-action buttons and other important information such as install buttons, assets that were required to play games, and wallet transfer buttons.
HIGH-FIDELITY WIREFRAMES
Creating the screens was simple once the design system was laid out. I made components as I designed so that iterating would be easy. This is an especially important step in my design process not only so updating designs is easier, but also because it makes developer handoff more intuitive. The button components were later integrated in the code by the development team using Storybook, a frontend workshop for UI components.
The designs for the currency cards took time to get right since there was a lot of information that needed to be displayed. I made use of different stroke colors, button weights, and icons to display each piece of information that was necessary. I also created a shortened version that could be expanded to display additional information.
These cards were displayed on each game's overview page so users could see every currency they would need to get started and have a seamless onboarding experience.
These cards were displayed on each game's overview page so users could see every currency they would need to get started and have a seamless onboarding experience.
PROTOTYPES
The last step was to create a prototype that would highlight the flow of the browsing experience. This step helps me to find any edge cases I may have missed designs for and brings the experience and designs to life. The prototypes were used to showcase the product to investors and were shared with the development team to make handoff seamless.
Other designs for Flame:
