Mesh

Winter/Spring 2023 Industry Project

Introduction/General Information

We are highly excited to present our CodeLab Industry Project which was done under the guidance of Mesh Communities Inc., a social media platform designed specifically for communities to build, moderate, and monetize their interactions. It provides tools and features for community leaders to create sustainable online communities while addressing key concerns such as financial sustainability, safety, and security.

The Team

Shyam Agarwal — Project Manager and Developer

Winnie Sich — Designer

Allen Kaile Yuan — Developer

Om Khangaonkar — Developer

Timeframe

February 2023 to June 2023

Tools

• Development: React.js, Next.js, Apollo GraphQL
• Design: Figma
• Project Maintenance: Jira, Git/GitHub, Slack

The Project

As mentioned before, Mesh is a social media platform that helps users connect with people and communities. They do so through a system of nodes and channels. However, they face 2 major problems:

• Brands struggling to connect with creators they wish to sponsor: In today’s digital landscape, it can be challenging for brands to find and engage with the right content creators for sponsorship opportunities.
• Creators facing difficulties in finding partnership opportunities: Content creators often desire collaborations and partnerships with like-minded individuals and brands that can enhance their work and broaden their reach.

Thus, our solution is to create a web application (Mesh Marketplace) that allows creators and brands to discover each other. Our platform provides a solution by offering brands an intuitive and efficient way to discover and connect with creators aligned with their brand values, target audience, and marketing objectives and it bridges the brand-creator gap by enabling creators to easily connect and collaborate with others who share similar interests, goals, and creative visions.

Design

Here’s a summary of how the design process looked for our team:

Competitive Analysis & User Interviews (Research)

We started researching Mesh Marketplace’s current competitors and identified the following as the major competitors:

• Instagram for creators
• Spotify for Artists
• Meta Business Suite
• Grin

Followed by this, we conducted user interviews with two goals in mind:

• To better understand the current perception and sentiment surrounding creator marketplaces, we aim to conduct comprehensive research and analysis. This includes gathering qualitative and quantitative data through surveys, interviews, and market research studies. By exploring people’s experiences, expectations, and opinions regarding existing creator marketplaces, we can identify pain points, areas of improvement, and success stories. This research helps us gain insights into the strengths and weaknesses of current platforms, as well as the overall perception of creator marketplaces within the target audience.
• Gain insight about specific features people want to see in creator marketplaces: Understanding the needs and desires of users is essential in designing an effective and user-centric creator marketplace. Through extensive user research and feedback collection, we aim to identify the specific features and functionalities that users desire in a creator marketplace. These insights guide our development process and ensure that the platform meets the expectations and requirements of its users.

Low-Fidelity

Low-fidelity designs, also known as low-fi designs, play a crucial role in the early stages of the design process. They are simple, rough, and quick representations of a design concept or idea. These designs focus on conveying the basic structure, layout, and flow of a product or interface without getting into detailed visual elements or specific interactions. These are our low-fis based on the initial research.

Mid-Fidelity

We iterated upon our low-fis based on the feedback that we received from the Mesh team. Here is some feedback that we got, and how we worked on it:

Landing Page: Explains what Mesh Marketplace is

• Design Choices
  — CTA buttons (top and bottom) — Explore Marketplace/Get Started.
  — Learn more button or carrot (Helps users understand what Mesh’s marketplace can do for them).
• Feedback received
  — Liked having Learn More over possible carrot — no ambiguity.
  — Liked the Text bubbles on Discover/Collaborate.

Tiles: Cards that give information on the creator/brand

• Design Choices
  — The Collab button is darker because we want users to click on that more.
  — Category — based on the design system provided (Arts and Entertainment, etc).
• Feedback received
  — Don’t have an overflow of categories, instead, “+ number of categories”.
  — Prefer having a tile-banner picture because it gives the creators/brands personality.

Marketplace: Where creators/brands find each other and connect

• Design Choices
  — Filtering & sorting options.
  — Possibility to “Favorite”.
• Feedback received
  — Liked the ability to “Favorite”.
  — Filter (Top Left), to not have everything expanded — could be overwhelming.
  — Don’t need other possible pages (Search creators, My brand, etc).

Current Design

Based on all the feedback that we received and with a special focus on creating a clean, easy-to-use filter design, this is how the final designs look like:

Development

Architecture

Since our platform utilizes Javascript as well as Apollo GraphQL, here is what the general architecture looks like for the two frameworks. We won’t be sharing the exact architecture of the Mesh platform for privacy and security concerns.

• Apollo GraphQL

• Javascript

Frontend

React.js

• General Overview
  — Used to Create Web applications, including component-based development and virtual DOM.
  — Free and open source.
• Product Application
  — React was used to render the website.
  — React was also used to implement the general layout of the website.

Next.js

• General Overview
  — A framework that supplements React web applications.
  — Easier to create Production-ready, scalable, high-performance web applications.
  — Offers server-side optimizations like server-side rendering (SSR) and static site generation (SSG), helps with fast and SEO-friendly websites (marketability of a site).
• Product Application
  — Next.JS helped with the profile and node card designs.
  — Next.JS also aided with implementing the reactivity of the website, allowing the user to receive a response to certain actions!

Backend

Apollo GraphQL

• General Overview
  — GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data.
  — GraphQL allows clients the power to ask for exactly what they need and nothing more.
  — Makes it easier to evolve APIs over time, and enables powerful developer tools.
• Product Application
  — Used to retrieve the information necessary to populate the Profile and Node Cards on our website.

Components

All of our components were built from scratch using HTML and CSS, taking advantage of useEffect() and useState() for reactivity.

Social Media Scripts

We had to collect data from various social media platforms in order to display it on the Mesh Marketplace platform.

Why do we need them?

• Help us gather a wide range of data, including user profiles, engagement metrics, content trends, and demographics.
• Extensive data collection allows Mesh to offer a comprehensive and detailed understanding of creators and brands on social media platforms.

Challenges & Solution

• Restricted permissions from social media platforms.
• Resorted to web-scraping to get the information needed.

Challenges

Every project has its own set of challenges, and ours was no exception. Here are a few major challenges that we faced:

Frontend

• Writing good quality code for the Mesh team to continue working on the project later was a challenge.

Backend

• GraphQL has its own syntax and concepts that were unfamiliar to all of us in the team.
• As mentioned before, getting social media scripts was difficult because of company restrictions.

Visual Design and Branding

• Developing a visually appealing and cohesive design that aligns with the brand identity of Mesh.
• Balancing aesthetics with usability and ensuring consistency across different screens and components.

Communication

• There were communication issues initially which resulted in losing a lot of crucial time.
• Many team members could not continue with the team so that resulted in the loss of human resources.

Reflections

Although we faced a lot of challenges and difficulties, we think that these challenges helped us learn how to overcome obstacles and grow as a team. By embracing these challenges, we were able to develop valuable skills and gain valuable experiences that have contributed to our personal and professional growth. Here are our three key takeaways from the project:

• The technology landscape is ever-evolving, and being adaptable is key to staying relevant. We embraced the challenge of learning new technologies to meet the changing demands of the project and the marketplace.
• Effective collaboration and communication between developers, designers, and stakeholders played a significant role in the success of the project.
• Regular meetings, clear documentation, and open lines of communication fostered a cohesive team and facilitated alignment on project goals and objectives.

Acknowledgment

We want to sincerely thank the Mesh team for all their help and guidance throughout our journey. We also want to thank CodeLab for providing us with this opportunity and for their continued support throughout. We want to end on a positive note by saying that: