An academic reference that highlights the quantitive significance of social interaction during online learning and pandemic stress
Saiyyam Kochar
UX Designer and Developer
Demic
A mobile application for college students to connect with their classmates during online semesters.
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
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"
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
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.
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
Low fidelity design for Demic
Low fidelity prototype
Low fidelity wireframe for Demic
Edge scenarios
Some questions our team brainstormed on before coming up with the high-fidelity prototype.
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.
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.