Overview

The following is an on-going case study of my design and development of the web application, Grammaroke.

A language learning web app combining Grammar and Karaoke.

This project was started as an opportunity to learn new design tools, coding languages, production technologies and launch my first website! With this project, I learned how to see things through the eyes of a developer and now have a better understanding of things to consider while designing

Design Tools: Figma · Photoshop

Languages: Javascript (ES6) · HTML5 · SCSS · SQL

Tech: React · Node · PostgreSQL · pgAdmin · Docker · NGINX · Vultr · Postman

Background

One of my favorite methods of studying Japanese is to translate songs that I really enjoy listening to. Learning songs is an intimate way to experience a language and being able to sing along is a great feeling.

To do this, I use Google Docs. Here I could save my songs online, easily add new ones, and make my study notes using the comments feature. This was great at first but I quickly ran into some issues.

My Pain Points

• Too many comments made the file slow to load and stutter during use.
• Comments were off to the side making it difficult to correlate them with their associated text.
• Current line of lyrics was hard to focus on due to size and uniformity of the text. Some kanji characters were also hard to distinguish due to size.
• Page scroll had to be manually adjusted to keep with the song.
• Songs added later were slow to load when using the 'Table of Contents' since they were lower in the document.

Inspo

Inspiration was taken from the following sources; note taking, writing and annotation applications, grammar lessons and lyric music videos.

Google Docs made it easy to paste in large bodies of text and quickly make annotated notes through highlighting and commenting.

The minimalistic UI of iA Writer allows users to stay focused on the current section of content by blurring our adjacent text. This aligns with lyric music videos in which text is centered on the screen.

Misa from Japanese Ammo makes great use of colors to coordinate words with their definition and associated grammar points.

Prototype Videos

These videos demonstrate the main annotation functionality of the application.

The first video shows the interactions between existing notes, and the process for adding new ones. The second video shows the scrolling animation. Next lines are brought into focus while secondary lines fade into the background.

Color & Components

The aim was a casual, notebook styled theme. Gray background colors, with bright highlights. Since the application was going to be built using React, a "components based" mindset was adopted early on.

Homepage

The homepage gives an overview of the site's main features, an example of the lyrics view and a video demo. Following responsive design best practices allows the site to accommodate for screen sizes ranging from mobile to desktop.

In addition to changing from a single column to a double column layout at the larger screen sizes, the header menu options expand from a hamburger button to labeled icons.

My Songs

Search your library for songs. Add new ones, or edit current ones. The page offers both a column view and list view as options for the display. One allows for a more visual album art based view, while the other, a more text based, song title and artist focused view.

(Scrapped) Extra designs

Various other layouts and designs were also considered.

The far left shows song cards with an adaptive color theme based on the colors of the album art. While there are libraries that allowed for this functionality, the coding challenge would likely be too difficult for my current level. I was also worried about potential usability issues around text legibility with certain color combinations.

The gray background cards on the right give the page a more uniform look while also ensuring proper text legibility. However, at larger screen sizes, this design had poor use of space and was iterated on further, eventually leading to the list design shown above.

Editor View

Highlight text to add custom annotation notes/translations.

Hover over notes to display, or click to pin.

Toggle on / off the Furigana readings above the associated Kanji.

Learnings

The goal of this project was to better understand the development work required in making a fully functional web app based on a design mockup and where difficulties may arise.

1.) Features such as the scrolling animation were very simple to create using the prototyping tools in Figma but would be much more difficult in actual development. The combination of the size, color and position all changing has led to development challenges that I am currently working through.

2.) The underlining feature which was also relatively simple to create and prototype, will be very difficult to implement. As a "stepping stone" towards development, I have decided to first take on the challenge of changing the color of the selected text to a certain color. While this design isn't as desired, it is a compromise for the time being.

3.) For song cards with long titles, I had originally designed the text to fade out. Current CSS text-overflow properties only allow for clipping or an ellipsis, while fade is an experimental property. The ellipsis effect clashes with the dots i designed for editing song details but will stay until I learn how to code a text fade effect using CSS.

As a result of this project, there are now many new considerations I am making in my designs in regards to "ease of developing". It has been real fun to see things from the other side and I am excited to continue this journey.