UX Projects | Yichen (Emma) Wang

ClubHack

Wed, 27 Apr 2016 00:00:00 +0000

Timeline: Sep 2020 - Dec 2020

Tools: Figma, Miro

Role: Designer, Researcher

Other Info: Class Project for Human Computer Interaction Design

Overview

We were fortunate that Cornell’s campus was open to students during the pandemic. However, most classes were online and in-person events were limited to small gatherings. In these conditions, it can be difficult for new undergraduate students to meet people and make friends even though they were all in close proximity to each other.

Project Goal: Design a solution that makes it easier for new students to meet one another and help them build a community of close friends.

Target user group: New undergraduate students at Cornell including freshmen and transfer students who are on campus.

Overview of the final solution: An app that helps students navigate the competitive club recruitment process (more on club recruitment later). It matches users to clubs based on interests and desired club culture and a chat function that allows users to speak and complete a virtual or in-person activity with a club officer.

Fill out profile information:

Search for clubs:

Schedule meeting with an officer:

Modify profile information:

User Research (Part I)

We conducted interviews with 3 new undergraduate students to understand their current experiences with making friends on campus and what they look for in a friend. Using Miro for affinity diagramming we gathered 3 key insights:

Interviewees were limited to meeting friends through mutual connections. Due to restrictions on in-person gatherings, interviewees had difficulty in creating study groups for classes and making friends organically in social settings.
Interviewees reported preferring friends who shared the same interest, values and have genuine personalities. Most noted that they still value people with shared values over shared interests, but it is easier to connect if there are shared interests.
Interviewees reported to use Facebook to add an extensive network of friends whereas Snapchat and Instagram were used to chat directly with a select group of friends, sometimes leading to in-person meetings.

We constructed a persona, Emily, based on our interviews:

Current Solution Space

We explored the current solution space to see what problems have already been addressed and what was missing based on our user research.

What existing solutions address:

Allowing users to be exposed to a diverse population of people across colleges
Provide students with the opportunity to meet people remotely during the pandemic
Being able to make new friends in the user’s academic year, major, and with those experiencing similar challenges.

What’s missing:

No virtual to in-person meet-up conversion in one solution
Harder to get to know someone on a deeper level
More difficult to create a support network online compared to in-person

Brainstorming

As we were brainstorming, we realized that our design ideas stemmed from surface-level insights and didn’t properly address a core issue within our identified user base. In order to gain additional insight, we conducted another round of user research with one of the previous interviewees and recruited a new one.

User Research (Part 2)

Final affinity diagram:

Note: the arrows represent hierarchical relationships between clusters

After the additional interviews were completed and updating our affinity diagram, our group uncovered a new insight: the difficulty that new students faced in joining competitive clubs.

Back to Brainstorming

With the new insight in mind, our group realized that interviewees have made unsuccessful efforts towards joining communities and making new friends through club recruitment because of the lack of understanding of the recruitment process, misinterpretation of club culture, and the lack of prior connections within the club. Although “coffee chat” opportunities exist for prospective applicants, some mentioned that coffee chats are intimidating and that conversations are often transactional and surface level.

The design idea we moved forward with was the one mentioned earlier in this article.

Tasks:

Pre-Matching Survey

Users fill out a survey when they set up an account on the app so that the app can generate a list of clubs that match their interests.

Searching for Clubs

Users use keywords to search for a specific club they are curious about, but were not matched with or clubs catered toward a specific interest.

Chatting with an Officer

The user can chat with or set up a meeting with a club officer to learn more about the club culture, recruitment process, and connect with them on a more personal level.

Prototyping

We sketched basic UI screens together and used that for the basis of our paper prototype, which we used to conduct user testing.

You can view the full paper prototype here.

The main changes we decided to make based off user feedback were:

Make the menu bar present on all the screens
The chat function should also be available for both in person and virtual meet ups
Include a section that lists clubs similar to the club being selected

We also decided to add a 4th task: editing your profile. This allows the user to update their profile if their interests change so that they can get matched to clubs that match their current interests.

Keeping in mind the feedback from our user tests, we created a mid-to-high fidelity prototype of our app in Figma.

Fill out profile information:

Search for clubs:

Schedule meeting with an officer:

Modify profile information:

Usability Testing

One of the goals of this app is to make navigating the competitive club recruitment process easier, so it was important that we test the ease in which the user can use our app and user satisfaction. The usability metrics we focused on were effectiveness, learnability, error rate, and satisfaction.

We recruited 3 users in our target user group to conduct a usability test of our high-fidelity prototype. Based on the user testing session, we identified a list of UX problem instances (UPIs) from our usability testing session. From there, we identified the underlying UX design problems (UDPs) that caused one or more UPIs.

For the most difficult design changes, we chose not to implement them for the final prototype due to the time constraints of this project.

Final Prototype

Reflection

While this app can’t automatically get people accepted into clubs, it can make the recruitment process easier and make it more likely for them to be able to join a competitive club by allowing students to connect with club officers. Getting into an organization is one step a user can take towards to meeting more people and making new friends. Even if they aren’t accepted into an organization, they are still able to meet a club officer who shares the same interests as them. While the focus was on new students to Cornell, any Cornell student interested in joining competitive clubs could also use this app.

Of course, there is always room for improvement. A next step would be to implement the other design changes that we said were not feasible due to the time constraints of the project and conduct another round of user testing. We would also need to consider how club officers would interact with the app, since for the sake of this project, we only focused on designing the interaction for new students who want to join competitive clubs.

Note: This is a shorter version of an article I wrote on Medium. You can check out the full article here.

Reconnecting with old friends on FB Messenger

Wed, 27 Apr 2016 00:00:00 +0000

Timeline: Feb 2020 - May 2020

Tool(s): Figma

Role: Designer, Researcher

Other Info: Class Project for Intro to Digital Product Design

Overview

Facebook Messenger is a convenient and easy way to text other people, especially if you already have a Facebook account. However, just because you are able to contact a large number of people easily does not meant that it is easy to stay in touch with people.

For this project, I created a feature that recommends friends for users to reconnect with and incentivizes the user to reconnect by allowing them to send confetti.

Check out the prototypes in action:

Sender (the one sending the confetti) -

Receiver (the one receiving the confetti) -

User Research

I conducted interviews with students who use FB Messenger and asked them questions regarding if/how they reach out and whether they were content with how in touch they are with old friends. The insights that I got were:

There was a lot of variation in whether people desire to stay in touch with their old friends
Users feel awkward about reaching out to their old friends
Users are unsure of what to say when the reach out to old friends

About half of the interviewees were content with how they were keeping in touch with old friends, while the other half wished that they could keep in touch with more people. I decided to move forward with this problem space because I still felt that there was value in pursuing this problem space, since relationships vary from person to person and even if some people were content with how things were, there were still many interviewees who wanted to keep in touch with more people.

So, how do we encourage users to reach out to old friends on Messenger?

Ideation

After a brainstorming session with two other friends, we ended up with 3 possible solutions worth exploring. For each of them, I developed a low-fidelity sketch.

A reconnect button - users can indicate that they want to reconnect with another user and that user will be notified
A guilt-tripping time display - displaying the amount of time that has passed by since you last talked to another user
A collaborative game - provide a challenge for the users to complete and discuss together

The idea that I ended up pursuing was the first one because:

Reconnecting with another person would only be valuable if both users wanted to reconnect with each other.
Knowing that another user wants to talk to you could potentially ease the awkwardness of reaching out to someone.
The fact that both users want to reconnect with each other could be a good conversation starter

Developing User Flows and User Testing

I developed several mid-fidelity user flows for the sender (the one reaching out) and the receiver (the old friend the sender wants to reach out to). After conducting user testing with the flows that seemed the most promising and iterating the flows based on participant feedback, these were the flows that I developed:

Sender

App recommends someone for the user to reconnect with in the form of a pinned chat
User sends message

Receiver

User receives message in a separate reconnect inbox
User responds to message

However, when I sought feedback from a teaching assistant, she noted that the feature seemed empty since it just separates messages into two inboxes. When users reconnect with someone, it should feel more meaningful since they are rekindling a relationship with someone. This led to the addition of allowing the users to send confetti.

Confetti is cute, fun, and different from the other functionality that Messenger offers like stickers and gifs. I thought that confetti could make the interaction feel less awkward by incentivizing reconnecting with old friends. Since this functionality would only be available if the user is reconnecting with someone, it also makes reconnecting seem more meaningful.

After modifying the user flow to allow users to send confetti, I conducted user testing. This is the final flow after incorporating feedback from participants.

Sender

App recommends people for the user to reconnect with in a separate reconnect inbox
User selects user they want to reconnect with
User types a message to send to the user
User selects confetti to send

Receiver

User receives message in the separate reconnect inbox
User views message and confetti animation
User responds to the message

Reflection

Ideally, I would have liked to have done another round of user testing, but due to time constraints, I was unable to do so. I would love to test out my final prototype again in the future! Another thing that I mentioned was figuring out how the app would recommend people for users to reconnect with. I didn’t quite figure out the details of how a recommendation system might work, but if given the chance, I would be open to discussing with engineers on the technical constraints of creating such a system and what factors should be considered when developing the system.

Note: This is a shorter version of an article that I wrote on Medium. You can check out the full article here