Home » Flocs

Flocs
Our verified digital content directory and aggregator helps people to establish authentic social connections.

OVERVIEW

Flocs is built around the idea that everyone should be able to expand their network without worrying about fake accounts; as a verified digital content directory and aggregator, we help people establish and maintain authentic connections.

Our mission is to enhance people’s lives by providing a trustworthy social digital application so they can focus more on networking and business.

ROLE

Product Designer

Visual Design, User Experience Design, Product Strategy, Interaction, Prototyping

May 2020 – Ongoing

TEAM

1 Designer, 1 Full-Stack Engineer (CEO), 1 Backend Engineer (CTO), 1 Software Engineer, 1 DevOps Engineer

TOOLS

Figma, Trello, Google Docs, Miro, Slack, Google Meet

Background

Flocs is a technology-based application that aims to help people in expanding their social media networks by utilizing the NFC feature on a smartphone. In our role as a verified digital content directory and aggregator, we focus on helping people and businesses prevent the appearance of duplicate accounts that can be misused by malicious parties.

According to datareportal, worldwide, there are 3.80 billion social media users in January 2020, with this number increasing by more than 9 percent (321 million new users) since this time last year. In addition, Indonesia also has the largest change in the absolute number of social media users, which ranks third after India (1st) and China (2nd). It is estimated that 65% of internet users in Indonesia are using social media for work purposes.

 

Social Media Growth Rankings

Social Media Behaviours

 

Therefore, my team and I developed Flocs so we could address the issue of misused social media accounts and make all social media accessible through a single account.

In fact, our Flocs concept was so well accepted that we were selected to participate in 1000 digital startups‘ hacksprint session. This organization provides guidance to founders on how to form teams and create MVPs. Likewise, The Greater Hub announced we had been selected for the incubation program.

We were selected as top 7 out of 40 shortlisted candidates for The Greater Hub Batch X Incubation Program 2021 that brings off innovative ideas in a startup.

I was the sole designer on the team along with four engineers. I was responsible for user interface design and the overall experience of the product. In addition, I also assisted my team to create a pitch deck, designing Flocs stickers, conducting a competitor analysis, and providing design ideas for our content on Instagram and YouTube. 

Understanding The Problem

Our secondary research from the articles uncovers the following issues, which are taken into account:

  • There are many fake accounts being misused, as well as problems with user verification
  • The difficulty of sharing all social media and a lot of links in one post

You might want to read these articles for further information about fake accounts:

Cracking down the sale of fake accounts, likes, and followers

Facebook takes down more than 3 billion fake accounts

 

The Product Solution

Our approach began with some market research on competitors in order to understand what the current market offers and take inspiration from those features we liked in each app. I can provide you with a pitch deck upon request if you are interested in our business plan or competitor analysis.

In our product, we emphasize two main points of solution:

  1. A verified platform for sharing all social media and links instantly.
  2. A verified digital content aggregator and directory

The following is our unfair advantage or unique selling point that sets us apart from our competitors:

  • Verified account (KYC)
  • Follow and reshare social media changes
  • B2B Integration
  • Better UI/UX

 

Defining the MVP

The following are our MVP design ideas:

  • Users log in using their registered phone number
  • They can add a link to their social media accounts or another link they would like
  • Follow their friend and add their contact information
  • Enable their NFC
  • View their analytics page

In the following stages, I created mock-up screens for our product, and later I designed the Flocs landing page.

The screens such as:

  • Get started screen
  • Login screen
  • Register profile
  • Follow and add a contact 
  • Flocs activation (NFC)
  • QR Code
  • Add link
  • Analytics page

Designs

Prior to the design, I benchmarked Instagram and our direct competitor, Popl. 

Get started screen

The goal of this screen was to prominently display our logo and to describe the value of our product so that users would be encouraged to click the button.

Flocs onboarding screen

 

Login screen

The only thing users need to do is enter their registered phone numbers. Once they do that, the system will send a 4-digit OTP code by SMS. 

Login - filled in registered phone number
OTP code

Register profile

Users will be redirected to their Flocs profile page if they have already registered. Otherwise, they need to enter their full name and username, and then upload a profile picture. 

 

Flocs - Register Profile
Flocs - Verified User

Follow and add a contact

Users can search their acquaintances and follow their accounts as well as add their virtual cards (.vcf) to their phone.

Flocs - Account of a member
Flocs - Followed account
Flocs - Add to contact

Flocs activation (NFC)

Users who already have a Flocs sticker or card can set up the activation by placing the sticker or card on the phone’s NFC sensor. Hold the sticker or card there until a success popup appears.

Flocs - New Menu
Flocs - Activation
Flocs - Ready to scan
Flocs - Success Message

QR Code

QR codes allow users to share their Flocs profiles with non-compatible phones. Basically, the old iPhones (iPhone 5S) and all Androids can use their camera to scan Flocs QR code.

Flocs - QR Code

Add link

Users can add whatever links they wish to their profiles.

Flocs - Edit Profile
Flocs - Add Link
Flocs - Filled in link

Analytics page

Users can view insights about their social media engagement performance.

Flocs - Analytics Page

Flocs Website

Following the development of our MVP, I then designed a landing page for Flocs, where our potential users and customers could see full information about our product as well as our value proposition. Learn more about our product on the Flocs website.

My first step was to define the design guidelines that would use on the landing page.

Design Guideline - Flocs Landing Page

Here is how our final website design looks.

Flocs Landing Page

 

We have a short video on our website that explains how our product works under the section ‘What is flocs’.

Learning Outcome

It was actually in 2017 that we first came up with the idea of creating an application. Initially, we considered creating a self-service application. Nevertheless, since a self-service application has been relatively common in the industry, we then came up with an additional idea. Due to our full-time jobs, we need to postpone this project for some time. However, we still have this dream to fulfill.

Later on, in 2019, we resumed our project and made a significant effort. Additionally, I helped the team by creating a pitch deck. The effort was fruitful because some organizations invited our team to present our product, and we were also chosen to participate in an incubation program. 

Some key takeaways from this project are:

  • Perseverance will help us achieve our goals.
  • The ability to manage time better.
  • Each member’s cooperation and commitment made the project progress more quickly.
  • Through the Hacksprint session, we were taught how to create a thorough business plan.
  • You should always seek out ways to collect and listen to your users’ feedback.