Chit Chat

A Social App for international college students arriving to America

Overview

Role: Product Designer

Duration: 2 weeks

Tools: Figma, Canva, Miro

The Background

In 2019-2020, US colleges and universities admitted 1,075,496 international students. Coming to the States can be confusing and students can feel culture shock.

A social app that would allow international students to sign up for english conversations facilitated by American college students would be beneficial in making their transition smoother and easier.

The Challenge

To design a responsive mobile social interaction application that allows users to book in person meetings or chat online to adjust to American culture.

 Research- Understanding International Students

Research Objectives- Focusing On A Specific User

  • Determine if international students like practicing English with people or on their own 

  • Determine what helps them with loneliness, culture shock, and homesickness

  • Determine what social setting helps international students feel welcomed and comfortable

Competitive Analysis- Understanding What’s Already Out There

I started off not knowing whether the app would be more of a language learning app or a social connecting app, so I researched both in order to note strengths and weaknesses from each.

Key Findings from Competitive Analysis:

All companies had simple and clear UX design along with user feedback on exercises/lessons.

All apps had a free version and “bite-sized” lessons.

Most apps offered 10-20 languages while HelloTalk offered 150.

SWOT Analysis of Competitors

Takeaways from SWOT Analysis:

Can use the strengths to capitalize on opportunities to make the language app better

Apps that are clear, easy to use, and provides feedback while learning are all good elements to learning a new language

Based on studies and articles, bite-size lessons help users retain information but not get overwhelmed. Most users are learning a different language on the side so they do not have time to dedicate long chunks of time to learn the language.

Surveys- Gathering General Trends and Information

Overview:

7 total participants

Age range: 22-27

Home Countries: China, Ghana, Zambia, Spain, Vietnam, Singapore

Results:

Worries for coming to America: Language & adjusting to American lifestyle/society

Hardest things to adjust to: Language, making friends, finances

What helped: Friends & roommates, family, joining a community

Link to the survey

From the survey, I gained an understanding of international students and got a glimpse of what makes it hard to come to America from another country. From there, I tailored my interview questions to address the topics that were mentioned.

Interviews- Finding Out How They Adjusted

Continued research by conducting 1:1 interviews with 4 participants who filled out the survey that met criteria for my target audience. I mainly focused on their adjustment period to America and asked questions along the lines of: what helped you adjust, what made it difficult, what did you wish you knew, and how did you prepare.

Once the interviews were conducted, I grouped similar data points to synthesize the interview and found converging trends which are shown below!

Some pain points for participants were the following:

  • Coming to the US, students had a hard time with others understanding what they were saying.

  • Students had a hard time communicating in general because they were not used to speaking English, only learning it academically.

  • Students had a hard time adjusting and understanding American culture and lifestyle- social norms, cues, food, and even the education system.

  • Students did not know what to expect coming to the US, which caused worries and anxieties.

After gathering the pain points and data, I created “How Might We” (HMW) statements to provide direction and focus on what the app will be.

How Might We Statements:

  • How might we help participants get better with their English conversation skills?

  • How might we help them feel more confident about the English that they already have learned?

  • How might we teach them about American culture?

  • How might we paint a picture of what it looks like to live as an American student in college?

After the interviews and HMW statements, I concluded that the best thing for my users would be a social app rather than a language learning app. While I learned that it was important for international students to become proficient in English, there was a big need and desire for them to connect with others and acclimate to America in the social sense as much as the academic sense.

 Define- Defining the User

Empathy Map- Synthesizing My Findings

Based on the interviews- especially quotes that participants used, I created an empathy map to capture the mentality and inner workings of a potential user!

Personas- Creating My User Based on What I’ve Learned

From the research, survey, and interviews, a Persona was created to fit the converging information, Jasmine Chiang. While I am not considered “international”, being from an Asian-immigrant family, I had specific goals, emotions, and motivations in mind for my user.

Design- Bringing the Product to Life

With all the surveys, interviews, and research done, the work began of starting to make the product! This phase was focused on deciding what features would be needed for the app and how I could make it simple, easy to use, and beneficial for the user.

Site Map- Organizing the App into Sections

The sitemap was created to visualize what each section would contain and lead to.

User Flow- How the User Will Use the App

With Jasmine Chiang in mind, this is the reason behind wanting to use the app:

“As an international college student from China, I want to meet more Americans to have conversation with, so I can not only practice my English but also make lasting friendships.”

Creating the user flow provided clear direction for the app. I decided that the 1 feature I would focus on building out extensively would be the chat function. I wanted to allow the user to have the option to meet up with an American student 1 on 1 or in group settings because it allows them to practice English but also connect with people! From 1 specific interviewee, she mentioned that she would like an app where international students could ask a question online- which I thought it was a good idea so I included that in my app.

Sketching- Bringing the App a Drawn Reality

Based on examples of other social apps and competitors, I sketched a few options for each page and focused on sketching out the chat component of the app.

Wireframes- The Skeleton of the App

After sketching out various options, I went with the options that were clear and simple. Multiple people that I interviewed mentioned that the different language apps they used were confusing so my goal was to make it simple for international students to use. With them in mind, I tried to make the app readable, intuitive and easy!

UI- Filling Out the Skeleton

When deciding the colors, I wanted the palette to be bold and noticeable. As people were using the app, I wanted them to feel confident and assured.

I wanted to have the name of the app be about connecting or talking. I listed off potential names, trying to have a quantity of names to choose from. Some options included: link, wordpal, chatpal, connect, converse, chitchat, bond, wordmate.

In the end, I went with ChitChat, giving it a casual but social feel!

I created some potential logos by focusing on a chat bubble with inspiration from the web.

With the color palette in mind and some inspiration from dribbble sites, pinterest, and social apps, I created the style tile for ChitChat.

Style Tile:

Responsive App- First Version of Chit Chat!

Finally, the first draft of the site is created! With a lot of research, defining, designing, and commitment to the product and the user, here it is:

 Testing- Does It Work?

Prototype- Testing Out the Progress of the App

I made a prototype with Figma in order to have a mock up of how the product will be. Having the prototype allowed me to test 4 users.

Using Figma presented problems as it glitched and had a toolbar that block users from being able to complete actions. However, with simple adjustments to the prototype, it was better and easier to use.

Take a look HERE to check out the prototype!

Affinity Map- What Changes Can I Make Now?

After creating the prototype, I had 4 participants test the site and provide feedback on the tasks. I distilled it to post-it notes and created an affinity map, which allowed me to prioritize and decide on the changes that should be made to the product.

Iteration- Making Those Changes

After receiving feedback from the participants, I made the necessary changes to have a more functioning prototype and I focused on:

1. A more detailed confirmation page and

2. “Others” icon for the topics of interest filter page.

Next Steps

  • Build out other functions of the Chit Chat App

  • Continue to iterate, test, and update

  • Prepare the product to handoff to the next team: developers

Learnings

Ask people for their stories. The interviews where people shared their arrival to America: what they were doing, where they went, how they were feeling, helped me determine that what international students needed was social interaction more than becoming proficient in English.

Prototypes matter. How well the prototype works or doesn’t really colors the experience for the user. Even if the product itself is built well, a lacking prototype will frustrate the user.

Users provide valuable insight. Because the user is the “expert” in regards to what the product needs, they are able to provide insightful feedback and suggestions. The idea for an online chat function was from an interview I conducted with a college student.