top of page
OP3N
Empowering Users with Informed Checkout and Flexible Payment Options
What is OP3N?
OP3N is a B2C E-Commerce and Community platform, bridging the gap between Web2 and Web3 for Gen Z interested in Web3. I led the design of the NFT purchase experience. The redesign garnered 5000 new users within a four-month.
MY ROLE
UIUX Designer
TEAM
2 pms,
3 designers,
10+ engineers
TOOLS
Figma, Zeplin
TYPE
Work
TIMELINE
Aug 2022 - Nov 2022
Design Question
How can our design effectively address the previous limitation of one-item purchases while ensuring a seamless and consistent shopping experience for Gen Z users interested in Web 3, considering the incorporation of merchandise and ticketing into the system?
Process
We initiated the process by reassessing our previous design, pinpointing key issues that needed addressing.
Breakdown Of The Problem
🤯 Fragmented Shopping Experience
Users were restricted to purchasing one item at a time, leading to a fragmented shopping experience that required multiple transactions.
🖐️ Lack of Visibility and Flexibility
Users had difficulty reviewing and managing their cart contents, with limited visibility and editing capabilities during the checkout process.
🆕 Addition of new products
Recognizing the need for specialized checkout flows for different product categories like merchandize and ticketing, our key focus was to maintain a consistent user experience throughout the purchase process.
Overview Of The Old Checkout Flow
Select NFT
Limited to purchasing one item at a time, with no option to edit quantities
Select NFT
Limited and inflexible cryptocurrency payment options
Select Payment Method
Unclear progress indicators, causing confusion for users
Select Payment Method
Complicated connection process, multiple steps and uninformed waiting period
Payment Method: Fiat
Disrupted user experience due to reliance on third-party payment methods
Payment Method: Fiat
Lack of purchase information, of the benefits they receive from purchasing the NFT
Users
Through a product triad review with our cross-functional team members, we clearly identified our users and the specific goals they hope to accomplish on our platform. This enables us to tailor the experience based on users needs.
Name Taylor Age 21
Occupation Student and Aspiring Content Creator
Goal To explore and immerse in the world of Web 3 through OP3N, serving as an introduction to this new experience.
Challenge Limited familiarity with Web 3
Behavior Frequently follows creators and trends online; attracted to OP3N for exclusive content from favorite artists.
Quote "I'm eager to dive into the Web 3 space, and OP3N seems like the perfect place to start. I want to discover, purchase, and own exclusive content from the creators I admire, making each experience unique and memorable."
Purchase Flow
Two design challenges we identified, based on our understanding of users, are to ensure users can seamlessly transition from the familiar Web 2 purchase flow to the newer Web 3 purchase flow and to guarantee a consistent user experience when purchasing NFTs, merchandise, or tickets on our platform.
To tackle these challenges, we conducted comprehensive research on the existing purchase flows and defined a new user flow for OP3N users.
Web 2 checkout flow
Web 3 checkout flow
New OP3N checkout flow
process
The product review also helped us defined the design goals to ensure the best user experience for our users on OP3N's checkout.
Design Goal
🕹️ Enhance Control
Empower users over their purchases, allowing them to make adjustments to quantities and tailor their orders according to their preferences.
👀 Improve Visibility
Improve visibility to empower users with a clear understanding of their selections and pricing information, enabling them to make informed decisions.
☺️ Seamless journey
Seamless and user-friendly checkout journey to enhance overall satisfaction, ensuring users a smooth experience when completing their purchases.
Solution
Final Outcome: Highlights
Each highlight captures an aspect of the new OP3N experience. It calls out which design goal it adheres to, what problem its solving and what the solution is.
Merchandize - Desktop - Dark Mode
Ticketing - Desktop - Dark Mode - Select Date
Design Goal: Enhance Control
Flexible Cart Editing
Problem
Unable to edit items once users entered the checkout process, resulting in users abandoning items they intended to purchase
Solution
We increased users flexibility to edit their products directly without leaving the cart. We addressed the previous limitations and improved user control.
Merchandize - Mobile - Light Mode
Ticketing - Desktop - Dark Mode - Select Tier
Design Goal: Improve Visibility
Clear Progress Indicators
Problem
Previous versions of the checkout flow had ambiguously named steps, causing confusion and hindering users' understanding of their progress.
Solution
we designed visual representation of their progress to easily understand what was expected and navigate through the checkout process with confidence and clarity.
Merchandize - Mobile - Light Mode
Ticketing - Desktop - Dark Mode - Select Tier
Design Goal: Improve Visibility
Transparent Purchase Summary
Problem
The absence of purchase information made it challenging for users to verify their selections and confirm their purchase with confidence.
Solution
we designed a transparent purchase summary sticked on the right of the screen to provide users with constant visibility of their cart contents.
Design Goal: Enhance Control
Flexible Payment Options
Problem
Users were redirected to external platforms to finalize their transactions which disrupted the user experience and caused inconvenience.
Solution
we designed flexible payment options for users to easily switch between credit card payment and cryptocurrency payments. Users can also quickly make payments directly through their connected wallets
Design Goal: Enhance Control
Confirmation Pages
Problem
After completing a purchase, users lacked a comprehensive view of their items and the associated benefits. Additionally, the confirmation pages were not tailored to each product type, leading to a disjointed experience.
Solution
Upon completing a purchase, users now have a comprehensive view of their purchased items and the benefits they will receive. For NFT purchases, the confirmation page invites users to enter the chat room associated with their purchased NFT, fostering community engagement and further exploration.
Solution
For ticket purchases, the confirmation page provides access to both the event ticket and the NFT included with the ticket. Users are also provided with event details and the flexibility to easily look up the event location on OP3N. These personalized confirmation pages ensure a cohesive and tailored experience for users, enhancing the overall journey on OP3N.
Impact
During my experience at EST Media, we achieved significant milestones in user acquisition and satisfaction. Within six months of launching our first MVP, we successfully onboarded approximately 6,000 new users. This impressive growth continued as we gained an additional 5,000 users within four months following our reimbursement efforts.
The positive feedback from our users on our platform has been overwhelming, leading to a significant decrease in support requests by 68%.
One notable observation from our user data is that 76% of our users did not previously possess a crypto wallet. Through our platform's introduction to the Web3 community, we successfully encouraged these more conservative Web2 users to explore and embrace the new and trending concept of cryptocurrency.
I am proud to have contributed to this transformative journey, introducing users to innovative technologies and fostering their engagement within the Web3 space. The results achieved at EST Media demonstrate my ability to drive user adoption, enhance user satisfaction, and effectively bridge the gap between traditional and emerging technologies.
bottom of page