CoFlow: Digital Co-Study Space

UX research, UX design, UI design , Course Project

1-minute Overview

01

Methods& Tools
Research: Interview, Observation, The ELITO method, Affinity Diagram, Competitive Analysis, Personas
‍Ideation: Sketching, Brainstorming, Mash-up, User Flow Diagram, Storyboard, User Story Map, , User Scenarios
Tools: Figma, Miro
People
This is an individual course project.
Time
Sep 2021- Dec 2021
Problem
As the world shifted to remote work and studying during quarantine, I couldn't help but notice a decline in productivity for myself and many others. I was determined to uncover why we were able to focus better in public spaces and how we could bring that same energy to our homes.
Outcome
I created an app with a virtual study cafe where you create study goals with money commitment monitored by teammates.

✅ Study with People Like You by Creating or Joining a Group

✅ Support or Compete with Study Group Members

✅ Be Aware of Elapsed Time and Get Feedback

✅ Treat yourself if you succeed, treat teammates if you fail!

Impact
Based on 5 user tests, the average satisfaction score is 90%. Users thought this app was highly innovative and motivating.
Quotes: "I think this product is very innovative.""When I realized I will lose money if I don't focus, sh*t, I will definitely study."

Context

02

Why is it so hard to focus at home?

Since quarantine, I struggled a lot in keeping myself focused because I was the type of person who could only study in public spaces. Therefore, I was curious what I could do to help those people like me who found it difficult to concentrate at home.

Narrow Down the Scope

I realized there were too many directions that I could take. Since I found many people who could focus at public places failed to focus at home, I decided to focus on what we can learn from public spaces and how to apply the insights to the home setting. After talking to a work professional, I decided to focus on how to increase intrinsic motivation for students.

How might we help students focus on studying at home with insights from public study spaces?

Understand Why People Can or Can't Focus

03

Make Sense of Data Leveraging Psychological Theories

Optimal Performance in the “Flow" State

From the interview data, I generated 71 so-whats using the ELITO method, and then organized so-whats inspired by the arousal theory of motivation and the "Flow" theory. People perform best when they are around medium arousal theory, not too high, not too low.

Low Arousal
Wandering Mind 🤪
Due to low motivation or lack of constraints/ monitoring, our mind becomes purposeless. Our attention shifts from one object to another easily.

Can't Focus
Optimal Arousal/ Flow
Focused Mind 👁
At an optimal arousal level, we can get into the "flow" state and get immune to irrelevant stimuli. Our attention is highly focused on the current task.

Can Focus
High Arousal
Irritated Mind 😤
Some irrelevant arousing cues enter our cognitive processes and cause cognitive or emotional anxiety, which makes us come out of the "flow" state.

Can't Focus

Various Meanings of The Same Stimuli

From research, I realized that interpretation of the same stimuli depends on how it is processed.

The same stimuli can mean many things, depending on the processing level they occupy. It might mean a break, white noise, or distraction. The interpretation of the same stimuli varies across different people at different times.

What matters is not the stimuli itself, but our immunity to the stimuli.

Drawn based on interview data.

Design Goal

Facilitate users to get into and maintain the flow state, instead of eliminating distractions.

Since the physical environment is pretty hard to change and is out of the reach for a digital product, chaos at home is often inevitable. However, since people will get more immune to distractions when they are in the flow state, my design focus is to increase people's immunity to distractions by facilitating their entry to the "flow" state.

And don't overdo it. The tools are just for helping them get into the flow state. After they enter the flow, to keep them focused on their tasks, the software should minimize the required attention from the users, otherwise, any extra aids become distractions.

What helps people get into and maintain the "flow" state?

04

Interview Findings

Insight 1: Public study spaces require people to follow social obligations.

Sally enters a study space and she knows she needs to keep quiet and behave properly to not disturb people around her, or she will get kicked out of this place.

Everyone follows protocols to not disturb others, so everyone can study in their independent mental space.

Insight 2: Contagion helps to spread desirable behaviors and mindsets of learners.

When Sam studies with people who have the same goals and skill levels, he will feel the peer pressure and get more motivated. He is also more willing to study when he sees others working hard.

There are two types of contagion. Resonance occurs when people find commonalities with each other. Radiation describes the influence of role models on others.

Insight 3: Studying in public spaces helps people develop a proper awareness of time.

Lily finds herself most productive in public spaces, where the ever-changing environment keeps her constantly aware of time passing. The ebb and flow of the crowd, the shifting sunlight, and the closing of nearby cafes all serve as subtle cues that keep her focused and on task, much like the effect of a looming deadline.

Insight 4: Early efforts like searching for a seat in public study spaces prevent students from giving up studying.

Jimmy faces a daily struggle to secure a seat in the library, often spending 10 or more minutes searching for the perfect spot in the morning and even longer in the afternoon. But the effort is worth it, as the coveted seat represents a precious opportunity to focus on his studies and achieve his goals in a world where entertainment is ubiquitous.

Design Challenges

Design Challenge 1: Reframe "social Obligation" at Home

Since students are studying at home, their capability to disturb others through shared contexts (sound, view) is minimized. They don't need to follow the same protocols in public spaces when they are at home. The essential difference in the settings requires me to be creative when translating the insights into design.

Imagine a student sitting down in a library to study. They make a silent promise to themselves and to those around them to focus and avoid disrupting the peaceful atmosphere. When students break the promises they made (such as disturb others or start doing things irrelevant to studying), they will be stopped by others (if it is serious) and feel ashamed.

HMW help students commit to studying and receive feedback when they fulfill or break their promise?

Design Challenge 2: Design social influences at home

Contagion at public study spaces is a kind of subtle and implicit social interaction. Contagion creates a study atmosphere that doesn't require people's deliberate attention, but people can perceive it with their peripheral vision.

HMW design virtual social interactions that don't require cognitive resources while focusing?

Design Challenge 3: Design to only spread good influences

Interviewees also reported that they were influenced by people's behaviors during breaks, such as playing cellphones and going in and out, which can't be constrained by protocols.

HMW present people influence selectively to only spread positive influence while minimizing negative influence?

Design Challenge 4: Design to increase time awareness

HMW help people develop a proper awareness of time at home?

Design Challenge 5: Design to increase commitment

HMW design equivalents to that effort which can prevent people from opting out of the flow?

Meet The Personas

05

I created four personas based on four types of motivation. These motivation types inspires me of designing multiple mechanisms to inspire users with different motivations.

Motivated by competition
Need features to compete with others

Motivated by peer support
Need features to interact and support each other

Motivated by moderation
Need to be "watched" by others

Anti-persona: Motivated by themselves
Won't be the target group

Design for Entry and Extend of Flow

06

Brainstorming

I brainstormed ideas and organized them in two ways, which helped me converge ideas and develop new concepts.

1. Sort ideas based on their impact and correlation to my insights

I segregated the circle into three areas based on three main insights. The degree of post-its to the center of circle represents their affinity to different insights. The distance between post-its and the center represents their impact on solving design problems.

2. Group features by insights and which stage they can contribute to

I classify the studying process into five stages: setup (both mental and physical), flow, intervention before exiting flow, break, intervention for getting back to flow.

Sketching

I sketched 8 different solutions to this problem.

User Story Map

To refine the solution, I created story maps for each persona and identified useful features, then summarized the common user flow. The product includes four main activities: setup, focus time, break time & interactions, and rewards.

Questions, Options, and Criteria (QOC)

I think this question solution tree is the most important step in ideation. QOC inspired me to mix existing solutions together to generate a better solution that meets more criteria.

After finishing this tree, I decided that my solution was an app where people can buy treats for themselves or others depending on their completeness of focus goals in a virtual cafe setting.

Mid-fi Prototype& Flow

User Testing

07

Iteration 1: Set Rewards

Problem: don't know how the incentive mechanism works and lack flexibility

Solution: add one page to educate users how this mechanism can help them and   how it works; offer more user control

Iteration 2: Information Visualization

Problem: users didn’t notice they reached break time because the texts were apart from the timer.

Solution: use graphics to visualize different states

Iteration 3: Color Accessibility

Problem: contrast is too low for some design components

Solution: use color accessibility check and fix color accessibility issues


Meet "CoFlow"
A Digital Study Space

Increase Commitment with Study Communities

Here is the breakdown of my study community design and how the designs are inspired by research findings.

Study with People Like You by Creating or Joining a Group

In CoFlow, you can join a room and study with similar people who share the same identity and tasks with you. You can also create your group and invite friends!

Support or Compete with Study Group Members

During breaks, users can see others' progress, react to activities with emojis, and leave comments. The ranking is also available on the leaderboard to motivate people.

Be Aware of Elapsed Time and Get Feedback

Set a resolution and see your progress to improve your time efficiency. Set time limits for study sessions and breaks to help you build your routine at home. When there is one minute left for break, we will remind you by popping up a timer and playing sounds to help you get back on track.

Increase Commitment with Incentive Mechanisms

Here is a breakdown of my incentive mechanism. I included this as one of the main design because according to research, financial stakes can increase the success rate of goal completion by up to three times. So I think this is a very powerful tool for people to increase commitment.

Commitment and Rewards

Before starting focusing, users can set up their focus goal. They can also choose to join the rewards system. According to research, incorporating financial stakes can increase the success rate by up to three times. Users can choose to get money returns or get treats from the reward system if they finish the session. If they fail, their money will go to team members.

What Sets My Design Apart

Reflection

As I designed for flow experience, I also reached the flow state while doing this project and felt accomplished after seeing how abstract psychology theories can be applied to understand a real complex scenario and make a design impact.

My Research Lessons:
1. Don't ask leading questions to confirm my own bias. Do ask open-ended prompt questions to help users recall the contexts.
2. Don't take users' stories at face value. Do delve deeper to investigate the nuances of the contexts.

My Design Lessons:
1. Try to reframe the insights from different perspectives and compare how different solutions can contribute to core design problems.
2. Design concept is not a collage of features. Elaborate around the core experience flow. Translate research insights to design ideas in the context of experience flow.

Next Steps:
1. Add more onboarding screens to educate users of the mechanisms
2. Design a browser plugin to aid their workflow on computers
3. Conduct more user testing and collect more feedback

Other Processes

Credits

The illustrations in the part of research insights credit to unDraw.
The illustrations in UI credit to "GethingsDone" from UI8.

OverviewResearchIdeationUser TestingFinal DesignReflection