Safari
File
Edit
View
History
Window
Help
Mon Jun 22
9:41 AM
Oyster Labs
Adopting Cryptocurrency Payment
Team
Role
Duration
Tools
3 Designers
2 Developers
1 Product Manager
User Research
Interaction Design
Web/Mobile Design
1/16/2024-Present
FigJam
Figma
Overview
At OysterLabs, we are building the first Web3 native smartphone powered on the Ton Blockchain.
Product Video
With UBS, you can earn data dividends, Web2 cashback, and access a Ton-powered dApp store.
Checkout our product demo video! I designed some of these screens as well :)
Background
Our team sold over 12k phones within three days of launching, establishing a Telegram community with over 10k members.
This project stands out due to the traction and excitement it caused within the Web3 community. We officially launched this product at the 2024 Hong Kong Web3 Festival.
Defining Project Scope & Road Map
First round of preorder has been completed.
How can we prepare for second round based on the feedback from users in the first round?
Preorder Complete
Prepare for Second Round for Sales
Design & Iterate
Launch Day
Gather UX research from feedback
Research- Understanding Community Needs
We conducted user research by gathering insights through our Telegram community
Here are what we gathered based on user pain points and needs
😭
“I want to pay for the phone using cryptocurrency”
😡
“Who uses fiat to checkout for a crypto phone?”
Findings
Users want a new checkout system that supports cryptocurrency payment.
In Web3 users value decentralization, having directly ownership over assets, without relying on centralized intermediaries (credit cards/banks).
Research- First Round Checkout System
We used Stripe as a payment platform for our first round of phone sales.
Pain points
With Stripe, users are unable to pay with cryptocurrency and there was no place for users to enter their wallet address.
This cause a lot of confusion within the community, so our team needed to come up with a new checkout solution to prepare for the next round of sales.
Problem Statement
How can we accommodate our checkout process to the needs of Universal Basic Smartphone (UBS) buyers?
Actionable Insights
Synthesizing research into designs
These are the key functions we need to implement based on research into our second round of phone sales.
Adopt Ton payment
Since we are building on the Ton ecosystem and through research, our team decided to adopt a Ton payment option as cryptocurrency payment.
Allow users to connect wallet
We needed to enable users to connect their wallet, so we are able to link their order information with their wallet address for future rewards.
Input field for shipping
Based on research, users order from various countries, needing an input field for phone number. This was not available on Stripe, so we needed our own system.
Lo-Fidelity Wireframing
Mapping out user flows
FLOW 1 (SELECTED)
Connect Ton Wallet and information input field is located on the same page.
FLOW 2
Connect Ton Wallet first before entering inputting information. This flow is a two-step process.
Prototyping
Design Solutions
Cart Information
Allowing users to pay with Ton coin, so on the order information page we added a converter, so users can see live rates of USD to TON.
Connect Wallet
We added a connect wallet button so users are able to pay using TON, it is also needed to link their wallet address to their order number for future airdrops.
Input Fields
Based on previous research, we found that users needed a place to enter their phone number, so we added a country code input box to accommodate to Web3 users from around the world.
Design System
Our Visual Identity
How we maintained our designs to be organized and consistent.
Buttons
Regular
Enter Email
Verify
Filled
Verify
Loading
example@gmail.com
Error
example
Verify
Invalid email format, please try again.
Regular
0
0
0
0
0
0
Confirm
Partially Filled
4
6
2
0
0
0
Confirm
Filled
4
6
2
2
3
6
Confirm
Loading
4
6
2
2
3
6
Error
0
0
0
0
0
0
Confirm
The confirmation code is invalid. Please try again.
Enabled
Connect Wallet
Disabled
Connect Wallet
Color
Background
#000102
Theme blue
#0098E9
White
#F5F5F7
Gray
#86868B
Border
#313233
Dropdown
#232323
Typography
Inter- H1
Inter- H2
Inter- H3
Inter- Description
Inter- Body
Inter- Navigation
32
30
22
18
16
14
Semi Bold
Semi Bold
Semi Bold
Regular
Regular
Regular
💭🤔
Reflecting back, this was a project filled with constraints and deadlines, but our team was able to overcome the hurdles.
CHALLENGES
Designing with a time-constraint
Because of the fast-paced nature in a start-up, we had limited time to complete user research and launch our product. We had deadlines to meet outlined in our roadmap. This experience trained my ability in rapid prototyping and designing efficiently under pressure.
LESSONS
Collaboration makes the dream work
After handing off to developers, we collaborated closely with the project manager and developers to test designs for bugs. Discrepancies between our designs and the final product were common, highlighting the crucial role of clear team communication in product success.
Oyster Labs
Adopting Cryptocurrency Payment
Team
3 Designers
2 Developers
1 Product Manager
Role
User Research
Interaction Design
Web/Mobile Design
Duration
1/16/2024-Present
Tools
FigJam, Figma
Overview
At OysterLabs, we are building the first Web3 native smartphone powered on the Ton Blockchain.
Product Video
With UBS, you can earn data dividends, Web2 cashback, and access a Ton-powered dApp store.
Checkout our product demo video! I designed some of these screens as well :)
Background
Our team sold over 12k phones within three days of launching, establishing a Telegram community with over 10k members.
$TON surged by 6.78% after OysterLabs announced the Universal Basic Smartphone (UBS).
ByBit
@Bybit_Official
April 11
22.4k
22.4k
22.4k
22.4k
Bought a Ton phone on the spot!
Dr Robertlee 李波
@Bybit_Official
April 11
22.4k
22.4k
22.4k
22.4k
This project stands out due to the traction and excitement it caused within the Web3 community. We officially launched this product at the 2024 Hong Kong Web3 Festival.
Defining Project Scope & Road Map
First round of preorder has been completed.
How can we prepare for second round based on the feedback from users in the first round?
Research- Understanding Community Needs
We conducted user research by gathering insights through our Telegram community
Here are what we gathered based on user pain points and needs
😭
“I want to pay for the phone using cryptocurrency”
😡
“Who uses fiat to checkout for a crypto phone?”
Summarize Findings
Users want a new checkout system that supports cryptocurrency payment.
This cause a lot of confusion within the community, so our team needed to come up with a new checkout solution to prepare for the next round of sales.
Research- First Round Checkout System
We used Stripe as a payment platform for our first round of phone sales.
Pain points
Users want a new checkout system that supports cryptocurrency payment.
In Web3 users value decentralization, having directly ownership over assets, without relying on centralized intermediaries (credit cards/banks).
Problem Statement
How can we accommodate our checkout process to the needs of Universal Basic Smartphone (UBS) buyers?
Actionable Insights
Synthesizing research into designs
These are the key functions we need to implement based on research into our second round of phone sales.
Adopt Ton payment
Since we are building on the Ton ecosystem and through research, our team decided to adopt a Ton payment option as cryptocurrency payment.
Allow users to connect wallet
We needed to enable users to connect their wallet, so we are able to link their order information with their wallet address for future rewards.
Input field for shipping
Based on research, users order from various countries, needing an input field for phone number. This was not available on Stripe, so we needed our own system.
Lo-Fidelity Wireframing
Mapping out user flows
FLOW 1 (SELECTED)
Connect Ton Wallet and information input field is located on the same page.
FLOW 2
Connect Ton Wallet first before entering inputting information. This flow is a two-step process.
Connect Wallet
Pay with TON
Prototyping
Design Solutions
Cart Information
Allowing users to pay with Ton coin, so on the order information page we added a converter, so users can see live rates of USD to TON.
Connect Wallet
We added a connect wallet button so users are able to pay using TON, it is also needed to link their wallet address to their order number for future airdrops.
Input Fields
Based on previous research, we found that users needed a place to enter their phone number, so we added a country code input box to accommodate to Web3 users from around the world.
Design System
Our Visual Identity
How we maintained our designs to be organized and consistent.
Buttons
Regular
Enter Email
Verify
Filled
Verify
Loading
example@gmail.com
Error
example
Verify
Invalid email format, please try again.
Regular
0
0
0
0
0
0
Confirm
Partially Filled
4
6
2
0
0
0
Confirm
Filled
4
6
2
2
3
6
Confirm
Loading
4
6
2
2
3
6
Error
0
0
0
0
0
0
Confirm
The confirmation code is invalid. Please try again.
Enabled
Connect Wallet
Disabled
Connect Wallet
Color
Background
#000102
Theme blue
#0098E9
White
#F5F5F7
Gray
#86868B
Border
#313233
Dropdown
#232323
Typography
Inter- H1
Inter- H2
Inter- H3
Inter- Description
Inter- Body
Inter- Navigation
32
30
22
18
16
14
Semi Bold
Semi Bold
Semi Bold
Regular
Regular
Regular
💭🤔
Reflecting back, this was a project filled with constraints and deadlines, but our team was able to overcome the hurdles.
CHALLENGES
Designing with a time-constraint
Due to the fast-paced start-up environment, we had limited time for user research and product launch, working under strict roadmap deadlines. This honed my skills in rapid prototyping and efficient design under pressure.
LESSONS
Collaboration makes the dream work
After handing off to developers, we worked closely with the project manager and developers to test for bugs. Design discrepancies highlighted the crucial role of clear communication for product success.
Thanks for stopping by!
I'm always open to collaborating or chatting about anything design. Let's connect :)
Thanks for stopping by!
I'm always open to collaborating or chatting about anything design. Let's connect :)
Oyster Labs
Adopting Cryptocurrency Payment
Team
Role
Duration
Tools
3 Designers
2 Developers
1 Product Manager
User Research
Interaction Design
Web/Mobile Design
1/16/2024-Present
FigJam
Figma
Product Video
With UBS, you can earn data dividends, Web2 cashback, and access a Ton-powered dApp store.
Checkout our product demo video! I designed some of these screens as well :)
Background
Our team sold over 12k phones within three days of launching, establishing a Telegram community with over 10k members.
This project stands out due to the traction and excitement it caused within the Web3 community. We officially launched this product at the 2024 Hong Kong Web3 Festival.
$TON surged by 6.78% after OysterLabs announced the Universal Basic Smartphone (UBS).
ByBit
@Bybit_Official
April 11
22.4k
22.4k
22.4k
22.4k
Bought a Ton phone on the spot!
Dr Robertlee 李波
@Bybit_Official
April 11
22.4k
22.4k
22.4k
22.4k
Defining Project Scope & Road Map
First round of preorder has been completed.
How can we prepare for second round based on the feedback from users in the first round?
Research- Understanding Community Needs
We conducted user research by gathering insights through our Telegram community
Here are what we gathered based on user pain points and needs
😭
“I want to pay for the phone using cryptocurrency”
😡
“Who uses fiat to checkout for a crypto phone?”
Summarize Findings
Users want a new checkout system that supports cryptocurrency payment.
In Web3 users value decentralization, having directly ownership over assets, without relying on centralized intermediaries (credit cards/banks).
Research- First Round Checkout System
We used Stripe as a payment platform for our first round of phone sales.
Pain points
With Stripe, users are unable to pay with cryptocurrency and there was no place for users to enter their wallet address.
In Web3 users value decentralization, having directly ownership over assets, without relying on centralized intermediaries (credit cards/banks).
Problem Statement
How can we accommodate our checkout process to the needs of Universal Basic Smartphone (UBS) buyers?
Actionable Insights
Synthesizing research into designs
These are the key functions we need to implement based on research into our second round of phone sales.
Adopt Ton payment
Since we are building on the Ton ecosystem and through research, our team decided to adopt a Ton payment option as cryptocurrency payment.
Allow users to connect wallet
We needed to enable users to connect their wallet, so we are able to link their order information with their wallet address for future rewards.
Input field for shipping
Based on research, users order from various countries, needing an input field for phone number. This was not available on Stripe, so we needed our own system.
Lo-Fidelity Wireframing
Mapping out user flows
FLOW 1 (SELECTED)
Connect Ton Wallet and information input field is located on the same page.
FLOW 2
Connect Ton Wallet first before entering inputting information. This flow is a two-step process.
Connect Wallet
Pay with TON
Prototyping
Design Solutions
Cart Information
Allowing users to pay with Ton coin, so on the order information page we added a converter, so users can see live rates of USD to TON.
Connect Wallet
We added a connect wallet button so users are able to pay using TON, it is also needed to link their wallet address to their order number for future airdrops.
Input Fields
Based on previous research, we found that users needed a place to enter their phone number, so we added a country code input box to accommodate to Web3 users from around the world.
Design System
Our Visual Identity
How we maintained our designs to be organized and consistent.
Buttons
Regular
Enter Email
Verify
Filled
Verify
Loading
example@gmail.com
Error
example
Verify
Invalid email format, please try again.
Regular
0
0
0
0
0
0
Confirm
Partially Filled
4
6
2
0
0
0
Confirm
Filled
4
6
2
2
3
6
Confirm
Loading
4
6
2
2
3
6
Error
0
0
0
0
0
0
Confirm
The confirmation code is invalid. Please try again.
Enabled
Connect Wallet
Disabled
Connect Wallet
Color
Background
#000102
Theme blue
#0098E9
White
#F5F5F7
Gray
#86868B
Border
#313233
Dropdown
#232323
Typography
Inter- H1
Inter- H2
Inter- H3
Inter- Description
Inter- Body
Inter- Navigation
32
30
22
18
16
14
Semi Bold
Semi Bold
Semi Bold
Regular
Regular
Regular
💭🤔
Reflecting back, this was a project filled with constraints and deadlines, but our team was able to overcome the hurdles.
CHALLENGES
Designing with a time-constraint
Due to the fast-paced start-up environment, we had limited time for user research and product launch, working under strict roadmap deadlines. This honed my skills in rapid prototyping and efficient design under pressure.
LESSONS
Collaboration makes the dream work
After handing off to developers, we worked closely with the project manager and developers to test for bugs. Design discrepancies highlighted the crucial role of clear communication for product success.