Breaking Bread

Social Media Design
The pandemic has changed the way we interact. At the University of Toronto, physical distancing made students more isolated than ever. Using design thinking framework, my team designed a solution for the Innovation Hub at UofT, helping students connect with others during the pandemic.
Team
Time
Role
Methods
Abigail Colmenar, Nancy Lee, Syeda Nudrat Zehra, Wen Jin, Winnie Lao
60 hours

Oct 15th, 2020 ~
Dec 7th, 2020
UX Researcher,
UX Designer,
Storyteller
Questionnaire, Interview, Lean Evaluation

🔭 The Design Journey

🫶 Empathize

50 surveys and 12 interviews were conducted among current UofT students. Questions are around their demographics, living environments, social preferences, interests, and student goals. We further explored the impact of COVID, their expectations and struggles in social life. This is what we found:

Patterns

On one hand, physical distancing make friends hard to stay in touch. On the other hand, it hinders their way to make new friends.

Compared with normal days, 30% more participants have trouble making new friends during the pandemic. Small talks in class, the most common way students make new friends, is replaced by overwhelming "black squares in a breakout room".

Here's a thematic analysis with more details about the obstacles:
We found shared spaces and activities are common patterns of making new friends. What are opportunities to create a new normalcy in the virtual environment?

Read the report:
How has physical distancing impacted the connectedness of students, and how can we help?

📌 Defining

How is Stephanie feeling?

We generated her behaviours and thoughts in an empathy map.

As-Is Scenario

An as-is scenario describes Stephanie's communication with classmates.

Pain Points

From the as-is scenario, we identified the pain points against Steph's goals are the large group size, topics centered around school, and not able to follow up after meeting new classmates.

Needs

Stephanie needs a way to talk about non-school related subjects in a small intimate group and extend friendships outside of the classroom so that she can comfortably socialize in the virtual environment and feel belonged with a peer support network.

🧠 Ideating

Remember the primary research? A main way participants make new friends is through shared activities and environments.
When we ask about interests and motivations, a popular theme is food.
When brainstorming based on the needs statement, we discovered this opportunity to apply the research results for a solution.

What if we provide a shared space where students can eat together, just like the school cafe? Can they comfortably connect?
Breaking Bread is the mobile app where students can hop on at food time to chill and talk!

Building on to this core idea, we combined it with other feasible functions: guided conversation and adding friends (mutual selection), as our minimum viable product.

We envision it to:
👥   Replicate cafeteria encounters
🍣   Support bonding through food
💬   Guide conversations with meaningful prompts
📝   Encourage exchanging contact information
🤝   Build a beginning for meaningful connections
Students like Stephanie will log in to Breaking Bread and enjoy a casual meal while socializing in a small group of 4. Conversation cards leads them with engaging topics. After each meeting, a session summary hints to add friends with other participants so that they can send requests to follow up.

🚀 Prototyping

After the envision, we narrowed down the three basic flow around three user stories: joining a room, talking about conversation cards, and sending follow up messages.

My group determined the workflow and sketched a mobile application in (very) low fidelity over a Zoom meeting. We tidied up the low-fi and sent it for a quick round of evaluation to the target users.

We tidied up the low-fi and sent it for a quick round of evaluation to the target users.

🔧 Testing

Iteration 1: lean evaluation
After sketching the low fidelity prototype, we conducted lean evaluations with 3 representative users to gather initial feedback. Key findings include:
  • Users want to know who are joining the table.
  • Users want to read the conversation cards while seeing other participants' faces.
  • Users want to have control on the conversation topics.
Changes are in line with the principles of heuristic evaluation
Based on the feedback, we updated features and made a medium fidelity prototype on Balsamiq.
Click on the tabs and check it out!
Summative Evaluations
We designed 4 tasks and conducted usability tests with 5 users using think-aloud method and post-test interviews to collect more suggestions about the product.
The prototype received an average rating score of 8.1/10.

4 of the 5 participants expressed that they would use the application for making friends.
LIKES

  • The concept of Breaking Bread
  • Prototype flow
WANTS

  • Block and report functions
  • Themed tables and card decks
Detailed documentation of feedback is synthesized by tasks, functions, and by the DECIDE framework. Based on priority, changes and new ideas are added to my high-fidelity prototype.
Iteration 4: High-Fi
Whew! The mid-fi has been refined in 3 rounds of redesign.

Based on the summative evaluation, I added functionalities to the design. A year later, I put in my product experience to improve the visuals and interactions.
  • Theme rooms
    Users can communicate about common topics they are familiar with and build relationships faster.
  • Activities
    The activities can be found as a theme from the home page. Users can choose the games to collaborate or compete with each other. It reduces social anxiety through user interactions towards a common goal.
  • Timed button and progress bar
    Users are given certain time to respond to each question. Minimum interactions are needed and the conversation .
  • Communication mode: emojis
    Users can share feelings in a more convenient and accessible way.
  • Shuffle option
    Instead of taking turns to select a topic card and send to the table, users can all see the topic card and can shuffle to change topic.

This is the high-fidelity prototype I designed on Figma. (It's far from perfect. I'm glad to hear any suggestions 😉 )

Lessons Learned

I had a great time and learned valuable lessons from this project and from my team. I also practiced a lot in lean UX and storytelling from the playback studios. Revisiting the project after a year, I realized how much better I have become thanks to myself and everyone working hard around me.

Tweaking a simple solution
Just like we can never identify all design flaws, it is impossible to make the best product for everyone right away.
The primary research revealed existing problems in many dimensions, and we spent a lot of time to decide on a focus. When prioritizing the ideas, it is sad to realize how some of the research participants can not get what they expected from the minimum viable product.

Even with a simple idea like Breaking Bread, it requires the maximum efforts to make sure it meets the purpose within the designed scenario. I stay empathetic for our persona Stephanie and prioritize on her needs. At the meantime, I believe all the research data are valuable assets for further iterations and making it closer to perfect.

Stephanie, I wish you the best:)
At the beginning of the semester, I was intimidated and unconfident like Stephanie. It was my first virtual project in the program, and team faraway friendship was built with 5 strangers in different time zones. The project was done in the virtual environment for the same context. Throughout the process, we learned from each other and built off from each other's ideas, and multiple groups helped us generate the data without meeting each other. I realized that the essence of communication has never changed: to embrace challenges and differences with kindness and an authentic mind. I hope to pass on my fortune to the Stephanies like me, to meet the supportive peers and colleagues that would make it shine for their college life.

Next Steps

Thank you for reading 💙