Watson Barry

Streetalk

Welcoming newcomers
through slang & culture

Timeline

Aug. ’19 - Sep. ’19 3 weeks

Methods used

Research, Ideation, Visual Design, Prototyping, Testing

Team

Kaitlin Mich, Alison Joy,
Dan Pinzke, Brett Saito, & Me

The Challenges of
Joining a Foreign Culture

Overview

There were 360,000 Chinese citizens studying in the U.S. in 2018, representing 30% of all foreign students here. They come to pursue a degree, feeling confident that their English will allow them to succeed. Instead the opposite is often true.

As I explain our design process, we will follow the journey of Zhang, an 18 year old Chinese student coming to the U.S. to receive a degree in Marketing, to better understand the pain-points and opportunities that exist for these newcomers.
Zhang is excited for all the new experiences she will have at college in the U.S.
Zhang struggles when the English she'd learned doesn't hold up.
She feels isolated and lacks the confidence to make American friends.

Founded with first-hand experience, Streetalk aims to help

Client Request

Validate a need for language not taught in school
The founders know there are a lack of tools for supporting these students because they have gone through it themselves. They approached our design team with the request to test the value proposition of a dictionary for English not taught in schools.

Our Solution: Language + Culture

We identified that while language played a large role, it was the large cultural differences that created doubt and the feeling of isolation. The team and I developed a prototype for a mobile app to address the questions and insecurities about U.S. culture.
360,000
Chinese students enrolled
in the US in 2019
$13B
Spent by Chinese students
in the US in 2019
0
American apps teaching
U.S. culture and slang

Trends in Language
& Cultural Education

DIscover - Competitive Analysis

Apps are focused on teaching textbook English

We looked at 9 competitors, 5 direct and 4 indirect, to better understand the tools being provided to Chinese students,

Market Differentiation = Curated Content on US Culture

Key Takeaway

There is currently a gap in the marketplace. The apps that teach conversational language, including slang and idioms, don't have Chinese translations. While those that have Chinese translations don't have colloquialisms.

Sites that have user-generated material don't filter their content. Out-of-date and inaccurate content is mixed in relevant subject matter.

Integration
& Non-Verbal Cues

DIscover - User Research

How Chinese students are answering their questions successfully

We interviewed 13 Chinese students, spread across undergraduate, graduate, and working post-graduation to get a better understanding of how their experience changed with time.
"I tried to spell it out in Google, similar to what I heard, but I failed."
Zhang turns to those near her ask for the meaning of words.
Difficulty spelling searches is a common pattern for questions about words. For cultural questions, students are asking other Chinese people on message boards. The information is not located in a central source that is easy to navigate.
" I thought I knew English before I came."
The apps available to Zhang don't solve the conversational language gap.
Without tools to improve their interactions, Chinese students are frequently returning to the comfort of fellow Chinese students, and isolating themselves in a bubble.
"It's more about behavior than what language to use."
Zhang uses interactions with American peers to learn and mirror behavior.
The benefits of listening to pronunciation and watching behaviors, translate to apps too. Students are drawn to audio and visual content for the added meaning they provide.

Problem Statement

Unfamiliar Chinese students need a tool that gives them the confidence to make connections in their new home.

The Need for
Cultural Context

Define - Personas & Journey Maps

A newly arrived Chinese student was the ideal user to solve for

Our research identified that the needs and questions Chinese students have vary depending on where they are in their journey. The team and I decided to solve for the newly arrived undergrad because they are given the least amount of resources to fit in and if they fail then they are most likely to retreat to the comfort of international students and give up on trying to integrate.

Reintroducing Zhang Ying

We used Zhang's Journey to identify opportunities for an improved experience.

When I first came here, I was really brave. But later on I realized ‘Oh actually the English I'm using is actually very different from the local English’. And then I went back in my shell.
Chinese student in U.S., female, mid-20s

Exploring Dictionaries
& Cultural Content

Develop - Divergent Concepts & Testing

Designing definitions that give context

Why We Tested

Despite not solving the entirety of the problem, the dictionary still has value. We wanted to explore the ideal depth and balance for a definition.

What it Solves

A dictionary allows Zhang to browse and search for answers in-the-moment.

pros

Pronunciation examples
Definitions in English & Chinese
Use in a sentence
Gifs
Related words
When (not) to use

Cons

Memes
'Spicy' Meter for how NSFW a word is

Testing for the best practice of displaying culture

The amount of context a concept provided determined its success. Gifs and use cases were well received because they gave an added understanding beyond the definition.

The 'Spicy' Meter and Memes did not test well because their meaning relies on local knowledge of humor. When explained, the 'Spicy Meter'  then tested well because users liked the context it gave them at a glance.



Key learnings

Why We Tested

We tested to learn how users would react to different presentations of cultural material.

What it Solves

This answers the cultural questions that can't be answered by a dictionary.

Pros

A feed populated with visual content
Interpersonal Do's & Don'ts
Articles & Guides
Gifs
Bookmarking
Sharing Content
Gamification
Upvoting & Downvoting
What other users are saying
Word of the Day

Key Learnings

Users placed a higher weight on Chinese for long-form articles and guides. This weight did not carry over to audio or visual content, where English content was preferred in some cases.

Users preferred content that highlighted human interactions, and asked for more content covering this. This validated our assumption from research that more cultural education was needed.

Cons

Starting the
Feedback Loop

Develop - Prototyping & Testing

Applying Cultural Context

We applied the insights gained during testing, and further explored the visual representation of cultural information. We decided to approach the next opportunity for user feedback with a two pronged approach of cultural content and definitions, centered around a discover feed.

Validated cultural & interpersonal context

We tested onboarding, definition search, cultural content search, and timeline preferences to gauge user value and ensure that the design was intuitive.

100% flow completion rate

Content catering to the current position of the user tested very well. Users requested that they have the option to set it during onboarding so that their home content could highlight it.

Range in content display generates high user satisfaction

‍Overall users responded well to the app across the board. Some users preferred gifs, videos, and browse over related words and search, and vis a versa; however, the logic behind both was the same. They liked the functionality and culture it brought to their lives in solving their problems.
Users particularly liked that they could bookmark this content, and requested that they also be able to share them with friends. This is a topic that we had discussed with the stakeholder about including in future iterations of the MVP, once the core value proposition had been validated.
To create the above designs, I created a visual language and design system.

Based on the feedback for the spicy meter during concept testing, I iterated on the looked at best practice across the industry for communicating tone to an international audience. This resulted in the following emojis using the character branding I had come up with for elsewhere in the app.

Designing a System to Span Across Languages

Typography with the Golden Ratio

We went with the sans-serif Rubik. The large x-height combined with the rounded corners capture a legible but playful vibe. A sample of the stylings are shown below.

Improving Accessibility - Color

The original color scheme was designed by someone without a design background. It captured a fun vibe, but scored low in accessibility for the vision impaired. I explored other options, improving the WCAG score by a factor of 4.

Atoms - Building Blocks

I created basic atoms that could be used across the app and maintain a consistent design. This is a sample of some of the atoms created.

Setting the Stakeholder up for Continued Success

REFRAMING AND VALIDATING THE MVP TO INCLUDE CULTURAL CONTEXT

Our team evolved the initial MVP from a dictionary to include cultural content and provide greater value to users.

We provided a bootstrapping startup, looking towards a 2019 beta test and 2020 launch with the following quantitative and qualitative value.
Quantitative
Gained actionable insights from 24 prospective users.
Studied 9 competitors and identified market opportunity.
Determined how LTV could be extended beyond initial expectation of 2-4 years.
Increased WCAG accessibility for visually impaired by a factor of 4x.
Qualitative
Validated the MVP, and improved product market fit via inclusion of cultural content.
Mapped users' journeys and identified how their needs and questions change over time.
Identified how users wanted content displayed to them.

Next Steps + Key Learnings

Designing For A Global User Base

Streetalk aims to eventually scale beyond a Chinese audience to the larger global population. Due to the short nature of this contract, we didn't have as much time to explore designs and best practice for different nationalities. Chinese has both vertical (zongpai) writing and horizontal (hengpai) writing, so we adopted a horizontal solution that would work for all left to right written languages. However, with more time I would have liked to explore how to display content for languages that exist only in a vertical fashion.

Stakeholder Communication

This was a learning experience over the course of the project on establishing and maintaining clear lines of communication with the stakeholders. The first few days, our team did not ask enough clarifying questions, and spent some time working in an inefficient fashion, operating on false assumptions. After realizing this mistake, we focused on improving our flow of communication. My key takeaway was that honest communication about obstacles and approaches toward solutions yielded more effective work and results for both parties.

Next Project

ChiDash
A web dashboard empowering Chicago Alderman to better represent their constituents.
Read Case Study