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
"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
Concept / Gamifying learning English by using a song
Audience / ESL students, and immigrants for age 18+
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.
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.
Screenshot of our prototype for the Hackathon
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.
4. Visually differentiated “hint” window from “correct” window by changing the background color.