English for A Song

English for A Song

We won "Best Micro-Interactions Award" at Hackers 4 Good Hackathon NYC

Client / English For a Song

Duration / 80 min

My role / UX, Prototyping, Audio file editing

Tools used /  Principle, Sketch, Premiere Pro

Team / Adrian Candela and myself

 

English for A Song

We won "Best Micro-Interactions Award" at Hackers 4 Good Hackathon NYC

Client / English For a Song

Duration / 80 min

My role / UX, Prototyping, Audio file editing

Tools used /  Principle, Sketch, Premiere Pro

Team / Adrian Candela and myself

EFAS_00.png
 

Goal

"Create an interactive prototype showcasing a game / exercises with documents, visual materials and songs provided and present it to the key members of the organization." 

About English for a Song

 http://www.englishforasong.org/  

Concept / Gamifying learning English by using a song  

 Audience / ESL students, and immigrants for age 18+

 
 
 

Provided Materials

1. They provided us with game level concepts. We picked “Level 2 Listening Challenge” game.

2. Also these UI materials were provided. This set contained a Level 1 game.

EFAS_Provided_Materials.png
 

Our Approach and Solution

1.  The whole song will be played first, then it moves onto the quiz section, not vice versa. The reason for this approach is we wanted the user to familiarize with the song first and get motivated.

2. We added Artist Image while the song is being played. This visual element enhances the learning experience, especially if the song is by the artist you like.

 
EFAS_ourSolution_.png
 
 
 

Screenshot of our prototype for the Hackathon

won_EFAS.png
 

We won and the hackathon is over but,

I revised the project to reflect what I originally envisioned. I needed more than 80 minutes (the hackathon's duration) to work on the details and I know the details make differences. Here is the revised prototype I created. (not as a team project)

 

Details of Revisions

1. Deleted the emoji. The emoji was part of the provided UI, and is not appropriate for their target audience that ranges from young adult to adult. The tone of the design should not be juvenile.

2. The progress information was added. Visualizing measurable progress indication encourages and enhances learning experience, hence their performance.

3. Changed some words used. For instance, from "That's right!"  to "Correct" as shown below.

 
EFAS_revised_1_C.png
 
 

4. Visually differentiated “hint” window from “correct” window by changing the background color.

EFAS_revised_2_c.png