Case Study:

Hao: Speak My Language

Speak My Language

View the Prototype

A live translation app designed to help increase the independence and life quality of non-English speaking seniors.

A Freemium App

Powered by volunteers on a free version, and a  professional translator team with guaranteed confidentiality policies on a paid subscription.

Designing for Accessibility

Bridging the gaps between cultures, generations, and language barriers with one simple call.

Role

UX Researcher | UX/UI Designer | Product Strategist | UX Writer

Time

12 Weeks

Methods

User Research | Prototyping | Wireframing

Tools

Figma | InVision | Otter.ai | Zoom | Google Docs

An Opportunity for Disruption Revealed

My eyes were opened to an accessibility barrier that was affecting thousands of people in BC when my mom came to me for assistance  booking her COVID vaccine. Although the public campaigns promised assistance in 120+ languages, she discovered that it was purely by the luck of the draw. The online booking system was confusing to maneuver and the phone operators who answered your calls were not guaranteed to have any language skills apart from basic fluency in English.

This frustration had ripple effects further into the BC Chinese Community. Not only was my mom trying to book her own vaccine, she was attempting to learn the system so that she could assist the 10+ seniors who had already reached out to her for assistance as well. None of her 3 calls were answered by a Chinese-speaker, and so she did her best to communicate with her last impatient phone operator.

This experience helped me understand a painful truth about the lives of non-English speaking seniors: Our worlds are only as big as our ability to communicate with those around us. Non-English speaking seniors depend wholly on the benevolence of their support systems and strangers to help them interact with the world around them, stripping them of their independence, agency, and opportunity to explore.

What does the current research say?

again

My primary research was an exploration of the felt experience of non-English speaking seniors

A photo of two East Asian seniors sitting on a sea wall, leaning against each other. They are facing inland looking at a phone screen. The man is holding flowers and the woman is holding the phone.

A language barrier of my own:

How do I communicate with seniors who are unable to use English?

Ironically, the most significant primary research constraint that I faced was my own linguistic limitation. I'm a native English speaker, but apart from that, I'm a novice level Cantonese speaker with only an HSK level 2 reading and writing ability. I have a rudimentary level of understanding in Spanish, but I struggle so much with the syntax that I would be considered incoherent.

For this reason, I decided to limit my pool of research to Cantonese speakers only. To ensure that my interviewees were not frustrated, I also enlisted the help of a translator in case I stumbled upon vocabulary that surpassed my abilities. This constraint also helped me narrow down my first app users as Chinese speaking seniors.

While I used Otter.ai to record my interview sessions, I was unable to have the audio transcribed as it did not register non-English languages. The path to gaining understanding was incredibly humbling and helped me grow in empathy for these seniors who lived in this restrictive state 24/7, through all facets of their lives.

criteria
introQs
supportQs
expQs

General Insights

Language Related

Technology Related

Connection Related

2-User-Pain-Points
2-frustrations2

The Problem Space Defined

Seniors

are unable to fulfill their day-to-day needs because of an English-langauge barrier. This leaves them anxious and helpless as burdens on their loved ones.

Support Networks

are being over-relied upon to translate a world of information and interaction for non-English speaking seniors. This puts imbalance in their relationships.

Businesses

are failing to provide vital services to these seniors and are losing an entire market segment as seniors travel far distances to access langauge support.

pexels-rodnae-productions-5637484
photo source: pexels.com

"There are so many older people who are in need of help... so many whose families have given up helping, and now we need a larger social response and solution.
Seniors are needing to find help to survive in this society but are facing barriers they could not possibly face on their own."
-Interviewee, 65-year-old male

So, How Might We...

hmw2
How Might We assist non-English speaking seniors with language barriers in order to make their tasks more accessible?

Meet Chen Sing

Chen Sing - User Persona (Photo Source: Pexels.com)

Chen Sing's Shopping Journey (Current State)

I broke down each step of Chen Sing's shopping journey to better understand her shopping experience. This helped me gain empathy and visualize the areas of opportunity.

I chose the first opportunity that would disrupt the experience before it became negative. Here, I could remove the need to create extra labour for her support network, and prevent a loss in sales for the business.

final-Experience-Map-Current-State
Current State Experience Map

User Stories

Seniors like Chen Sing typically have strong familial and cultural support networks that are available and willing during times of crises. Their biggest moments of frustration appear in their inability to complete day-to-day activities in the timeline and capacity they desire, rather than around the availability of support needed.

The micro-inefficiencies of constantly having to re-schedule small tasks, like grocery shopping or sorting mail, compound into a severely restrictive lifestyle which affects their support systems as well as the businesses and services with whom they need to interact. It becomes a burden on all parties and builds tension in relationship.

I wrote a number of user stories and arranged them into epics, pictured below, which represent different functions and needs the app could fulfill. I chose a user story that best represents the app's value in the day-to-day life of a senior, their support network, and the business where they are shopping.

The Chosen Story:

"As a senior, I want to be able to ask questions in the moment so that I can make immediate decisions."

User-Stories-Capstone-Part-2-1-2-1
List of potential user stories

Moving from a User Story to a Task Flow

Task-Flow
Task Flow Chart

Design Constraints

To keep the needs of seniors central to the design, I researched their needs both physically and mentally.

A translation app designed for non-English speaking seniors would require:

The Metamorphosis of an App

Moving from notebook sketches through 3 rounds of mid-fidelity iterations

My research showed that seniors struggled to remember each step of a task completion journey. For this reason, I decided that the Hao opening page would always be a quick step-by-step tutorial on how to use the app. If users did not want to watch the tutorial, they could easily skip to the next page.

Sketches_-Instructions-Page
new-Sketches-Homepage

The Home page only has 2 main functions: video call and voice call. This minimizes confusion, distraction, and the potential for error for senior users. Those in their support networks can access more features and information through the user profile area, accessed through the bottom navigation.

The call screens went through the most changes for the sake of clarity. The loading screen was unclear to testers in the lo-fi and mid-fi prototypes.

I also made an assumption here that the translator would be able to give the senior step-by-step instructions to flip the camera view and to take snapshots for translation purposes.

new-Sketches-Call-Page
new-rating-page

I chose to use a thumbs up/down rating system because of it's familiar meaning and because it was the clearest indicator of a choice between a positive and negative experience. Adding backings and labels made it more obvious that the icons were independent buttons rather than a rating bar.

The confirmation page helps the senior understand that their rating has been received. In iteration 3, all buttons were given full screen width frames to create familiarity so that seniors could instantly recognize them.

new-Sketches-Rating-Confirmation

User Testing

Each change to the iteration above came directly from user testing feedback

I completed 3 rounds of user testing with 15 individual participants in total. Two rounds were in English, and one in Chinese.

Participants were tasked with 6 specific steps to complete, and each task had a 100% successful completion rate.

This is due to the simple UI which limits opportunity for errors.

new-tasks

Round 1

Test-Results-Round-1
Matrix-Round-1

Round 2

Test-Results-Round-2
Matrix-Round-2

Round 3

I chose to do a 3rd round of user testing to gain some insight and feedback by Chinese speakers and some seniors as well. The prototype was made in Simplified Chinese and all users completed their tasks successfully.

The feedback was very positive, and the seniors in the group found that the large text was helpful and the simple layout was clear enough for them to know how to fulfill objectives without any confusion. The seniors especially appreciated that all buttons and icons were labelled so they would not need to make any guesses.

Test-Results-Chinese

Visual Identity

Visual branding was another opportunity to centre the needs of the seniors.

Refining the Brand

Step 1: Describe the brand with adjectives

Step 2: Curate images that suit the mood

I sought out images that evoked a feeling of structure to bring calm order to situations that feel like chaotic disorder. I wanted to represent a feeling of openness with breathing space.

Screen-Shot-2021-06-20-at-3.17.11-PM

Step 3: Choosing a good name

I brainstormed names that had easy sounds to make and had minimal explosive sounds. I wanted a name that would be comfortable to say for people of different backgrounds and easy to remember.

WordItOut-word-cloud-4736902-1

I brainstormed names that had easy sounds to make and had minimal explosive sounds. I wanted a name that would be comfortable to say for people of different backgrounds and easy to remember.

Hao: Speak My Language

Pronounced like "how" because in English we'd often say "How do I ..." when seeking help.

My first users are assumed to be Chinese seniors. "Hao" is also the Mandarin word for "good" which will create a sense of familiarity (new tech is hard enough) and a positive associations with the brand itself. 



Hao is a homonym; a beloved play on words within Chinese culture. The tagline is “speak my language,” a gift that we didn’t know was such a gift until we feel its absence.

View the Full UI Library

View the InVision Moodboard

With a name settled, I was able to establish a colour palette

High contrast colouring with a bright, happy tone maintains the positive, stress-free experience for the user.

colour-palette
colours2

Choosing a Font Family

fonts
black
bold
Regular
light
medium

Creating a Wordmark

Step 1: Sketching

I drew a sketched a few general concepts for what my wordmark could be. I tried to emphasize the feeling of connection and communication.

8X5XJfUC7KHYb0QC96R10d4F-1
FNMMh5LrattD1HK2U4tPdbt7-1
Slide-16_9-10

Step 2: Vectorize and Play

I remade some of my favourite sketches on Figma and vectorized the text and icons.

Step 3: Finalize the Wordmark

I decided to stick with Poppins, my main font family with a couple of changes:

  1. Lengthened the stem of the "h" to clearly differentiate from "n"
  2. Rounded all of the corners on the "h" and "a" letters
  3. Increased the curve of the "h" for a more rounded feeling
Branding-2

High Fidelity Frames

hifi-Task-Flow

View the High Fidelity Prototype

iWatch Integration

Convenient voice-call translation services

Since 2019, Apple has been encouraging the adoption of smart watch technology for seniors by incorporating design features such as remote family setup, fall detection, and industry leading heart rate/02 monitoring. Apple has also designed a screen that is 30% larger, and added accessibility features to allow for larger font sizes.

As a result, this has lead to an increase in seniors who are choosing to purchase the iWatch for themselves as well as receiving them as gifts from loved ones. Though adoption rates are currently slow, they are expected to increase over the next few years as accessibility and wellness come to the forefront of design.

watch1
Call Screen

watch2
Error Prevention Screen

watch3
Confirmation Screen

The translator's photo and name will still appear on the call screen to maintain a level of familiarity between the senior and their translator.

I chose to keep the high colour contrast and error prevention designs to keep the senior's usability experience central.

A final confirmation screen ensures that the senior is always informed on where they are in the process.

Connecting with our users

While the app is geared toward seniors, I am acutely aware that the typical senior would only be able to download it and complete the onboarding process with assistance from their support network.

I designed this marketing website for the people in the senior's support network who are seeking support of their own in caring for the senior. This will be a tool to supplement their efforts.

There is also an assumed secondary audience of businesses who may wish to elevate their services with this translation experience. The pricing structure also includes a list of brands that use Hao.

mobile-Home-Page
Mobile Marketing Site

View the Mobile Prototype

Home-Page-1
Desktop Marketing Site Hero Section

View the Desktop Prototype

A Simple Solution With a Big Future Impact

Removing Business Limitations

A simple to use app like Hao can democratize the business world by extending the opportunity for translation services to businesses as small as corner stores to giant amusement park chains. This also frees the business from missing out on qualified employment candidates by removing the needs to provide in-house language services which are typically sub-par.

Travellers Welcome

Although the primary audience would be non-English speaking seniors, the high level of accessibility in design on this app could make it an ideal travel buddy. Travellers in foreign countries could skip the frustration, fear, and stress of pre-learning a language by utilizing the Hao app.

Restoring Healthy Family Relationships

This app is designed to improve the lives of non-English speaking seniors by making it possible for them to live more independently again. This will significantly lighten the burden of caretaking on their support network. In cultures that value filial piety (such as in Chinese culture), the burden of caretaking is exponentially higher and creates significant tension in relationships to the point of implosion. A 3rd party addition like Hao could be a low cost solution to returning to healthier familial relationships, better mental health for all parties, and clearer boundaries between parent and child.

Key Learnings

This design process has taught me the value of first seeking to understand the user and the context of the situation before trying to solve a problem. I've learned that human-centric design is not a fad; it's a way of ensuring we value humans over work, and seeking viable solutions rather than just completed task lists.

I have also learned in this process that I am not apart from the experiences of my users. In my journey to create a solution to the language barrier problem, I found myself experiencing just the tip of the iceberg of an issue that I never expected to face. The user experience is very much just the human experience.

pexels-rodnae-productions-5637739

"For [youths] to grow well, it requires much love and learning. Understanding more cultures than your own... having global knowledge.
It is important to have an intercultural community, even if they don’t fully understand it yet."
-Interviewee, 64-year-old female

Hao: Speak My Language

A live translation app is designed to empower non-English speakers seniors to live with more independence. Capstone project for UX Diploma.

Details

Role

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Tools

This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.

Context

Problem Space

problem space & research

Project Artifacts

HMW...

Design Process

Branding

Personas

Frames from sketches to hifi

different screen sizes too

testing

Reflection

Results

Insights and reflections

Impact on user, business, and systems

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Future thoughts

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.