Brickin Protocol
Web3 Product Design
Client
Brickin Protocol
My Role
Sole Designer
User Researcher
Concept
Tools
Figma
Adobe
Timeline
One Month
Overview
In the Summer of 2023, I was entrusted with a pivotal role by a startup client preparing an MVP for the Sui x Kucoin Lab Summer Hackathon: they needed me to shape the direction of their new product, named Brickin Protocol, steering it from a B2C focus towards a comprehensive B2B design.
Within the demanding constraints of a single week, I served not only as the sole designer but also facilitated alignment between the product management and developer teams. My goal was to ensure that the user experience aligned perfectly with the business ambitions, all the while racing against a tight deadline.
During a focused one-week period, I reworked the user journey for our platform. This new design strongly connected with our target users, earning us the 'Community Favorite' award. Because of this success, we were able to secure a $200k investment, showing the strength and impact of the design work I provided.
The Challenge
Following our initial onboarding meeting, I examined the previous B2C design to identify key features within the existing products. Delving deeper into the product managers' notes, I discerned several discrepancies between the user experience and the desired business goals. Subsequently, I pinpointed the most pressing issues and realigned design priorities before moving to the conceptualization phase. As the only designer, I naturally assumed the role of mediator among all stakeholders.
Intitial Research
Web3 game startups frequently find themselves unable to create a dedicated NFT trading platform. A significant 66% of such platforms currently cater primarily to B2C interactions, often sidelining B2B considerations and contract optimization. They also present a varied landscape in terms of pricing structures. As the sole designer on the team, I must delve deep into understanding these startups' nuanced needs. Below are the snapshots from the summary of user interviews and their current product.
“We've diverted all our resources into development and don’t have additional front-end engineers or designers to create a platform specifically for trading our game assets. Furthermore, many teams face the same challenges we do; other platforms either offer a poor user experience or lack customization options based on the game company's needs.”
— Feedbacks from Current Web3 Game Developers
Current Product Snapshots
The Objective
After conducting user interviews and current product reviews, my objective was to create an intuitive, user-centric interface tailored to the unique needs of Web3 game startups. I took on the challenge of simplifying intricate trading processes, ensuring seamless user interaction resonates deeply with the startup ecosystem. Complementing my design initiatives, the broader business goal is to fill the existing market void. With my design as the foundation, we aim to establish ourselves as the go-to solution for these startups, addressing their challenges and carving a niche in this rapidly evolving market.
Although I aimed to create a comprehensive product, I had just three days to develop the initial prototype. As a result, I prioritized defining the user journey for each function, ultimately selecting a core function to emphasize. Following in-depth discussions with product managers and leadership, it became clear that focusing on the "pool creation" experience was the optimal and logical choice, especially since it was their standout feature for the hackathon.
The User
While the primary target audience for the product is Web3 game startups, the user journey recognizes several distinct user groups within the system. The first group comprises first-time users who do not have an active pool for trading. The second group consists of users with an active trading pool. Given the product's nature as a control console, it can be summarized that first-time users lack a pool, whereas returning users maintain an active trading pool.
Focused Experience Pillar (below)
User Flow (below)
Intital Wireframe View (below)
First Prototype
After analyzing the user flow, I quickly created the first prototype, paving the way for future improvements and redesigns. I was able to come up with preliminary solutions based on the flow within a day. With only two days left, the final prototype was in sight.
In just one day, I identified the style and created the initial prototype. Given the tight schedule, it was not perfect. However, by utilizing the knowledge I had gained from previous research on user flows, I was able to successfully implement two essential functions: creating a pool and monitoring its status. After consulting with the product managers, I discovered several issues with this version of the design.
First Prototype Snapshots
User Flow & Product Research Revisit
With a mere two days left to craft the final design, I had to collaborate closely with engineers to develop a functional prototype. This required me to carefully incorporate all previous design feedback, such as adjustments to UX writing and clarifying ambiguous fields in the design, to enhance and refine the overall user experience with the correct features.
Also, the most common feedback from product managers pertained to incomplete user flows. While these might suffice for the initial prototype, they necessitate an overhaul to align with the business objectives. Consequently, I revisited the experience pillar and the original plan to craft a more comprehensive product flow and an enhanced information architecture diagram.
Updated Experience Pillar (below)
Updated User Flow (below)
Final Wireframe View (below)
Final Prototype
After in-depth discussions with the engineering team, I succeeded in developing a final prototype that garnered the consensus of both product managers and engineers. However, due to the project's inherent time constraints and limited access to market data, there are minor design discrepancies, such as uneven spacing and font inconsistencies, that warrant attention in future iterations. Most critically, I was able to meet both my personal objectives and the team's goals within the stipulated timeframe, laying a solid foundation for further refinement and optimization.
Final Prototype Snapshots
Final Product Demo in Figma (below)
Outcome
Despite the limited time constraint, I collaborated closely with protocol and front-end engineers to submit the prototype within a week. Although we did not secure prizes designated for best functions, my design was honored with the "Community Favorite" award and attracted $200k in future investments from investors.
Reflection
Due to the time constraints on the project, the final design still needs some refinements. Various design-related aspects, such as spacing and fonts, require further optimization. Collaboration is a vital element in this process. Although I had the ambition to produce a more finalized design, the necessity to hand over the work to the engineering teams within a stringent timeframe took precedence.
As I navigated the process of building the final prototype, I was constantly advocating for the user experience and pushing for the integration of essential features for the product demo. These discussions with the product managers and engineers were not only resultful but sparked several inspirations for their existing product lines.
If given another opportunity or additional time to work on this project, I would immerse myself more deeply in product research. Despite the positive reception of the outcome, it became evident that a more nuanced understanding of B2B customers was necessary. The current state of the final prototype closely mirrors their existing B2C product design, indicating a need for further exploration and depth in designing specifically for B2B products.
An Award-Winning Design Amplifying Client's Brand Value and Voice
The client expressed satisfaction with the designs and concepts that emerged from my design process. Furthermore, they were able to incorporate several innovative features inspired by this project into their current B2C product, EZSwap
Contribute to Raise 1M USD Investment for Client
After the hackathon, the client asked me to use the accomplished results to redesign their current product from Eswap(https://www.ezswap.io). After a few months of modifications and feature redesign, I was able to help the client turn the 250k investment interest into a 1M dollar final deal.
https://dailycoin.com/eos-venture-fund-backs-innovative-nft-dex-protocol-ez-swap-in-1m-funding-round/
Website Showcase
Explore