Saiyyam Kochar
UX Designer and Developer

Demic

A mobile application for college students to connect with their classmates during online semesters.

Image alt tag

Find Demic on the Apple App Store!

Click on the button below to download Demic on your iPhone.

My Role

Solo UI/UX, Graphic Designer, and React Native developer for all aspects of the project.

Tools used : Adobe Experience Design, Adobe Photoshop CC.

Technologies used : React Native, Expo, Google Firebase : Cloud Firestore and Firebase Authentication.

Team

Atulya Reddy : Product Manager, Full Stack Developer

Winston Wang : Full Stack Developer

Saiyyam Kochar : UI/UX Designer, Graphics Designer, Full Stack Developer

Prithvi Velpuri : Full Stack Developer

Aditya Azad : Full Stack Developer

Shruthi Kondin : Full Stack Developer

Platform

iOS, Android

Timeline

August 2022

72 Hours

Overview
Demic

What is Demic?

Initially called "Virmote" , Demic (short for pandemic as it was built in 2020) is a mobile application built in 72 hours to support college students during remote learning semesters. This application matches students with other classmates, based on each student's academic background and preferences, to study or make friends with.

The Problem

"Learning together even when we're apart"

Demic

An academic reference that highlights the quantitive significance of social interaction during online learning and pandemic stress

Inspiration

With remote learning becoming the new norm, students are left without a way to have casual social interactions with their classmates. These interactions often transform into friendships or provide students with support throughout their coursework. Incoming freshmen may feel especially isolated if they don’t know anyone on campus.

Our Solution
Demic

Try scrolling down!

What does Demic do?

Demic matches students with other classmates to study or make friends with. It asks users to select their courses and provide other information like year in school, major, learning style, preferred mode of communication, weekly availability, and interests.

Users can adjust their preferences to seek classmates who match on any number of these parameters, as well as specify whether they are looking for a study buddy, friend, or both. When a user presses the “Match Me” button, Demic generates the profiles of a few classmates that match their preferences, along with each classmate’s percent match. Users can then choose to chat with any of their matches or request new matches.

Tools and technologies used

This application was created using Expo and React-Native for the front-end and Firebase for the backend. On Firebase, we utilized Firebase Authentication and Cloud Firestore in order to authorize and store users and user data. With Expo, we were able to develop and deploy quickly on Android or iOS devices.

Design Process

Brainstorm

As a part of a hackathon team made up entirely of remotely learning students, we were best able to describe and feel the social alienation associated with remote learning. This was specially true for someone like myself who was remotely learning from India. Using our personal experiences and academic research that proved the importance of socialization in education, we identified the features that would best fit our user profile, and created a user flow sketch.

Demic

User flow sketch for Demic.

Our priority was ensuring that the matching process was mindful of the different personal environments of students - whether these be timezones, family responsibilities, or study preferences and habits.

Low fidelity design

Demic

Low fidelity design for Demic

Low fidelity prototype

Demic

Low fidelity wireframe for Demic

Edge scenarios

Some questions our team brainstormed on before coming up with the high-fidelity prototype.

Demic
Demic

Color palette chosen for Demic

Color Palette

a pleasant and nuanced color palette was closely curated for Demic in order to procure the following goals :

  • Purple is eye-friendly, which would be good for users spending hours on the chat screen.

  • Not a lot of apps use purple as the primary color, thus setting us apart in terms of a business proposition.

  • In our opinion, purple gives off a pleasant and supportive vibe. It is neither too cool, nor too much of a statement - our focus was to create a color palette that spoke to the warmth of the environment we hope to create at Demic.

High-fidelity prototypes

A glimpse of some significant screens of Demic.

Demic

Working of the report feature

Personal Reflections

I believed that this application needed a content moderation feature, which the team was not able to implement initially, Therefore, I made a mockup of what a 'report' feature might look like in the chat.

Final presentation video

The following promotional video was submitted by our team at the end of HackThis 2022.

Conclusion

Pandemic over, Demic continues 🎉

  • Allowed me to find a solution to a problem that I myself faced quite often over the course of remote learning.

  • Got to polish my UI/UX design skills, specifically got to learn development in React Native.

  • Awarded the Staff Choice award in HackThis 2022, hosted by the University of Illinois at Urbana-Champaign.

  • Worked further with the application and deployed it as a working iOS application.