ABOUT THE PROJECT

Insider vibes is a platform where we want people to be able to join events and talk to people. Build communities and have conversations about topics. The platform has 3 major ways of communication chat, audio and video. Giving a mix of clubhouse and meet where people can jump in listen to others but it’s not just listening to people you can also watch people on video if they want or they can also watch them share their screens.

This not only makes it a good option for casual communities but also a great place to have professional workshops. Admins have their actions to control users and that’s something that helps them moderate the talks.

PROBLEM STATEMENT

Building a platform for casual and professional communities to join and instantly start having conversations.

Market Research

The market for products to join and start talking to people instantly in rooms is a super growing market and we researched the market with a lot of products but primarily focusing on clubhouse and google meet to pickup stuff which the users are used to using on daily basis.

Design Elements

ICONS USED

BUILDING A DESIGN SYSTEM

The application is massively text-heavy and with multiple levels of containers with a lot of users. So a lot of simple colours for containers and many accents were selected.

GENERAL COLOURS

THEME COLOURS

FONT FAMILY

PRE DESIGN PLANNING

PERMISSION OF USERS PLANNING

There are 3 types of users on the platform with different types of permissions on the platform, a flow chart was made to show the type of users and their permissions on the platform to understand how to divide features and what is important while what is not.

USER FEATURES PLANNING

Two major types of users are on the platform and their features depend on their type. A chart was made to show what features are accessible to each type of user.

This would help us plan where to place what on the page and figure out how the page changes when we change the type of user on the page.

JOINING PAGE

When the user joins the platform for the first time they need to be told about the aspects of the platform which might be taking data from them for them to plan out how they are sending that information to others. Things like microphone switching and camera switching are given on the joining page to make sure that before the user joins the page they are completely clear with how they appear to others on the platform.

PAGE INTERACTION PLANNING

The platform has two sections on the left, the bottom side is more information-heavy and we wanted to make sure the certain users that plan to see that information are able to access it with ease and can see more data as soon as they scroll.

An interaction was planned for the same to reduce the size of the top half to incorporate more data in the bottom half.

DESIGN SCREENS

MOBILE SCREENS

The mobile screens were made with a clear intention in mind. Make sure that you can see the audio and video area in the first view. For everything else, the user can scroll or swipe around. This was achieved and all the tap actions were shown as bottom sheets to make them easily dismissable for the user.

DESKTOP SCREENS

The desktop screens were a lot more complicated than mobile screens, the user can see everything in the first view. The user can scroll to see more information and the quizzes appear with animations in the right panels.

This was a much more fluid and animation oriented design but still kept in mind to not make it too complicated for first-time users.