Our main idea for this project is a mood board on the webpage. By clicking on different buttons, people can interact with different sound effects and songs for different moods. People can also combine different sound effects and songs to create some more interesting interactions. For example, if you chose the âangryâ sound effect with the âangryâ song, there would be screaming in the background that would work well with the âangryâ song. But if you choose a âsadnessâ sound effect with the âangry songâ, the entire atmosphere of the song would change or not feel right. There is also a visualizer which interact with the songs by changing colors and shapes.
Process:
In terms of the teamwork, Murray is responsible for the audio editing and I did the coding part.
For the sound design, we made a list to put all of our audio assets. Murray listened to a lot of music on youtube and I also found some on the freesound for different moods. Since many of the human sound effects have short duration compared to the songs, we decided to duplicated the audio and Murray played with them by adding different sound effects.
sound editing page, cr.Murray
In terms of my part, firstly is the layout design.To match the color with the mood we looked through several researches online and found this graph which is the most widely used theory on the match between color and mood. We deleted the âtrustâ and âanticipationâ section in our final design since we found that the songs considering these two moods are difficult to find and also these two moods are kind of difficult to be related with audio.
Ref graphlayout draft in ai
On the webpage, the sound effect buttons control the facial expression and the song buttons control the color of the face and the visualizer. Different combinations can create many different audio and visual effects, which add the level of interaction.
(short video of the visualizer, better to explore on the web page)
Screenshots of the webpage
Then it goes to the coding part which is a big challenge for me. At first I thought it would be easy to load and play the songs and sound effects but actually it took me lots of time to figure out how to stop other audios when one audio is playing. Besides, since we aim to combine the sound effect and the songs so I should allow them to play at the same time, which make the scenarios more complicated.
Another struggle I had is about the visualizer. It took me even longer to first figure out how the audio analyser works, how to get the src of the audio that is currently played on the webpage and how to put this part together with the buttons (many troubles occurred at this stage and I went back and forth).
Screenshot of code
For other details, I added hover effect on the button to indicate it is pressed. And I also add a button to stop all the sound for people who just want to just listen to the songs.
Reflection:
Many technical issues can be solved if I have more time. For example, it’s better if they can change the song by just clicking on the button. And it would be better if I can better accommodate the volume of different audios on that page.
In general, I completed most of the initial ideas and even add the color changing effect which I didn’t think of at the first stage. The final delivery does meet my expectations. Big thanks for the help of Moon and Murray đ
Credit
Visual Asset Credit: Freepik.com
Audio credit:
Anger
Song:
“Riot Squad” – Bad Brains
https://www.youtube.com/watch?v=OC0NCHq4v3I
Human Sound Effects:
“Scream SOUND EFFECT Angry Man Scream MAD SCREAM SOUND”
As a college student, my partner Milly and I do have a great interest to learn something new as well as have fun with our friends in our spare time. Besides, according to my previous experience of online and offline courses or activities, most of them are far from satisfying due to all kinds of problems, for example, long distance and poor transportation, hard to contact with a proper tutor⊠Thus, with the inspiration of the popular business model like Eleme and Didi, which focus on the useful resources in the neighborhood and also apply the individual customized service, we think up and idea to also provide educational activities based on the local neighborhood resources.
This is how Courcal comes: course + local, which means the course in our neighborhood. The core idea is to provide a platform for teachers and students to customize offline classes in the nearby neighborhood easily. It doesnât need to too professional, instead, it would be more like an educational community. Besides, on this platform, a special connection between teachers, students and source providers (including classroom providers) has been constructed. The educational resource is efficiently utilized in this way.
DEVELOPMENT
Original Mind Storm Map:
In this original mind map, we initially settled down two basic service routes for our app: the teacher portal and the students portal, which means this app would be divided into two versions to offer corresponding services to each group of users. In addition, we also generally set the two main functions that we would like to emphasize in this app: which the course search and course request. As for course request function, we design it for the students who cannot find a course that fits his own demands; or would like to form a new class with his friends. These students could customize their course requirement and join or create a group to send the request to the available teachers; after teachers accept, they could select the one they want and start their own class. Apart from this, we also would like to provide course tracking and quick message notice functions in this app to add more convenience to it.
Story Arc & Story Board:
As for our app, we assume our user would mainly be two groups: students(class-takers), teachers(class-offers). Therefore, our story arc is a story happens from two sides at the same time but end up at the same place âhappy endingâ.
Students:
Students A, B, C want to learn drawing. They are troubling thinking about how to get a pleasing course. After searching online with their demands, no results fit them. Suddenly, they find the app Courcal! It helps them to customize their class! After typing in their needs, it soon shows that he has similar demands with B and C. Soon they form up a new group and the platform also recommends the teachers who fit their requirements. Finally, they send the request and select a teacher to set up a class happily.
Teacher:
Young painter Mr. Hat just graduated from the college wants to teach painting. However, he gets annoyed by the bossâs requirements of the cultivation institution. He wants to find his students but has no idea where to start as he is new to the market. Suddenly, he finds Courcal saying to start your class here! He types in his personal information as well as his portfolio. Then starts to offer his class on the app. The platform soon shows him the requests from the students that fit his demands. He then starts up his class happily.
User Research
Due to the time limitation and the features of our potential users, we mainly focus on the student side while designing the general survey. Survey questions mainly follow two categories: personal information, which focuses on investigating our usersâ social conditions and figuring out our target users group; learning experience, which is to find out the usersâ pain point and also avoiding the shortcomings in the existing applications in the market.
By the time we summarized the results and forms, we have got 97 effective answers in totalïŒin which 43.2% are younger than 20, 25.3% are 20-25, 17.9% are older than 35, 11.6% are 30-35. Whatâs more, students take up 66.3% in the group. According to this distribution, we could initially assume that the biggest user group still lies in the students, who earn the most interest in exploring new stuff. Besides, another result we could indicate is that thereâs a big population of people who have a strong will to learn new knowledge.
By the survey results, we could figure out many problems that the users encounter with the current learning apps or courses they have. A lot of people still prefer offline courses, especially workshops for interest learning. Besides, distance and quality are the main concerns that users have for the courses. The quality evaluation should also be taken into consideration in our app.
User Interview
We take either individual interview or group interview in this session. Surprisingly, all interviewees take a lot of thoughts in our app. As a result, we eventually come out half to one-hour deep talk with 3 potential teacher-users, one resource provider and several students. Studentsâ answers are mostly positive and their concerns are similar to the results we have got from the survey. Thus, we would like to specifically analyze the interviews we have with other user groups.
Teacher users:
Basically, the interviewee takes two different attitudes into this app: one is positive, while the other group is negative. For example, the piano teacher Ms. Li is worried about the credibility of the platform. Besides, the biggest concern for her is the place to teach. Because big instruments like the piano are not possible to carry with, and she doesnât want to change the location for teaching too frequently. Teachers like her usually earn 3-5 years of teaching experience and have a stable source for students to teach, and they also have some other pursue in their own career (like music) in addition to teaching. Thus, earning money is not the most important point they care about, but also stable cooperation and extra reputation they could get from the platform.
Another special example we have for teacher users is the typical group coming from social media: the online celebrity own a large number of subscription. Ms. Li is a popular baker on social media such as Weibo, youtube, and Bilibili, she has a big fan club, which is also her student source. She introduced the community she has and also the way they run their teaching business. Though she is really interested and supportive of the platform such as our app Courcal, she also worried about both the teacher and student evaluation system of it. As for her, teaching is an important way to improve build up her reputation and bad learning results from the students will damage her online popularity. In addition, she also requires the assistant for the big classes (over 5 students). This inspires us to add the assistance system for our app, which could be a voluntary or paid system that encourages people who have some experience with the topic to support the course.
Resource providers:
The interviewee we have for this group is the owner of a coffee shop. Surprisingly, he is welcoming to such cooperation relationship with our platform. On the one hand, he would like to advertise his own business, on the other hand, he would also like to improve the business model of the traditional coffee shop. Besides, we also learned that many companies would also book a room in his shop to set up a learning corner or other activities. The only concern he has is the credibility and long term fee distribution.
Persona & Scenario
Based on the user research and interviews we have made, we design the following personas, two for studentsââfemale and male; two for teachersâânegative and positive.
Female student:
Male student:
Negative teacher:
Positive teacher:
Competitor Analysis
As learning apps have been a heated topic in recent years, we did a research about the competitor apps. Here are the results we have.
Learning apps:
Mostly focus on online courses
Professional knowledge
High pre-learn standard
Teacher requesting/off-line courses apps:
1v1 courses
Simple teaching field/connection
Mostly based on a physical educational institution
From the research, we find that though all focusing on the education field, our app has a special perspective that connects three parts-students, teachers and students together, besides, we are not limited to one specific teaching area or class forms. Flexibility and neighborhood learning community makes our app unique from others.
User Flow
Using the draw.io, we drafted the basic user flow of our APP and developed the wireframe based on some key functions. We mainly emphasized the division of teachers and students group at the beginning of logging in. After that, we grew up two user stream, which contains different working process and focuses. For example, as for students, the basic step is to narrow down the usersâ demands by sorting the courses by their interested areas. Then, itâs the form of the class: personal or group class. Finally, it comes to the requesting page. This procedure follows the common logic and values of the student users when they are looking for a class, which weâve got from our usersâ survey.
As for teachers, the logic is different. As the biggest concern of our potential users is the quality of the teachers on this platform. Thus, we put the portfolio and certificate verification at the first step of signing up a teacherâs account. This step might take several days as a working period to ensure if the material offered by the teachers are veritable. After this step, besides the class offering part, the rest of the teachersâ flow just intersect with the studentsâ flow: the class requesting & accepting the part. In addition to the service in the beginning part of the teaching, we also take assistance during the learning process into our consideration. This problem has initially mentioned by one of our teacher interviewees. We trying to engage our platform into the learning process of the classes, which take the role of after-class assistance to support these teachers. In other words, this model is referring some existing educational apps in the market, which helps the teachers send the homework, reminder; and upload a series of samples, exercises or even play as personal learning assistance.
Wireframe
Screenshots for Wireframe 2.0
Screenshot for v.3.0
For the wireframe, we developed three versions based on the feedback of usability testing. The first version developed based on several keep functions including sign up/log in, class request, class searching, and my account page.
For the second version, we added the navigation bar on the bottom of the screen as well as putting more pictures and details on the pages to make it more understandable. Also, we changed the course tracking page to the âmy accountâ page.
For the third version, we add a new navigation bar which deletes âcategoryâ, âplusâ and add âmy courseâ. We put research page on the top(homepage), refine the searching function into two main categories. The request process is also refined by adding a new confirmation page with previous request information and new request successfully page with info of people with similar request.
Branding & Moodboard
Researches show that people tend to be more calm and patient when looking at the cold tone color. So we choose this color as our primary color.
For the logo, we used a cat sign which is considered as a smart and independent creature and the shape is also similar to a text bubble.
The APP name is “Courcal” which is a combination of course+local, illustrating our core idea which is to make it easier for people to form a customized class in the nearest neighborhood. The Chinese name, ć»èŻŸ, has a similar pronunciation with the English name and it means “whenever you want to attend a class, you can find one”.
In terms of App function, the teacher’s version can be developed and improved in the future. The group request and study group functions are also part of the main functions of this App.
In terms of the business model, the partnership established with the resource provider will be one part of our margin and the advertisement fees will also add to the profit. As a third-party platform, we’re not going to charge too much from teachers and students but there is still a high potential to make profits from that.
In the reading âThe Ecstasy of Influence: A plagiarismâ by Jonathan Lethem, the topic of plagiarism is brought to discussion for another time. While we talk about something, we usually ask âdoes it matterâ. For plagiarism, no doubt it does matter since we should respect the effort others put on creating something new. But Lethem goes beyond that â he talks about how âplagiarismâ is closely related to the process of creation in the art world. Here I use the quotation mark for the word plagiarism since it doesn’t carry the same definition we usually used in the academic world. According to Lethem, âappropriation, mimicry, quotation, allusion, and sublimated collaborationâ(61) all have an overlap with the âplagiarismâ. And whatâs more interesting is that these words âconsist of a kind of sine qua non of the creative actâ(61).
As Lethem puts it, âFinding one’s voice isn’t just an emptying and purifying oneself of the words of others but an adopting and embracing of filiations, communities, and discoursesâ (61). The interconnection between different artworks and the difficulty to distinguish the notion of âinspirationâ and âplagiarismâ makes it even hard to find the boundary of plagiarism and peopleâs attitudes toward also vary a lot.
This discussion also reminds me of some debate on the Chinese internet. Plagiarism has recently become a serious issue and the net citizens in China are very strict about this issue. There are many posts comparing how two works have similar(or same) content and once an author is considered as the one who plagiarized, he/she will face severe critique. People often compare this phenomenon with that in ancient China when poets often use some words in other poems (sometimes a very similar sentence) and the community didnât criticize that but be very open instead. Iâm not about to say something against this trend but shift the focus to the potential of overemphasizing the plagiarism. Sometime even one or two similar words will be called plagiarism and that might undermine the general environment.
In the reading, âOn the Rights of Molotov Manâ, two artists debate on the boundary of copyright and plagiarism and how the context of the image can be changed through recreation. And the boundary is, in fact, very ambiguous. Itâs true that in the field of art people should be given enough freedom on creating artwork, but the issue is not that simple. Whatâs more important is not just the copyright, but also, whatâs the relationship between the artist and the content of their work. Especially for Susan as a photographer, what she did is âcapture the momentâ rather than creating something totally new, which makes this issue more complicated.
That leads to the question âWho owns the rights to this manâs struggle?â, there is no right answer for that. When the two party – painter Joy Garnett and photographer Susan Meiselas argue on the âownershipâ or the right to reinterpret/ recreate the content of the image, a question that came to my mind is that why people seldom pay attention to the man in the photo? After all, it should be him who really experience the struggle. I do agree with the last sentence, âit would be a betrayal of him if I did not at least protest the diminishment of his act of defianceâ. When the content of certain artwork is recreated for several times, the âcontentâ itself – in this case – this man, also need to be considered. Besides, there is always an ongoing debate on how to balance the subject and the artist’s freedom.
I listened to the â99% Invisible: Pocketsâ which talks about the evolution of pocket and the difference between manâs pocket and womanâs pocket.
Itâs interesting to view this everyday object in this way. While weâre used to having a pocket on our clothes, we often overlook the difference between pockets in terms of gender and seldom think of the reasons behind. âA pocket is internal and itâs secretâ, said the women in the audio. And that reminds me of what Mcluhan says about âan extension of the human bodyâ. From this perspective, a pocket can also be considered as a special kind of extension and therefore itâs closely related to peopleâs status.
Itâs also interesting to look at the history and the evolution of the pocket and how the pocket as a daily object can also mirror the history of fashion and social change. Itâs surprising to know that people were once really fascinating and crazy about have pockets. And itâs hard to imagine a suit with 24 pockets and people at that time all accepted that design. Then the topic comes to the relationship between the pocket and the utopia and itâs really interesting to see this connection. And the idea to consider the phone as another type of pocket is new to me but also make sense. In this way, the phone is a pocket that carries almost all of the invisible assets just like the pocket carries all the physical assets in the old days. And these two things do give us similar feelings in terms of the sense of security.
Though Iâm still not sure about whether the pocket does carry so much metaphor in terms of social change and gender or itâs up to peopleâs interpretation, the perspective and thoughts of the pocket are really intriguing and raise my interest in the pocket.
