Dated: 30-06-2024

Client: Octonion Design Solutions

Duration: 6 months

Team size: 3 members

PROJECT OVERVIEW

Vyldfyre is a digital product designed to help individuals and brands establish a unified online presence through three key services:

  1. Unified Social Media Link – A customizable social link consolidating all social media profiles.
  2. Mini Website – A simple, yet powerful mini-site builder to showcase essential content.
  3. Mini eCommerce Store – A lightweight eCommerce store enabling users to sell products directly.

MY ROLE

As the UX/UI Designer and Front-End Developer on the Vyldfyre project, I led the end-to-end design and development process, including:

  1. User Research
  2. Competitive Analysis
  3. Wireframe and Interactive Mockup Design
  4. User Testing
  5. React-Based Application Development

PROJECT GOAL

The primary goal of Vyldfyre was to empower users with a streamlined way to manage their online presence, combining social media links, essential content, and eCommerce functionality into a single, cohesive platform.

  1. Create a user-friendly platform where users can quickly set up their profiles, add social links, and manage products.
  2. Design a scalable framework for the mini website and eCommerce features, focusing on ease of navigation and intuitive UI.
  3. Develop a seamless user experience that adapts to users’ needs for customization, helping them maintain brand consistency across touchpoints.

DESIGN PROCESS

1. User Research

To understand user needs and motivations, I conducted interviews with freelancers, small business owners, and influencers. Key insights from these sessions included:

  • A desire for a single, shareable link that encapsulates all online profiles.
  • A need for a simple storefront where users can promote and sell products without setting up a full-scale eCommerce site.
  • An interest in customizable design elements to align with personal branding.

Key Findings:

  • Users prioritize speed and simplicity in setup.
  • Personalization and brand coherence are critical.
  • Users appreciate built-in analytics to track engagement and sales.

2. Competitive Analysis

To position Vyldfyre uniquely, I examined competitors like Linktree, Carrd, and Gumroad, focusing on their limitations:

  • Linktree: Limited customization and lack of a mini eCommerce feature.
  • Carrd: Great customization but limited focus on unified social media links.
  • Gumroad: eCommerce functionality but lacks a mini website feature.

These insights shaped Vyldfyre’s offerings, integrating customization options with a consolidated social and eCommerce experience.

3. Wireframe Design

Based on user needs, I sketched wireframes to visualize the layout for each service:

  • Unified Social Media Link: A simple, clean page with links that can be customized with icons and color schemes.
  • Mini Website: A modular layout featuring sections for bios, featured content, and call-to-action buttons.
  • Mini eCommerce Store: A minimal design focused on showcasing products, each with an image, description, and price, alongside a quick checkout option.

The wireframes emphasized intuitive navigation, ensuring that users could seamlessly transition between the link hub, mini-site, and store.

4. Interactive Mockups

Using Figma, I created interactive prototypes to demonstrate the Vyldfyre experience. The mockups featured:

  • Customizable Color Palettes and Fonts: Users could modify colors, fonts, and layouts to reflect their brand identity.
  • Drag-and-Drop Editor: A simple interface allowed users to organize content and links without technical knowledge.
  • Responsive Design: Each element adapted to mobile, tablet, and desktop views to ensure optimal user experience across devices.

5. User Testing

I conducted usability testing sessions with 15 users across different demographics, focusing on setup, navigation, and customization. The feedback led to several key improvements:

  • Enhanced Navigation: Improved the layout and visibility of customization tools.
  • Simplified Checkout Process: Added a single-page checkout for a quicker purchase experience.
  • Personalized Onboarding: Implemented a guided setup for first-time users to facilitate onboarding.

6. Front-End Development

Using React, I developed the front end of Vyldfyre, ensuring a fast, responsive interface. Key technical implementations included:

  • Dynamic Data Binding: Enabled real-time updates as users modified their content and settings.
  • Reusable UI Components: Created a scalable design system to ensure consistency across the unified link, mini website, and eCommerce modules.
  • Integration with Analytics: Built-in analytics provided insights on link clicks, page views, and eCommerce sales, empowering users to measure engagement effectively.

KEY CHALLENGES

Balancing Customization with Usability: Allowing ample customization options while keeping the interface intuitive required careful design considerations and iterative testing.Ensuring Cross-Platform Consistency: Maintaining a seamless experience across mobile and desktop was essential, especially for the eCommerce component.Streamlining Onboarding: Simplifying the setup process for users with limited technical skills was a primary focus, leading to the addition of guided onboarding.

FINAL SOLUTION

Vyldfyre launched as an integrated, user-friendly platform where users could:

  • Share a unified social media link, offering followers a clear view of their online presence.
  • Customize a mini website with essential content, showcasing their personal or brand story.
  • Operate a mini eCommerce store, promoting and selling products directly from their profile.

The product’s modular design enabled users to tailor their Vyldfyre page to their specific needs, while the analytics provided valuable insights on audience engagement.

IMPACT & RESULTS

Post-launch feedback indicated high user satisfaction, with the following metrics observed over the first three months:

  • 40% Increase in Engagement: The unified social media link feature drove a significant increase in profile visits and interactions.
  • 35% Conversion Rate on eCommerce: Users reported effective sales through the mini-store, particularly due to the streamlined checkout.
  • Positive Reviews on Customization and Ease of Use: Many users cited customization options and simplicity as standout features, enhancing overall satisfaction.

CONCULSION

Working on Vyldfyre was a valuable opportunity to blend UX design with React-based front-end development, creating a scalable and user-centered product. By addressing the unique needs of freelancers and small businesses, Vyldfyre emerged as a distinctive digital product, simplifying online presence management.