This is a project that collaborating with Hopelab and Center for Humane Technology together working on designing and exploring the positive core of technologies to improve the mental health and social media addiction of young adults.


Crue is a platform to help students find and create groups to meet new people and organize meetups to overcome loneliness.

Secondary Research

I still remember that when I came to America first time, totally new environment, language barrier, no friends make me feel so lonely and I know this situation, not just me, but more people have this mental issue. To confirm that more people have the same mental issue like me, we did some secondary research to understand this problem is serious in America as well.

In the statistics, we could see that the youngest generation are the most lonely by a significant margin, and it will develop to depression. And finally, generate suicide. 


Our partner HopeLab also working on trying to come up with solutions to issues related to teen mental & emotional well-being, focusing on loneliness among college students. They have a robust team of researchers and behavioral scientists and provided us with very insightful stories and data.


With the collaboration, we started thinking that How is technology + social media impacting this scenario?


Now they have an academic report of "Digital Health Practices, Social Media Use, and Mental Well-Being Among Teens and Young Adults in the U.S." If you want to understand more information about this issue, please check here

Primary Research

With HopeLab’s support, we interviewed 6 loneliness college students who are under the scenario that transiting from high school to college. And divide into 3 categories of our key stakeholders to understand their need.


We could understand the landscape from the stakeholder map, then to go deeper into the system, we used the iceberg model to find the leverage point through Jake’s story.

Jake feels like he doesn't fit among his fellow students in college. He is feeling lonely and might be developing depression. He stops going to class.

Other students at Jake's school also feel the same and stop going to class.

Jake addicted to Social Media, and making him feel even more lonely.

Jake has the need to feel like he belongs somewhere. The idealized world of social media makes him feel like he doesn’t belong anywhere.




Mental Models


How might we use tech to promote meaningful connections, by empowering each student to find their place?


We had several different ideation sessions, using different techniques and getting different stakeholders involved.


The first session is a creative session with CHT (Center for Humane Technology), and it is super honored collaborating with Tom Chi ( Ex-head of experience at Google X), Tristan Harris (CEO of CHT), and Aza Raskin (Ex-head of experience at Mozilla).

During this design session, we focus on how to create a 'beautiful world' online community and overcome the growing sense of loneliness. we explored ideas and rapid iterations together. In addition to the design session, the biggest takeaway is prototyping thinking from Tom Chi, which is a good way of using prototyping thinking as a part of research and ideation. 

After the design session with CHT, we ran another design session with our key stakeholders and trying to understand their ideas through the design session. We tried different ways of creating the 'magical moment' of bonding and in combination with our research insights, we learned that trying to emulate those feel artificial and that one of the most important things when creating relationships is the environment, which is people feeling like they belong, by finding their groups.


So, after a lot of concepts generated and quickly tested, we decided to approach the problem by facilitating group-forming.​ 

A platform to help students find and create groups to meet new people and organize meetups

Our solution involves 2 main concepts:

  • Helping students find the right group for them

  • Empower them to meet in person, make the group active

Finally, we want students to spend the minimum possible time in our app, but more actual connections in real life.


If you read Jake’s story on the iceberg model, you must remember the system of the problem. To help us envision how the product can help a student, we created this storyboard. 

Jake gets is accepted to college. He’s excited, but nervous.

He gets an email from Crue, and realizing that it could be a useful way to meet people, he downloads it. When jake signs up, the app prompts him to fill out his interests. Once he’s done that, it suggests some groups he might be interested in. He’s soon off to college in a new city.

When Jake arrives, he’s feeling very lonely– he’s never had to make new friends like this before.

He remembers about crue, and looks to see what events are happening. He sees that a pickup soccer game event is happening today from one of the groups he signed up for, so he joins the event.

When he arrives, he’s nervous, but having soccer as a common interest help him make friends more easily.

He meets some friends there, and they agree to meet again. 

3 months later, and they’ve become closer friends, walking to class together, and joining more events around campus.


Based on our concept, I built an interactive wireframe to show the flow. And we found some target users to test our concept to confirm that we are on the right track.

Frist using flow

Join a group flow

Usability Testing - Concept Phase

Fortunately, all of the testers are interested in our idea. And we got some valuable feedback from them. These are two strong quotes.

"I was a 'Meetup' and 'Eventbrite' user, but both of them focus on the event itself. We have different age and background. Maybe we just meet one time on the event and won’t see each other again. This product is focused on campus, which is safer for me and after the first meeting, we can build long-term relationship."

—— 21 years old Asian girl

"I think this would help me make friends, and those that share your interest are always a little better. If you have something that you’re really passionate you can talk forever about that."

—— 19 years old White boy

Their feedback gave us more confidence to develop this project.

User Testing - Iteration Phase

From here I quickly developed a higher fidelity product and took the different rounds of iterations out for testing.




First Iteration:

  • The density of information on the homepage was crowded, users want fast and directly to focus on events.

  • Remove the bottom navigation and replace it to multiple hierarchies navigation to highlight major features.

  • Add the college logo and avatar to the home screen to increase the sense of belonging.

Second Iteration:

  • Remove the college logo and avatar and replace them to the brand logo.

  • Add a friend feature to help users build relationships after the events.

  • Hide personal badges to keep the home screen clean.

  • Redesign all icons to keep the consistency and make the signifier clear.

These are only part of home screen iterations, actually, I iterated the how design language and a lot of details of other screens. If you interested in my iterations, feel free to contact with me.

Prototype & Motion

The demo motion prototype showed the main task flow for first time user.

We use illustration to show interests and pictures to show the group to distinguish between different states.

The horizontal sliding motion allows users to be clearer about group categories.

Illustration & Pictures

Horizontal Sliding

Simplified Event Card

Only showing the most important information (location and the number of participants) on the home screen to reduce the information pressure.

Highlight State Change

Using simple color change to show the state change, which makes users have a smooth confirmation cognition.







Boyang Jiao

Eduardo Franco

Timo Grossman

Prototype Design

Usability Testing

May 2018 -

Aug 2018



Usability Testing

Prototyping Thinking

System Thinking

Social Innovationn

Collaboration with Partner


For the next step, we will keep collaborating with HopeLab and Center for Humane Technology, and do more usability testing and iteration, If possible, we hope our product can be developed and put on the market, then collaborate with colleges to run experiments and what impact to society. ​

Through this project, I deeply felt the sense of social responsibility as a designer, which is also the original intention of me to become a designer in this new age. So if our product can reduce one more depression even suicide, that we are successful.

Design by Boyang Jiao © 2018

Last update: May 13th, 2018 @ San Bruno, CA