AONVERSE
The Challenge
Aonverse was one of my most ambitious projects, taking it from concept to completion with a highly skilled team.
Content creators, cosplayers, and fandom communities lacked a dedicated platform that truly integrated AI, gaming elements, and deep customization into a social network. While existing platforms offered some community-building tools, none fully supported creative freedom, influencer monetization, and community engagement through gamification.
We aimed to create an AI-powered social network tailored for these communities. Aonverse needed to provide customizable profiles, in-app economies, AI remixing tools, and a marketplace—all while fostering a highly engaged and interactive environment.
With a vision to blend AI, gaming, and social networking into a seamless experience, we built Aonverse from the ground up using React, React Native, and mobile-first development principles. Our work included research, wireframing, UI/UX design, branding, and full-stack development, ensuring every step was crafted with the user in mind.
Research and Concept Development
We started by conducting in-depth research on cosplayers, content creators, and influencers to understand their needs, pain points, and desires in a social platform. This process included:
Interviews & Surveys: We spoke with cosplayers, artists, and influencers to uncover gaps in existing platforms. Many expressed frustration with rigid profile systems, lack of discoverability, and limited monetization options.
Competitive Analysis: We analyzed platforms like Twitch, Patreon, and Instagram, noting both their strengths and limitations.
User Personas: We developed key personas, including:
The Influencer: Needs engagement tools, monetization features, and strong community-building options.
The Fan: Wants interaction, gamification, and access to exclusive content.
The Creator: Requires AI tools, customization, and an easy-to-use interface for selling digital or physical goods.
This research informed our initial feature set, ensuring we built Aonverse to serve its core audience effectively.
Basic Features: Login & Profiles
With a clear understanding of our users, we moved on to designing the foundational features: user login and profile creation.
Sketching & Wireframing
We started by creating low-fidelity sketches to map out the core user flow for sign-ups and profiles.
These sketches were refined into wireframes, which helped us visualize the placement of essential elements.
We iterated based on team feedback, ensuring ease of access and usability.
Profile System Design
User Avatars & Banners: Every user needed a unique identity, so we built a profile system that allowed custom profile pictures and dynamic banners.
Follower & Supporter System: Users could follow creators and offer monetary support through integrated supporter features.
Messaging & Notifications: To enhance community engagement, we implemented direct messaging and a robust notification system.
Development & Implementation
React & React Native: We built the frontend with React for web and React Native for mobile, ensuring seamless performance across devices.
Secure Authentication: User authentication was implemented using OAuth, email verification, and social loins.
Database & Backend: Profiles were stored efficiently using Node.js and Firebase, allowing real-time updates.
Customization Features
Customization was a core component of Aonverse, designed to empower users to express their individuality and build unique online personas.
Design & Wireframing
We developed several iterations of profile customization sketches, gathering feedback from our user base to refine our approach.
Wireframes mapped out how users could modify their profile layout, colors, and display preferences.
The team collaborated closely to ensure that customization did not interfere with platform performance.
Customization Examples:
Key Customization Features
Theme Customization: Users could choose from a variety of preset themes or create custom themes with colors and fonts.
Profile Layout Editing: We implemented a drag-and-drop system for organizing profile sections.
Badges & Achievements: A gamified reward system allowed users to display unique achievements on their profiles.
Custom Profile URLs: We introduced personalized URLs to enhance brand identity and discovery.
Development & Technical Implementation
Dynamic UI System: Built with React and Tailwind CSS, allowing real-time preview of customization changes.
Database Structuring: Customization settings were stored in Firebase to ensure smooth profile loading.
Cross-Platform Syncing: React Native integration ensured that profile changes applied consistently across mobile and web.
Marketplace Features
A key part of Aonverse was the marketplace, allowing creators to sell digital and physical goods directly to their followers.
Marketplace Planning & Wireframing
We researched existing creator marketplaces to identify best practices and pain points.
Wireframing sessions focused on streamlining the buying and selling process for an intuitive user experience.
User testing helped us refine product categories, search functionality, and payment flows.
Key Marketplace Features
Product Listings: Creators could showcase items with high-quality images, descriptions, and pricing options.
Digital & Physical Sales: Support for selling both downloadable content (art, music, templates) and physical merchandise.
Integrated Payment System: Secure transactions via Stripe and PayPal integration.
Community Reviews & Ratings: Buyers could leave feedback, ensuring trust and credibility.
Development & Technical Implementation
Frontend Development: Built with React and Redux for efficient state management.
Backend Integration: Developed using Node.js and Firebase, handling inventory, transactions, and order processing.
Mobile Adaptation: React Native ensured a seamless shopping experience on both web and mobile.
AI Remixing Features
Aonverse’s AI-powered remixing tools allowed users to transform content in unique and creative ways.
AI Remixing Planning & Wireframing
We designed sketches and wireframes to visualize how users could remix photos, videos, and audio.
User testing informed us on how to make the tools accessible while maintaining professional-grade results.
Key AI Remixing Features
AI Filters & Effects: Users could apply AI-generated filters and artistic styles to images and videos.
Music Remixing: AI-powered tools enabled users to remix audio, adjusting pitch, tempo, and layering effects.
Content Mashups: Users could merge multiple media elements into creative new content.
AI-Driven Suggestions: The system recommended remix styles based on user preferences and past activity.
Development & Technical Implementation
Machine Learning Integration: Built using TensorFlow.js for in-browser AI processing.
Cloud Processing: Heavy AI tasks were offloaded to cloud servers for faster performance.
Cross-Platform Compatibility: Ensured seamless functionality on web and mobile via React Native.
Final Thoughts & Lessons Learned
Aonverse was a groundbreaking project that required deep collaboration across design, development, and user experience teams.
Key Takeaways
User-Centric Design: Prioritizing user feedback led to intuitive, engaging features.
Scalability: The use of React, React Native, and Firebase ensured a seamless cross-platform experience.
AI & Gamification: Integrating AI-driven content remixing and gamification enhanced user engagement.
Building Aonverse reinforced the importance of iteration, collaboration, and innovation in creating a next-generation social platform.
Like this project
0
Posted Feb 12, 2025
I created the project start to finish. I conceived it, designed it and lead the projects with a small team of Designers and Developers.
Kenza - Mitsubishi US
Design Web 3 App
Colonial Life/Unum - Design and Light Development