Vatica

Check it out Vatica mockup image showing macbook

An online platform that allows creators to showcase their work, cultivate community and receive direct support from their fans.

Roles:

Fullstack Developer

UX/UI Designer

Founder

Tools:

Next.JS

Typescript

Node.JS

PostgreSQL

Figma

Backblaze

TailwindCSS

VPS

Context

Vatica is a web app revolutionizing how creators connect, collaborate, and thrive.


The concept of Vatica was conceived a few years ago, at a time when I was deeply engrossed in music production. During this time, I recognized a significant gap in the market concerning social media platforms’ ability to connect creatives at a local level. As my passion for music grew, so did my desire to connect with like-minded creatives who shared my artistic journey. However, I found it challenging to locate other creatives in my area. In addition, I loved learning more about the creative process and the different people involved, from production to songwriting to audio engineering, etc. Finding this information was tricky because most platforms didn’t offer an easy way to credit people. If I was lucky, the artist would leave the name of those involved in the captions, allowing me to search for them and their work on Google.


Driven by these pains, I envisioned a platform enabling the seamless discovery of talented individuals and allowing fans to dive deeper into their favorite content.


As I engaged with other creators, their insights helped to illuminate additional unmet needs within the creative community. Some of these needs included monetization features, portfolio customization, and the ability to have a community thread on your profile.


Vatica encompasses a broad spectrum of functionalities and features, including but not limited to group instant messaging, file uploading, payment processing, multi-source content management, VPS management, and authorization.

Problem

Vatica serves as a platform that caters to two distinct groups: creators and enthusiasts (fans), with its primary focus centered around creators.


Creators are individuals who possess the talent and passion for crafting captivating and inspiring content that can span various domains such as music, photography, videography, comedy, and more.


Within this group, several pain points can be identified:


Enthusiasts are individuals who derive enjoyment from the content produced by creators. Some may also demonstrate a willingness to provide financial support. For this group, the following pain points can be spotted:

Solution

I designed and built a web platform that allows creators to publish their work from various sources, receive donations, chat with fans directly on their profiles, and collaborate with other creators.


I worked to increase creator discoverability by:

  1. Implementing a search feature that allows filtering based on text, location, profession, or creative field.
  2. Restricting upload capabilities to verified creators only. This way, creator content is not overshadowed by unrelated casual posts.
  3. Allowing anyone to repost, share, and collect creative work.
  4. Promoting accreditation of collaborators along with their role so that they can be recognized.

Execution & Design

Throughout Vatica’s development, I learned various technologies and concepts, including Javascript/Typescript, NextJS, GraphQL, PostgreSQL, Figma, design principles and systems, HTML/CSS, and Docker.


I encountered a diverse set of challenges and made my fair share of mistakes, requiring countless iterations and refactors.


The design underwent numerous cycles as I acquired knowledge and honed my skills. Initially, I pursued a boxy aesthetic and relied on intuitive spacing. This approach led to an outdated appearance and a sense of visual disharmony. Recognizing the need for refinement, I embarked on an extensive journey of research and exploration in hopes of finding a better way to design. Eventually, I understood the principles that would enable me to achieve the desired visual identity.


Ultimately, I adopted rounded corners and leveraged the interplay between the lightness and darkness of colors to establish a nuanced sense of elevation. Moreover, I ensured the content took center stage and was the primary focus.

Feed

I designed the feed to showcase the creators’ content and those who contributed to its realization. Integrating the collaborators’ information opens up new avenues for discovery, fostering an environment where aspiring creators have enhanced visibility and enthusiasts have a more profound and immersive experience.


Feed Page Design

Discover

The Discover page allows users to explore content and discover talented creators. Leveraging intuitive filters, users can tailor their search criteria through search text, location, profession, or creative field. This page facilitates a tailored and immersive experience for enthusiasts and creators alike and is a powerful catalyst for enhancing creators’ discoverability.


Discover Page Posts Design
Discover Page Users Design

Projects

The projects page is where creators can share their innovative ideas, with the primary objective of finding like-minded individuals who share an interest and willingness to contribute. I am considering extending access to this page to enthusiasts to allow them to support and fund projects that align with their interests and passions.


Projects Page Design
Project Page Design

Profile

The profile page acts as a canvas for creators to showcase their work. The portfolio tab allows them to curate a collection of their most cherished uploads and arrange them however they see fit. Meanwhile, the community tab enables creators and their fans to interact and foster a profound sense of camaraderie and belonging.


The profile page also boasts a user-friendly donation feature seamlessly integrated with Stripe, enabling users to extend their support to favored creators by clicking the donate button.


In addition, Users can personalize their profile by adding a background image, and they can also dictate whether it displays in light or dark mode.


Profile Page Desig

Upload

The upload page allows creators to share their work in diverse forms, whether through uploading images or seamlessly integrating content from well-known sources such as Youtube, Tiktok, Vimeo, Spotify, and Soundcloud. Creators can also attribute credit to other collaborators here.


An essential aspect of Vatica is the thoughtful delineation between creators and enthusiasts. With exclusive uploading privileges reserved solely for creators, enthusiasts can engage with content by reposting, sharing, and curating it for their personal collections. This approach ensures creators retain complete control and autonomy over their creative spaces, safeguarding their work from becoming overshadowed by unrelated casual posts.


Ultimately, I want to cultivate an atmosphere where creators can flourish, fostering a harmonious and focused environment that celebrates artistry, encourages collaboration, and ensures creators’ creative expressions are rightfully cherished, supported, and respected.


Upload Page Initial View
Upload Page Media Uploaded

Light Mode

Self explanatory :)


Light Mode Design

Takeaways

I’m incredibly pleased with the successful realization of Vatica, especially considering it is the first web app I’ve designed and built. Reflecting upon this experience, I acknowledge a few valuable lessons that would influence my approach if I were to work on a similar project.


Firstly, I recognize the importance of early collaboration and open dialogue with your target audience. In retrospect, I realize the mistake of engaging in idea-sharing sessions only during the later stages of development. In the future, I would eagerly seek insights and feedback from numerous people right from the inception of the design phase.


Secondly, I would emphasize the development of a Minimum Viable Product (MVP) rather than delving into implementing a plethora of features or pursuing perfection. Understanding the significance of validating core functionalities and gaining real-world feedback early on, I would prioritize the creation of a streamlined and functional MVP.


Finally, another crucial lesson that Vatica taught me was the paramount importance of marketing. While crafting and building a distinctive project is gratifying, I came to understand that effective marketing is the key to unlocking its true potential. After the release of Vatica, it became evident that while creators appreciated the platform’s concept and vision, they hesitated to transition from other platforms where they already held a significant following, even if their experiences were less than ideal.


In conclusion, the journey of creating Vatica has been a profound learning experience that has instilled a deep appreciation for collaboration, early engagement, agile development, and strategic marketing. Armed with these valuable insights, I look forward to charting a path of continued growth, innovation, and impact as I strive to make a lasting and positive difference by creating empowering products.


In an effort to keep things relatively short, I only showed some things here. Don’t hesitate to contact me to learn more about Vatica and the other pages/features I didn’t mention.