Gansu

Photo and audio matching game


Background

A pictorial language like Chinese is difficult to learn because it requires an enormous amount of memorization, lots of practice, and repeated learnings over time. As Mandarin learning is a passion of mine, I created a photographic and audio recording app for mobile and tablet devices that could be personal, fun, and effective for a lifetime but doesn't require studying. 

Try the prototype

Role: as UX designer take this idea through the process of design resulting in a validated prototype.

Steps

01

   Discovery

     Interviews and fact finding

02

   Concept

     Visualize the game and it's use.

03

   UI Design

     Plan the look and feel.

04

   Prototype

     Wireframe testing, iterations.

05

   Testing

     Users test prototype-> feedback.

01 Discovery

I researched who students of Mandarin Chinese tend to be, how they chose learning apps, and how long they used them. And most importantly why they discontinued.

I reviewed scholarly articles, conducted a screener survey and selected respondents for interviews. I remotely interviewed a retail worker, 3 expats, and a teacher.


My screener survey asked language learners about their choices in learning materials.

Survey results

Quantitative reports showed high interest in flashcards, audio visual aids and matching type exercises in Chinese learning apps. 

The survey convince me that purely audial-visual learning game products are rare. My app could possibly fill an unmet need in the spectrum of  Chinese lesson apps.

Constructing personas guided my concept forward by using the research data to place users in context. 


Jackie

Don

02 Concept


In this step I brainstormed beyond the initial idea of a photo match game, writing on a whiteboard as many ideas as I could.

I came up with lots of ideas, but realized that for this project my focus needs to stick to the basic, most important functions first.

This storyboard is a first rendering of how the photos and audio bites which form the content of the game gets imported into the app. 


My stickman is combining his own curiosity, personal photographs, and online resources to bind pictures to its spoken Chinese word. These memory anchors become useful tools for learning.

How my research lead me through ideation to the Gansu concept:
Habit + Memories + Gamification + Spaced Repetition = Effective Learning with Infinite Scalability

Wasting Time Constructively

The founder of DuoLingo, a popular language learning app with 70 million users, said this about his customers:

"They aren’t actually that interested in learning... they just need something other than Candy Crush to spend some downtime."

App users receptive to learning are motivated by games.

Motivation + Downtime + Repetition

A Gansu user could take whatever photos they like and assign an audible Chinese pronunciation of the object or situation the photo represents. Some time later when the mood strikes, they play the game.

The context of taking a photo, the object in the photo, and the translation the user attaches to it bind together in a shared memory space.

Spaced Repetition

While they match photos, they hear the words and photos multiple times before matches are found and levels to the game are completed.  Gansu automatically creates spaced repetition - which has been proven to be one of the most effective techniques in learning  languages.

Gansu could be not only addictive, but also infinitely scalable. You just need to keep on taking photos!

03 UI Design

After I clarified my ideas on a basic functionality for my prototype it was time to set some rules on what Gansu would look like.

Style guide

Decisions on typography, artwork for buttons, color schemes and text hierarchy.​​​​​​​

Mood board 

Images that represent the design tone and other visual choices.

Hand sketched paper prototype.

I used photos of sketches uploaded to the Marvel prototyping platform, then conducted guerilla usability tests on 5 people in a cafe.

The four photos below show how the home screen of my prototype changed based on sketches, the style guide, and the mood board. Decisions on  the issues of readability (text size and thickness), and the use of current design standards such as the text color, using drop shadows, and the immediately regrettable choice of using word slabs as buttons, helped refine the look and feel to the final version. 

04 Prototypes

This low-fidelity rendering mapping the user's click path or "red routes" formed the next step. At this point I could see all the most important functions, and then move forward to a high fidelity version for the validation of the design in the next round of usability testing.

Next I made high fidelity prototype screens for usability testing. Each round served to reinforce validation and bring new comments for improvements. 

For example, during the first hi-fi usability test most people had a hard time understanding the buttons in the photo gallery. In the second iteration, no one had a problem. 

First iteration

Second iteration

.

I used InVision to test the high fidelity prototype. 

Try it

Gansu playing surface would be a naturalistic photo background

Learnings

Usability testing for a game has to be reduced to a reasonable testing time frame according to the limitations of the prototyping tool. After using InVision, I'm currently looking for a way to develop the app on my own.

If you are inspired by your project and the research has convinced you that it will work, presenting the project persuasively to stakeholders will be a lot clearer and easier.