CoSpace.
With schools and workplaces being closed due to COVID-19, people have been forced to work from home. Though working remotely allows for more flexibility, students have reported feeling unmotivated and having trouble balancing between school and life while trying to keep up with school work due to the lack of structure and support that existed previously. Our team created a product that maintains productivity through socializing and accountability.
Our project was awarded runner up for the Audience Choice Award on Presentation Day, an event judged by industry professionals and hosted by Design Interactive, UC Davis' first UX organization.
Role
UI/UX, User Research, Visual Design
Duration
6 Weeks (2021)
Team
Shirley Lee, Matthew Paquette, Mariella Terrenal
Tools
Figma, Notion, Google Forms
HMW
Problem
💻 With the shift to remote workspaces, how might we help students better balance their school, work, and social lives to avoid overworking and maintain productivity?
User Research
Literature Review
Since the phrase “work-life balance” became so heavily used as we transitioned into remote work, I thought it was important to look into it as it had significant relevance to the topic of overworking. We began our research by reading articles from John Hopkins University, Psychology Today, and University of Cincinnati. We explored the psychology behind the habit in maintaining balance in life balance and time management techniques. We discovered that ...
Key Insights
• Changing environments can disrupt the development of habits
• Support systems allow for accountability, motivation, and goal-sharing
• Several aspects of time management and organization, such as goal setting, were found to be especially challenging for students
Surveys
We sent out a survey and received 103 responses. This led to new discovered where we learned about first-hand student experiences since shifting to remote learning.
68%
use to-do lists or calendars as an organizational method
70%
find themselves most productive in their rooms
88%
currently work in their room or another part of their house
Interviews
We narrowed down our interview insights into 3 main pain points: burnout from overworking, no seperation of person and work space, and lack of a support system.
1. Overworking from school
“I want to spend less time on school because I definetly overwork myself. I want to put time into things like family, clubs, self care, and checking in with friends.”
2. No separation of space
“I like to separate my personal life from work so I liked being able to study in public spaces like cafes and libraries. But now that I can’t go to those places anymore, I find myself struggling to focus in my room and getting work done."
3. Lack of a support system
"It's easier to fall behind because there's no structure with online classes. It's hard keeping myself accountable without others around."
User Personas
From our research, we narrowed down our target audience to college students and created user personas to outline their problems.
👩🏻
Annie
A 2nd year college student who has lost motivation since classes have transitioned online. She is struggling to find a school-life balance, and wants to dedicate more time to self care.
🧑🏻
Henry
A 4th year college student who has trouble managing schoolwork with his other hobbies and responsibilities. He enjoys studying with his friends at the library, which has kept him in check, but is no longer the case due to quarantine.
Ideation
Affinity Mapping
With the insights from user research, we began to brainstorm, discuss, and vote on possible solutions through affinity mapping. We decided to focus on the social aspect of studying that has been lost due to remote learning, since users expressed their productivity dropping without these study spaces. Some ideas we explored include shared to-do lists, habit trackers, journaling, and workspaces where users can call one another.
Sketches
We then produced sketches based on our ideas, finding ways to combine productivity and socializing.
Iterations
Key Features
Using our sketches, we created wireframes to better visualize our ideas. There were 3 overarching themes in our app: To-do Lists, Workspaces, Friends.
1. To-do Lists
To-do Lists can be created by the user and organized into different categories. They are shared with the user's friends.
2. Workspaces
Workspaces allow users to hold work sessions with different groups of people.
3. Friends
Friends shows users who is actively working, as well as what they are working on and their timer for the task.
Low-Fidelity Prototype
Mid-Fidelity Prototype
Usability Testing
Testing our Features & Iterating
With our mid-fidelity prototypes to conduct user testing with 8 college students to see if our app was user-friendly and captured the features like we had imagined. We created a list of features we wanted to test and developed a script with questions to ask.
To-Do List
The to-do list feature had confusing interactions that weren’t intuitive and needed refinement.
1. Completing a Task
Our original idea was to have a "swipe to delete" interaction that mimiced crossing out a task in a planner, but it was not intuitive because users weren’t used to that interaction on their phones. On mobile devices, users are used to tapping interactions.
→ This led us to integrate checkboxes for each list item to easily tap and check off.
→ In addition, users had trouble finding the timer feature since there was no clear indication that clicking a task would open that up, so we added a timer icon to create a clear the call to action.
2. Editing To-do List
Orginally, users had to tap on the pencil icon to edit and then tap the plus icon to add to the to-do list.
→ We also removed the pencil icon and changed it to a "tap to edit" interaction to follow common apps like Apple Notes.
3. Timer
The initial interaction was supposed to be tapping on a task to prompt a timer for that task. However, because there was no Call-To-Action, there was no indication to the users that there was a timer feature.
→ In this improvement, we added a timer icon. Users now have to click on the timer icon and select a task from a drop down to use the timer for. The timer is set to 25 mins by default based on the effectiveness of the Pomodoro technique that many students use and are familiar with.
Icons
Our users found it hard to figure out the meaning of some icons, so we shifted towards more familiar icons and added icons for interactions we missed, in order to make the user flow more straightforward. We established consistent icons for creating and editing, as well as one for invites from others. We also added the timer icon in the to-do list to make a clear call-to-action.
Visual Design
Some users liked the minimal look of the app, but some also felt it was messy with no unifying theme. We decided to make brown our primary color, utilizing different shades to create visual interest. Brown also ties to colors of a coffee shop, which represents our focus on common study spaces.
Final Product
Welcome to CoSpace ☕️
To-do List
Minimal and straightforward organization of tasks.
Timer
Use timers to maximze productivity. Default of 25 minute timer to based on the effectiveness of the Pomodoro method.
Workspaces
Emulates a coffee shop setting where the social interaction of studying with friends is reimagined, virtually.
Video Call
Study and work with friends through a virtual workspace.
Bulletin
Create collaborative to-do lists or keep your friends accountable.
Workspace Invite & Friend Status
Send and recieve workspace invites. Check what your friends are working on and how much time they have left. Creating an element of accountability, you are given the tools to keep your friends responsible for completing their tasks and vice versa.
Friend Request
Send and accept friend requests to build a motivational network.
To-do List Privacy
Private tasks that you want to keep hidden. E.g. buying a birthday gift for your friend!
Design System
The Coffee Shop
Reflection
Takeaways
This project was challenging yet a lot of fun as it was my first time designing an original product. I gained more knowledge on design systems and how to keep interactions consistent and recognizable. This project taught me the importance of existing interface guidelines and being able to translate them into my own designs.
Challenges
With the broad topic, it was very challenging to figure out the best way to address our users' needs. Constantly comparing our ideas to existing productivity apps was a hurdle that my group had to overcome, this pushed us to dig deep and think about why our app is needed and what makes us stand out from from existing productivity apps already on the market.
Next Steps
If I had more time, I would explore and implement more features: positive reinforcements through gamification features and rewarding interactions, a time tracker that compares planned time spent on a task vs. time actually spent to encourage more sustainable workloads and avoid burnout, and embede more fun backgrounds & sounds!
Like what you see?
Let’s connect! I’d love to chat about design, hobbies, and more (:
© Ying Liu 2022