Overview
Leapstart is a B2C web-based NFT crowdfunding platform to empower brands and creators to achieve their ambitions, and I spent 3 months from Sep. to Dec. 2022, working as a Product Designer for this DeFi product at a startup, ContentFi. My task was to bring the technical MVP to the next level for the beta-testing in a lean agile environment where both design and block-chain implementation go side by side.
-
Led the product design for LeapStart from the MVP to the beta-version product in a span of 3 months through creating 83+ pages of design, and leveraging management and engineering knowledge, resulting in 95% stakeholder satisfaction.
-
Product Designer
Outline product features and coordinate task assignments
Create Hi-fi UI and prototypes.
User testing for design iteration.
Collaborate with SWEs on QA sessions and block-chain user flows
-
Host weekly sync meeting
1 Project Manager
2 Product Designer (Including me)
1 Front-end Engineer
2 Back-end Engineer
1 MarketingOutsourced engineers
-
Research & design: 10 weeks
Total project: 4 months
Note: Due to the non-disclosure agreement, some processes & results are skipped or desensitized on purpose.
STRATEGY
Before UX design… product strategies have to be covered
The problem we are facing
ContentFi, a startup I worked for, has been developing a combination of two products, aiming to reshape a holistic NFT ecosystem. At the time, one of the technical MVPs, LeapStart, was ready, however, the majority of the user experience and features never got a chance to be developed.
1. LeapStart(Left), a NFT crowdfunding platform 2. FanMake (Right), a secondary NFT marketplace.
This case study will focus on LeapStart configuration flow for producers.
Understand overall goals & features
Since the startup was at its very early stage, the tasks and requirements weren’t clear and I wasn’t sure where to start. Hence, my first step was to spend time understanding the Web3.0 industry through competitive audit, and took the initiative to work on the strategy level to outline the overall product requirements with the PM. I helped coordinate timeline planning and division of design tasks to another product designer.
Producer Goals
Know how to initiate a crowdfunding project
Manage NFTs easily
Feel helpful in marketing out new projects
Get engaged with the backers
Backer Goals
Know the details of crowdfunding projects
Get noticed when there are new updates out there
Feel secured in the pledges
Stay connected with the projects they pledged
Business Goals
Become an industry leader
Keep aligned between two in-house products
Increase the number of the signup users
Increase the discoverability of the products
Prioritize features & divide work
Based on the product requirement sheet with the feature prior I did, we decided to set our time frame from initial 3 weeks to 2 months, and I focused on one of main features, Project Configuration System, that the users are business producer.
Features and prioritization (my progress documents)
PROBLEM
The producer, as a brand, needs an intuitive way to easily manage & market out the project, because a crowdfunding process is a complex & long journey.
Due to complexity and lengthy configuration processes, users as producers care about the ease of NFT management and marketing engagement. Hence, our product, LeapStart, will allow users to easily complete various types of NFT crowdfunding by providing an scalable NFTs configuration framework with marketing methods, which will affect either corporates or individual users who have their own brands.
How I got there?
REFRAME
Expanding and refining current MVP into beta product with comprehensive features.
VALIDATE
Conduct internal usability testing with PM, SWEs, marketing, and stakeholders to de-risk investment.
RESEARCH & ITERATE
Iterating on scalable configuration framework, involving business modules, user flows & interface design.
SCALE & REPEAT
Ongoing system-level iterations to support more user cases.
REFRAME
Expand and build a scalable NFT configuration framework
The idea of NFT crowdfunding started with the technical MVP built in ETHGlobal Hackathons, so the configuration framework needed both UX & UI upgrades to ensure the users are able to complete their NFT crowdfunding.
Some issues I asked at the time: What inputs does a user need to fill in? How to make the overall process digestable and friendly? How to create design consistency between two products?
For the beta testing, given complexity of the tech-development of smart contracts, we decided to stagely open the different types of crowdfunding. To achieve this objective, a scalable configuration framework was needed, and I mainly focused on 3 key areas for our iterations:
3 ITERATION AREAS
Business Module (Strategy)
What are the user needs per context and what use cases are relevant overall?
Configuration UX (2B flow)
How to navigate insights across project configuration & NFT managment?
Marketing UI & UX (B2C flow)
Waht is the UI/design system for project marketing and how’s it related to LeapStart?
RESEARCH & ITERATE
1. Re-evaluating NFT business modules for users
First, I consolidated our research to understand our target users’ needs and then worked to identify & prioritize feature choices. This list of data allowed us to establish business use case categories & navigation hierarchy and to ask customers about feature prioritizations.
▽ Feel free to click on the tabs on the left-hand side below see more details.
2. Creating scalable configuration UX
Parallel to the business modules, I sought to find a navigation system that’d accommodate and grow with the “various types of crowdfunding” services. After conducting analogous products and iterations, I landed on a “tab bar + expansion“ structure to reduce disorientation while building in future scalability.
▽ Feel free to click on the tabs on the left-hand side below see more details.
3. Expanding the visual system for marketing UX
Considering the diversity of business needs, I used the shared design system to make a series of marketing UI cards, so that this visual system can be adapted to various business and market out projects.
▽ Feel free to click on the tabs on the left-hand side below see more details.
VALIDATE
Finding a clearer path forward
Before the beta testing, I built a concept prototype and had our internal users do a talk-a-loud walk through (n=8, PM, SWEs, marketers, designers and stakeholders). I achieved:
- 86% task completion
- Business module validation & preferences for the 1st release
- 90% stakeholder satisfaction
Meanwhile, some challenges were found:
Implementation Issues
The ways of creating & editing interactions are hard for the front-end developer to implement technically.
Marketing Issue
In the best interest of a user, there should be some way to bypass the bundling step in the process to avoid additional fees.
Blockchain Transaction Issue
Considering the natures of blockchain technologies, certain actions will incur additional fees along the configuration process.
Below illustrates the research-based iteration for the Configuration Framework:
▽ Feel free to click on the tabs on the left-hand side below see more details.
SCALE & REPEAT
Building a design system for LeapStart
Once I anchored the product spec, I went into the details of the design system from pattern, color, accessibility, and responsiveness that was unique to LeapStart. I continued iterating both the products and the design system through more user feedback and feedback from our team members (for instance, our SWE pointed out key improvement areas when building out the blockchain configuration flow).
▽ Feel free to click on the tabs on the left-hand side below see more details.
FINAL DESIGN
Shipping it to the small portion of the world
As of December 2022, the configuration framework design is ready and under construction for the upcoming beta testing. We are looking forward to observing usage from a much larger scale, receiving feedback, and continuing to enhance the user experience.
Below are some snapshots of our final design after desensitization.
TAKEAWAYS
What I learned from the experience?
This was my first time to work in a lean agile framework, so the intensitive communication with both back & front-end engineers was valuable experience. I was so happy to see the product coming along nicely throughout the process, and some reflections are:
Failing fast
It wasn't easy to admit that we overlooked the potential blockchain technical influence on the UX initially, but I'm glad that we made the commitment as a team to pivot early on before the beta testing.
Building a vision
Despite the time crunch, we built and validated a design vision so that leadership understood the complexity and return in investment when we invest in a scalable design framework.
Growing is inevitable
As much as we anticipated scalability in our design, we acknowledge that we will need to continue growing this framework with the platform itself. Our goal is to bring users along with a consistent UX pattern.
Thank you for reading!
You Might be interested in.
SCI-Arc Fabrication Shop
Illustration Studio E-Commerce Website