Sportsplaya
*
Sportsplaya
Sportsplaya
*
Sportsplaya
Sportsplaya
*
Sportsplaya
Empowering sports teams through tokenized NFT sponsorships
Empowering sports teams through tokenized NFT sponsorships
WebApp UI UX | Web Design | Branding | Marketing Collaterals
WebApp UI UX | Web Design | Branding | Marketing Collaterals
Web3, NFT
Web3, NFT
2021-2022
2021-2022
Summary
Sportsplaya is an ambitious Web 3.0 startup committed to empowering young amateur sports teams through sponsorships and remunerations using a tokenized NFT system, leveraging blockchain technology. As the sole designer, I led all design aspects from start to finish for both the NFT marketplace app and marketing website.
Summary
Sportsplaya is an ambitious Web 3.0 startup committed to empowering young amateur sports teams through sponsorships and remunerations using a tokenized NFT system, leveraging blockchain technology. As the sole designer, I led all design aspects from start to finish for both the NFT marketplace app and marketing website.
Opportunities
Insights gathered from focus group and market research analysis.
Align the error message between the platform and the third wallet.
Guide the user through essential and technical workflows (mint, list, buy, sell)
Add a separate category in the collectible storage for the creator's NFT.
Allow direct NFT trading with only wallet connections to increase adoption.
Limited personalization options for video thumbnails.
Solution
Based on 10 Usability Heuristics for User Interface Design by Jakob Nielsen.
Improved Visibility of System Status:
Dynamic progress bars now accompany tasks like creating and listing NFTs, providing users with real-time updates on system status.
Enhanced Error Handling:
Synchronize error messages across the NFT platform and connected wallets for consistency and clarity, helping users resolve issues more efficiently.
Enhanced NFT Video Browsing Experience:
Integrate large UI cards, offering users an immersive browsing experience for sports videos and ensuring easy access to high-quality content.
Implementation of Skeleton Screens:
Introduce skeleton UI, featuring visual placeholders and progress bars to alter the perception of long loading times and reduce user anxiety.
User Control and Freedom:
Separate collection folders for "Purchased NFTs" and "Created NFTs" have been added for better organization.
Provide users the option to upload their video thumbnails or choose from pre-cut video screenshots.
Guide the users with estimated task completion time via Pop-up messages.
Help and Documentation:
Information icons now offer contextual help during NFT creation, guiding users to input correct and relevant information.
Opportunities
Insights gathered from focus group and market research analysis.
Align the error message between the platform and the third wallet.
Guide the user through essential and technical workflows (mint, list, buy, sell)
Add a separate category in the collectible storage for the creator's NFT.
Allow direct NFT trading with only wallet connections to increase adoption.
Limited personalization options for video thumbnails.
Solution
Based on 10 Usability Heuristics for User Interface Design by Jakob Nielsen.
Improved Visibility of System Status:
Dynamic progress bars now accompany tasks like creating and listing NFTs, providing users with real-time updates on system status.
Enhanced Error Handling:
Synchronize error messages across the NFT platform and connected wallets for consistency and clarity, helping users resolve issues more efficiently.
Enhanced NFT Video Browsing Experience:
Integrate large UI cards, offering users an immersive browsing experience for sports videos and ensuring easy access to high-quality content.
Implementation of Skeleton Screens:
Introduce skeleton UI, featuring visual placeholders and progress bars to alter the perception of long loading times and reduce user anxiety.
User Control and Freedom:
Separate collection folders for "Purchased NFTs" and "Created NFTs" have been added for better organization.
Provide users the option to upload their video thumbnails or choose from pre-cut video screenshots.
Guide the users with estimated task completion time via Pop-up messages.
Help and Documentation:
Information icons now offer contextual help during NFT creation, guiding users to input correct and relevant information.
Opportunities
Insights gathered from focus group and market research analysis.
Align the error message between the platform and the third wallet.
Guide the user through essential and technical workflows (mint, list, buy, sell)
Add a separate category in the collectible storage for the creator's NFT.
Allow direct NFT trading with only wallet connections to increase adoption.
Limited personalization options for video thumbnails.
Solution
Based on 10 Usability Heuristics for User Interface Design by Jakob Nielsen.
Improved Visibility of System Status:
Dynamic progress bars now accompany tasks like creating and listing NFTs, providing users with real-time updates on system status.
Enhanced Error Handling:
Synchronize error messages across the NFT platform and connected wallets for consistency and clarity, helping users resolve issues more efficiently.
Enhanced NFT Video Browsing Experience:
Integrate large UI cards, offering users an immersive browsing experience for sports videos and ensuring easy access to high-quality content.
Implementation of Skeleton Screens:
Introduce skeleton UI, featuring visual placeholders and progress bars to alter the perception of long loading times and reduce user anxiety.
User Control and Freedom:
Separate collection folders for "Purchased NFTs" and "Created NFTs" have been added for better organization.
Provide users the option to upload their video thumbnails or choose from pre-cut video screenshots.
Guide the users with estimated task completion time via Pop-up messages.
Help and Documentation:
Information icons now offer contextual help during NFT creation, guiding users to input correct and relevant information.
Usability Testing
Conducted team-based cognitive walkthroughs on Tezos TEST-NET before MVP launch on Tezos MAIN-NET.
Aims to identify and rectify errors/bugs early to address challenges post-launch.
Goals: test core functionalities, identify UX issues, align guiding/error messages, and compile future sub-features.
Usability Testing
Conducted team-based cognitive walkthroughs on Tezos TEST-NET before MVP launch on Tezos MAIN-NET.
Aims to identify and rectify errors/bugs early to address challenges post-launch.
Goals: test core functionalities, identify UX issues, align guiding/error messages, and compile future sub-features.
Usability Testing
Conducted team-based cognitive walkthroughs on Tezos TEST-NET before MVP launch on Tezos MAIN-NET.
Aims to identify and rectify errors/bugs early to address challenges post-launch.
Goals: test core functionalities, identify UX issues, align guiding/error messages, and compile future sub-features.
Brand Concept
The brand and logo draw inspiration from esports, fantasy sports, and gaming, embodying the spirit of 'web3' through the use of color gradients and a complimentary glass effect.
This expands the color spectrum and evokes a sense of liberation and boundless creativity, resonating with the youthful spirit.
Typography
Space Grotesk was chosen for Hero and H1 headings — a proportional sans-serif Google font inspired by Colophon Foundry’s Space Mono. Its legibility and geometric-like, angular design evoke an outer space vibe with a hint of quirkiness, appealing to a younger audience's curiosity.
Body text is set in the sans-serif font InterIt — a versatile font family that consists of 18 styles, including regular and italic variations, with a focus on legibility and readability.
Color Palette
The primary color palette was meticulously chosen to mirror the vibrant essence of fantasy sports, featuring electrifying hues such as electric blue, neon pink, and purple.
When blended in with gradient effects, these colors become soft yet punchy, creating a striking contrast against the dark-mode backdrop.
Visual Identity
Visual Identity
The visual identity revolves around the branding concept, embodying a Web 3 aesthetic inspired by outer space, esports, and fantasy sports. The incorporation of the trendy Glassmorphic (Glass effect) adds an outer space aesthetic touch.
This fusion of visual elements sparks the imagination, particularly appealing to a younger demographic.
Brand Concept
The brand and logo draw inspiration from esports, fantasy sports, and gaming, embodying the spirit of 'web3' through the use of color gradients and a complimentary glass effect.
This expands the color spectrum and evokes a sense of liberation and boundless creativity, resonating with the youthful spirit.
Typography
Space Grotesk was chosen for Hero and H1 headings — a proportional sans-serif Google font inspired by Colophon Foundry’s Space Mono. Its legibility and geometric-like, angular design evoke an outer space vibe with a hint of quirkiness, appealing to a younger audience's curiosity.
Body text is set in the sans-serif font InterIt — a versatile font family that consists of 18 styles, including regular and italic variations, with a focus on legibility and readability.
Color Palette
The primary color palette was meticulously chosen to mirror the vibrant essence of fantasy sports, featuring electrifying hues such as electric blue, neon pink, and purple.
When blended in with gradient effects, these colors become soft yet punchy, creating a striking contrast against the dark-mode backdrop.
Visual Identity
Visual Identity
The visual identity revolves around the branding concept, embodying a Web 3 aesthetic inspired by outer space, esports, and fantasy sports. The incorporation of the trendy Glassmorphic (Glass effect) adds an outer space aesthetic touch.
This fusion of visual elements sparks the imagination, particularly appealing to a younger demographic.