Technical

Meet N Greet

Skills: Fullstack Web Development, Game/Interaction Design, UI Design, Prototyping, Networking

Technologies: JavaScript, React.js, Node.js, Express.js, Web Sockets, Figma, Phaser.js, Postgres, Git

Background

For my Senior Capstone project in Fall 2021, I worked with 4 other students to design, code, test, and deliver a fully functional conferencing website.

After completing 3 semesters of online classes during the COVID-19 pandemic, it was our first semester attending in-person courses. One pitfall we faced during online school was the increased difficulty of meeting others, so we collectively decided to create a web conferencing tool called Meet N Greet to help students network virtually.

Mission

Help students meet others in an organic way through connection and discussion at virtual events, such as club meetings or academic office hours

The figma design for Meet N Greet. It displays a meeting room for avatars to navigate around, important buttons such as 'Leave Room' and 'Mute', and a chatbox.

Project Goals

Allow students to view all attendees at the same virtual events
Provide an easy solution to approach other students and break the ice
Allow voice call and text chat

My Contributions

Provide a UI Style Guide for Components
Contribute to a majority of the Figma UI Designs
Create Illustrations
Set up web server and backend API architecture using Node.js and Express.js (PR)
Leverage Peer.js to add audio and video calling
All Github Contributions

Having prior experience with frontend web development including Ember.js and React.js, I decided to push myself out of my comfort zone by taking the networking and backend API related tasks.

UI Design

Although not a requirement for the course, I created a UI Style Guide and Component System as a foundation for all the designs. Establishing the design foundations first helped the final product maintain a consistent and professional experience.

Example 1: Color Scheme

The color scheme shows 5 colors: Royal Blue (main color), Aqua (accent color), Sky Blue (main color), Yellow (highlight color), Orange (error color). The primary feelings we want our users to have is trust and security. Blue evokes trust, confidence, and peace. For highlight colors, yellow can be a good option since it creates a cheery atmosphere, which will help encourage socialization.

Example 2: Form Elements

The designs of input related form elements, such as input text boxes, checkboxes, radio buttons, toggle buttons, tooltips, and tags.

Example 3: UX Guidelines

Tip 1: Avoid resizing input, button, and text height (but resizing the width is fine). The sizes have been defined to maintain consistency. Tip 2: When grouping buttons together, only use primary button and keep the rest as secondary/tertiary. Tip 3: Avoid using primary colors for negative actions. This typically confuses the user.

Final Website

The final version of Meet N Greet provides the following key features:

Set up user profile and select an avatar
Join a conference room
Navigate around gamified room
Initiate a voice call when other users are close by (indicated by a green username)
Room Chat
Video Conferencing

Final working demo of meet n greet. It shows the chatroom and navigation features.