UX Design
Branding

Hello Chat App

How do we facilitate communication that transcends language barriers in increasingly diversified social groups?

Mockup of Hello Chat App

Duration / Role

Five weeks
UX and branding designer

Tools

Illustrator, InVision

Methods

UX design, branding, prototyping, user testing, visual design

Discovery

Research

In North America, the number of multiracial people are increasingly. In particular, in Canada, the longer immigrant groups remain in Canada, the more likely they'll end up in bi-racial relationships, with multi-racial children. As Canadian families continue to diversify into multi-racial groups, the need for a communication tool that transcends language barriers becomes more important.

Ideation

User Personas

I created seven user personas to help guide this project. Below are two key personas that proved to be very useful during the project.

User persona for Jessie Hikaru
User persona for Aiko Hikaru

Persona Profiles: Building a Narrative

To help contextualize the app's functions, I built a narrative between the users. I found this approach helpful for this type of app, because it helped humanize the needs, desires, and wants of each persona based on their relationships. Here's an overview of how each persona relates to each other.

User persona Jesse

Jessie Hikaru

Jessie Hikaru is a university student who would like to stay in touch with her grandmother and friends, but does not understand Japanese very well.

User persona Yuri

Yuri Hikaru

Yuri Hikaru is Jessie's mother. She is fluent in English and Japanese and currently lives in Vancouver as a single mother. She tries to teach Aiko how to use multiple apps to communicate with Jessie (Whatsapp, Google Translate, etc.), but has a hard time passing on that ability to use current technology to her 66-year-old mother.

User persona Aiko

Aiko Hikaru

Aiko Hikaru is a retired grandmother who immigrated to Toronto in the 1980s. She lives in a Japanese-Canadian community in Toronto, and rarely needs to use her English skills now. She'd like to stay in touch with her granddaughter in Vancouver, but is often frustrated with the language barrier and chat apps.

User persona Joanne

Joanne Hikaru-Jones

Joanne Hikaru-Jones is Jessie's aunt. She is first-generation Japanese-Canadian, who is educated in Toronto. She worked in a tech company for six years, where she met her husband, James Jones. After getting married, the couple moved to Vancouver to continue their careers in tech, while balancing family needs with their young daughter.

User persona James

James Jones

James Jones lives in Vancouver with Joanne. James is Francophone Canadian, who is fluent in French and English. He finds communicating with Joanne's family difficult due to language barriers. He wants to keep Joanne's family up-to-date with his daughter's latest news.

User persona Keith

Keith Yamazaki

Keith is Aiko's cousin. He is currently studying management in Germany. He's excited to travel and to pursue his education abroad. At the same time, he often feels left out from the latest happenings from the family circle back in Canada. He speaks English only and has no understanding of Japanese.

Sketches

I started with brainstorming features that would be helpful to people from multi-cultural families and social circles. In addition, I started to consider how branding would come into play.

Brainstorm sketches
Brainstorm sketches

Branding & Creative Direction

I wanted a symbol that represents the cyclical nature of communication. In a nearly yin-and-yang fashion, I created the following brand to solidify the cyclical nature of communication, where two points of view are intertwined with each other. The big picture is only complete when they're both present. I've used vibrant colours and minimal rounded shapes to create a friendly and energetic tone.

Accordingly, the creative direction carries out this vision to the rest of the UI treatment later on.

Logo concept for Hello Chat App

Experiment

Wireframing

The wireframes begin with UX patterns that are common to many chat apps, but with augmented features to support multi-lingual users.

Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe

Test & Implement

Visual Design/Prototype 1.0

After creating the first lofi prototype, I tested the first version of the visual design with six users.

Visual design
Visual design
Visual design
Visual design
Visual design
Visual design
Visual design
Visual design
Visual design
Visual design
Visual design
Visual design

Two Testing Sessions

In total, I executed two rounds user testing, with six users per testing session.

Key Learnings

  1. Branding is great, and carries the tone of the app very well.
  2. Shouldn't be afraid to add more colour and contrast to help direct people's attention in the UI design.
  3. User settings are simple and useful.
  4. Perhaps integrate more ways of communicating in different languages.

Final Product

Visual Design/Prototype 2.0

After two rounds of testing and iterations, I finalized the prototype.

Final prototype
Final prototype
Final prototype
Final prototype
Final prototype
Final prototype
Final prototype
Final prototype
Final prototype
Final prototype
Final prototype
Final prototype

Next Steps

  1. Create custom iconography to augment the UI design.
  2. Revisit UX patterns. This project is a few years old now, and there are newer patterns introduced recently that people would be familiar with.
  3. Test with more multi-lingual users.
  4. Update the InVision prototype.