top

Becom

Online platform for supporting students' well-being during the pandemic

#Web Design #Machine Learning

Duration
2020.06 - 2020.09

Team
2 Designers and 2 Developers

Tools
Figma, PowerPoint
HTML/CSS, JavaScript, Python, Django, Git

My Role
I was responsible for UX/UI design and technical implementation, as well as management of the overall product roadmap.

📝 UX Process : Brainstormed and worked on each process with team members
🖍️ Design : Wireframes and high-fidelity layouts for MoodTracker, Mate, and Teachers
💻 Implementation : Development for Home, MoodTracker, Mate; Machine Learning Model

Overview

Challenges

Compared to our life before COVID-19, students and teachers experience more unbearable stress and emotional and psychological difficulties such as depression and anxiety.

"How might we help students to overcome stress due to COVID-19 in the virtual school environment?"

Overview

Solution

Online Social Networking Platform for Classes

With features that connect oneself, friends, and the class, students can create in-class social connections and grow by introspecting themselves.

Overview

Process

Our team started with researching the problem, defined features and user flows, designed layouts, and implemented them into a web-based platform. Each step had iterations based on feedback from team members and industry professionals.

Discover

Background

Ever since the pandemic, schools were closed and the depression of students related to COVID was often discussed in newspapers. Our project started from here.

Problem 1: Students' mental health has worsened due to COVID.

A recent survey found that 80% of students have experienced some negative impact on their mental health due to the pandemic. School closures not only upended most students' learning mode, they deeply disrupted students' social networks and interactions with classmates and teachers (Gallup, 2020).

Problem 2: Online class solutions focus on studies.

School is an important normalizing experience for children and adolescents (HealthCentral, 2020). However, current online class solutions focus on delivering lectures, not the whole experience students used to have in a school prior to the pandemic.

Discover

User Survey

Though we discovered the problem through desk research, we wanted to understand the current situation with students and teachers in Korea. Using Google Form, we conducted a survey with 23 teachers and 30 students.

Question

What problems are students facing and why are they experiencing them?

Takeaways

From our research, we discovered that students are dealing with the decrease in interactions with their cohorts during the COVID-19 pandemic.

The main factor for students’ depression - ‘not being able to interact with their friends.’

Teachers were mostly interested in finding out the difficulties or worries that students are facing.

Define

Approach to Problems

From the research, our team decided to create a solution that helps students to strengthen their mental health from depression and provides a space for students to interact with their classmates.

Step 1. Set Key Goals
Based on our two main goals, we started ideating features to meet the goals.

Support Mental Health
Increase Interactions

Step 2. Set Concepts & Values
To decide specific features, our team first narrowed down the values and concepts that we wanted to achieve and deliver to our users using affinity diagrams. View

Connection
Express
Empathy

Step 3. Define Features
Focusing on the values and concepts, we defined features that satisfy our goals.

Mood Tracker
Personal Profile
Counseling
1on1 Buddy
Class Forum

Target Users

Design

Mockups and Flows

We began an ideation process by sketching out different layout options and interaction patterns for the main functionalities.

Zoom in on Left or Right

Design Decisions

While sketching different layouts, I made some design decisions to meet our concepts and make the solution more usable.

#1. Highlighting the Counseling Button

The counseling button directly takes you to the page where students can apply for counseling with their teachers or counselors. Since one of the goals of this solution was to make counseling more accessible and easy to apply to students, I decided to make the button visible on every page and distinct from other menus.

#2. Dashboard with Important Features

As I decided on the information architecture, I was aware that important features that I want students to use are hidden under different menus. Also, it was difficult to decide one feature to present on the home page, since I considered them equivalently important. As a result, I decided to pull out key features and gather them on the home page, using a dashboard form.

Design

Final Design

After refining the flows and the whole layouts, I developed them into high-fidelity interfaces and added visual design to the layouts.

Design System for Collaboration

Since I was working on the design with another designer and engineers who would implement the design, I created a design system to have design components consistent among all layouts, and to make the development process easier for engineers.

Providing a Comfortable and Enjoyable Space

To provide a comfortable and enjoyable space for students that would relieve their stress and encourage dynamic interactions, I chose orange and other vivid colors, used rounded shapes, and emojis that students would like.

Reflections

Checklist before Releasing

1. Privacy

The mood tracking feature encourages students to share their thoughts and express themselves, which can bring privacy issues to real users. A thorough review of how the personal data will be used and how it will be encoded is needed before releasing the product.

2. Clients' Needs

As Becom is intended to be used by the whole class, the clients would not be individuals, but organizations: education offices, schools, and classes. Expected needs for organizations would be:

An easy-to-use admin tool to manage classes and students
Charging no extra work to teachers and counselors
Integration with learning tools that are in use

Reflections

What I learned

Design & Communication

Working on a product with developers led me to consider technologies that can be integrated with features. I had a chance to study different APIs and machine learning techniques and contemplated how to synthesize them with designs in Becom.

By determining the proper identity of the service, I learned how to combine visual assets such as colors and fonts, considering the age and situation of the target user. I also practiced delivering my design in a form that would be easy for developers to implement, such as designing for a responsive web.

Reflections

What can be Improved?

Due to the time and resources our team had, there were some constraints regarding technical implementation, which had effects on features and designs. If I had more time or had experienced developers in the team, I would have improved on the following parts.

1. Detailed Analysis

I believe that the analysis of the mood tracking feature can go deeper! For now, words are only classified into two categories: positive and negative due to the lack of a detailed dataset. However, to provide a more elaborate analysis, more feelings can be added: depression, surprise, or sadness. I wish to expand analyses into supporting the mental health of students. For example, the system can detect depression or deliver appropriate words of sympathy and comfort from what the students have written.

2. Mobile Platform

For students, smartphones are more accessible and usable compared to desktops. While we could not develop mobile applications because our team members had experience in only web development, we made it responsive to support mobile views. However, considering the characteristics of Becom, a mobile platform is still suitable to support real-time notifications features and engagement for students.

Becom

Challenges

Solution

Process

Background

User Survey

Approach to Problems

Mockups and Flows

Final Design

Implemented Work

Checklist before Releasing

What I learned

What can be Improved?

See more