Have you ever ...
Have you ever experienced the embarrassing moment when you are trying to sing a song following your favorite singer or recommend the song to your friend but failed because you don’t know how to pronounce the lyrics?
Language barriers have become the largest impediment for people to sing a foreign language song and share their likeness with their friends.
Meet "Just Sing Out "
Just Sing Out is a website to solve such problems! Just Sing Out helps people learn and sing their favorite songs regardless of the language they speak. We enable our users to watch the music video and the transliterated lyrics simultaneously and allow users to exchange opinions with others in this community. Everyone is also encouraged to make their own transliterated lyrics and upload the lyrics to our website. We hope to create a relaxing and collaborative learning atmosphere among people who share East Asian pop music appreciation.
How it all began
Initially...
Interestingly, with the rising trend of East Asian idol culture, it is common to have a single music video of an idol group’s song to reach hundreds of millions of views on Youtube. However, many of their fans can seldom sing the song out due to the language barrier. Based on our first field research, over 80% of our random sampled group indicated that they had an experience of listening to songs in a foreign language. Among these respondents, 95% of them acknowledged that they could not sing the song out. A great proportion of the respondents stated that they felt upset when they could not sing the song together with their friends. Considering such a gap, we believe a product that shoots the cross-cultural learning process would be a growing market that we can step into.
Initial App Design
What's more...
Besides, the community the platform will create can help users find groups of people who share the same music tastes as them. Simultaneously, this emerging fan community may lead these users to recognize each other and start to engage with the learning process more and more with greater interests and motivation.
Web Design Ver. 1
Further market research told us that ...
There’s no integrated platform existed in the current market that provides users with music tutorial videos containing transliterated lyrics. What people did before is to self-made their own phonetic lyrics and sing along with the online music videos. There is no shared knowledge for transliterating or translating foreign lyrics, making it a time-consuming process for people who want to learn how to sing a foreign song. Realizing the needs of this group of people, we aim to establish a new platform that allows our users to pronounce and sing the lyrics in foreign languages without knowing the language in the first place. With our platform, they are able to find high-quality and reliable transliterated lyrics and enjoy an efficient learning process.
Transliteration is a process of transferring a word from the alphabet of one language to another.
On top of the difficulties individuals may face while learning songs in a foreign language, the differences in the individuals’ accents can lead to extra obstacles during the learning process. To resolve this issue, we also encourage our users to share their own transliterations.
Although we try to include as many songs as possible, there might still be songs that users would like to see on our website when new songs/albums are released. Therefore, besides submitting their own transliterated lyrics, users can also request transliteration for us to transliterate their favorite songs.
Design
Color Palette
For the color palette of our project, we chose darker colors based on our marketing research. Our potential users pointed out that lack of authenticity is one of the biggest problems all of our competitor websites share. The users would prefer a darker color scheme that appears more classic and fashionable to them.
Our decision to choose green as the main collar pallet is because green often conveys the message of youth and energy. With green being the main color scheme, we added on dark navy from the same color scheme. Lastly, we also used dark grey to give more of the modern and classic feelings our users wanted. To create a contrasting feeling and to attract the users, we put visually impactful music video clips as the background of our home page
Logo Design
The logo is inspired by the sign of G-clef, “S” from “Just Sing Out,” and a half-shaped violin. All these are elements related to music that aligns with the function of our website. The main style for the logo design is simplicity; we wanted to use simple curves and lines to create the design.
For the typography used in the logo, we wanted a feeling of hand-written notes. Since our website’s main purpose is to provide transliteration, we wanted to play with the idea of “words” and “scripts.” Furthermore, since the logo is very simple, a more complicated font will provide visual contrast between the two elements.
Marketing Poster
For the future marketing campaign, we designed a poster taking inspiration from the CD and the “Danmu Culture(弹幕文化)”（real-time commenting chyron sent by the video viewers). We decorated the CD with inspiring sentences using different languages to encourage people all over the world to try our website and sing their favorite idol/idol group’s song out.
Promotional Video
Meet the Team
Lingling Li
In the team leader’s role, Lingling will manage the overall project flow and track the progress of each member within the team. With proficient graphic design skills, she is also in charge of making designs that could fulfill users’ expectations and attract users. She will assist with the design of the website from an aesthetic perspective, including the design of the website’s logo, icons, slogans, and other relevant messages that could reinforce our brand’s message through visual aspects.
Focusing on interactive design, Joanna will conduct UI/UX research by leading interviews, focus groups, and surveys to identify and understand users’ needs. She is also in charge of generating interaction concepts and designing a user-centric website prototype to shape seamless user experience and strengthen users’ interaction with the website. Additionally, she helps to create and enrich the website content in the website refinement stage.
Joanna Fang
Juliet Ding
Juliet is in charge of conducting marketing research to analyze and visualize competition, market opportunities, constraints, and user behaviors. She is also responsible for creating user personas based on the research to represent different user types. In the stage of launching the website, she will lead the team to design promotional strategies, mainly focusing on social media. Meanwhile, she will manage the user feedback system and later user experience research.
Keyuan is overseeing the technical development of Just Sing Out. In charge of building and constructing front-end and back-end web applications collaborating with our secondary programmer, he will write well-designed and testable code, make aesthetic choices, polish layouts, maintain and expand the website. Simultaneously, double majoring in DMS & BUS, Keyuan would also help with the marketing and UI/UX design.
Keyuan Qin
Noah Honickman
Playing the role of a researcher, Noah is responsible for transliteration research. Through working on the transliteration samples, he will translate the East Asian lyrics into phonetic letters/words that could be pronounced people who cannot speak these languages. He will also assist Keyuan in programming to make web pages interactive.
Frequently Asked Questions
Q: Where do you get the music videos? Do you have the copyright of embedded the video?
All of the music videos embedded in the website are from YouTube. According to YouTube’s Terms of Service (which applies to all users, including content providers), YouTube grants permission to access and use the site, provided that “you agree not to distribute in any medium any part of the Service or Content without YouTube’s prior written permission, unless
YouTube makes available the means for such distribution through functionality offered by the Service (such as the Embeddable Player).” In other words, if a video creator leaves the embed functionality enabled for a video, that person has agreed to allow other people to share that video on other mediums (including websites) without YouTube’s prior written permission.
Q: Where do you get the pictures? are these pictures copyfree?
All of the pictures we used are either designed by ourselves or downloaded from www.unsplash.com (a website that collects Over 2 million free high-resolution images).
All materials are protected by the Fair Use guidelines of Section 107 of the Copyright Act. All rights reserved to the copyright owners.
Challenges
We are constantly facing new challenges and overcoming them throughout our development phase.
As Lingling is in China and the rest of the team members are in the U.S., we have faced a 12-hour time zone difference, which makes in-group communication more challenging. It can often be difficult setting up a meeting time that meets everyone’s schedules. Lack of time to work together as a group has caused us to slightly fall behind our original schedule. To deal with this problem and ensure we are on track, we edited our monthly plans for better timeline and team organization.
In order to achieve the functionalities of Just Sing Out website, we need to install external plug-ins into WordPress to realize the result. However, based on the theme and builder of our choice, WordPress does not allow external plug-ins to be installed and used. We would need to further research on this topic and find a way to bypass this limitation.
Since time is so limited for us to develop Just Sing Out, we could not conduct interviews before the actual product development period. Thus, the interviews have to be altered and might be different from the regular user interview and focus group interview as we seek for constructive ideas that can help Just Sing Out’s development while not completely changing what we already have built.
What we Learned
Keyuan Qin
Even though we had this project idea built up in DMS371, there’s still lots of pivoting stuff we did throughout the development of this project. Thanks to the support from the professor, the other faculties, and the advice from upperclassmen Stephen, we are able to identify and avoid lots of potential impediments in our project development. As the technical lead of this project, I have to plan ahead about the priorities of different functionalities that we want to realize. Mostly concentrating on what we are able to accomplish now and what we can try our best to fulfill later, I need to consider what is the minimum viable product that we are going to present when the project is done. All in all, the greatest lessons I have learned from this project are planning ahead and self-learning. Facing multiple road bumps that are stopping us from further developing the website, we could not have gone so far without self-learning the unfamiliar technology and techniques that would be useful for building the website. And it’s always good for us to leave enough time to be prepared for those potential challenges instead of falling into difficulties that would impede the progress.
Lingling Li
As the team leader, I had faced multiple challenges at the beginning of our project. Firstly, we made a big decision that we should focus on websites (instead of app design) due to the cost and our coding skills. I encouraged the teammates to conduct market research on pros and cons of different website building platforms and finally landed on the WordPress. Secondly, since we are working from different time zones, planning ahead and assigning individual tasks would ensure the efficiency of the whole group work. Everytime we meet, I make sure that we are following the meeting agenda and working in the right direction.
I learned that the key leadership would be motivating my groupmate to do their best on what they are good at, trust your groupmates, and don’t interfere too much in the middle way. It’s an impressive experience to work with my teammates virtually throughout the semester: we had experienced ineffectiveness due to different time zones, but we made it! We fully utilized the online platform such as Miro and Zoom to draw our idea out and share.
Joanna Fang
As the interaction designer, I got a chance to integrate and practice the design skills that I have learned in the previous DMS courses to design our website’s structure. By conducting website research and refining the preliminary prototype draft, I realized how important ideation and prototyping had become in nurturing a mature project. From this experience, I strengthened my interaction design skills and broadened my horizon in learning how the entire website-building process worked. The process of developing this project further enhanced my practical knowledge and allowed me to gain insights into real-world design problems. Through collaborating with my teammates, I learned to draw out others’ strengths to work together to achieve our common goal. Although the time zone difference impacted our time management plans, I appreciated how we worked with each other efficiently and tried our best to contribute to this project from designing, coding, and marketing.
Juliet Ding
I got the chance to conduct market research by myself as the Marketing Lead of the team. This was a precious experience as the whole progress included studying the competitors, drafting surveys, drafting interview questions, conducting interviews, collecting and organizing interview results, and giving feedback to the teammates to incorporate the interview results into the website development. Through the capstone this semester, I got to enhance my marketing research skills. For next semester, I would like to work more collaboratively with my teammates since most of the marketing research task was done individually, I was not too attentive to the technical development aspect of the capstone. I would speak up more during meetings and give more constructive feedback to my teammates outside of my field of duty.
Noah Honickman
One of the major challenges I had early on in creating this website was creating the ability to have the lyrics sync with the audio that was being played and have the right lines highlighted when they were heard on the song. This seemed like a daunting task and I had never done it before so I was not sure where to get started. I tried looking around WordPress at first to see if there was any sort of function on the website that would allow me to add something like that. I couldn’t find anything so I decided to look at third party plug-ins that would help. Fortunately, I was able to find just what I was looking for. At first, it was tricky getting it to work but me and Keyuan were finally able to get it to highlight the lyrics. After that, I had to type out the lyrics manually with time stamps. I wonder if there is a way to get this to happen automatically without human input. It would require a complex program that could identify the various sounds of human language and reproduce it in English which would be very difficult. This would make mass production of songs an easier task on our website.