Having just finished my prototype for Earshot, I am pleased with what I have created in this unit. I had never used JavaScript or JQuery before and at the beginning I found it difficult to use. Though, once I used it more and became more familiar with the script, I had fun using it and trying out different techniques. I also expanded my knowledge of HTML and CSS and I really liked learning about Local Storage as it was a good replacement of using databases.

Though, I believe that I was a bit ambitious in my proposal and I had to cut things out of the prototype because of time and concept restraints.

However, I am pleased with my concept and prototype as I created a product that I would use (if I had musical abilities).

Future developments for Earshot are:

• Creating a messaging system inside the website
• Making it responsive for tablet
• Creating the newsfeed and ad systems

There are a number of limitations of my prototype for Earshot. The first limitation was that there was no database that the website could draw from and store information. Though, there was a flexibility around this by using Local Storage.

Secondly, for the purpose of the prototype, all users link to the same profile and all searches lead to the same page for simplicity.

Thirdly, it is not in the scope of this project to create every single page of Earshot. Only pages that directly relate to the use case scenario were created. The messaging system is complex and I choose to leave it out of the prototype. When a user clicks on the message button, it links to email. I choose to leave in the links to newsfeed, ads and messages even though they don’t take the user to a page. It looked strange to only have one link when there is meant to be more.

For my mobile navigation,I proposed that I would make a slide out navigation for mobile viewers. I was going to use Trunk-js to do this. Though, when I started to make the navigation using this plugin, I found it very difficult to use so I decided against using it.

Instead, I decided to still use an off-screen navigation for mobile. To do this I found an easy-to-use plugin called Responsive Nav. With the help of a demo, I was able to create a slide-in effect from the top of the screen.

Image Source // http://www.dzyngiri.com/responsive-menu-using-trunk-js/

I changed the layout of the profile page slightly. Instead of having a grey background for the left column, I changed it so that it has a black border around the left column which highlights the most important information on the profile. A call-to-action is also used on the message button by using a different colour.

I also changed the layout because the html and css was not working for me using the grey background. I made a decision that it was better that the page looked clean than using the original design that didn’t look as effective.

Above is the design I proposed for the search refinement of the search results page. I think I was a bit ambitious to do a slide out navigation for each search refinement element. When researching how to do this, I didn’t find any tutorials on how to do this though I did find there was heaps on off-screen slide out navigation for mobile which I will use for my mobile version. Instead, I have opted to do a toggle navigation that all stays on the same area.

For the purposes of the prototype, only the age search requirement links to refined searches.

It is out of scope for this assignment to make all the areas in the edit profile page editable. Instead, I have made select sections editable such as toggling which sections can be seen and deleting items (e.g. equipment I own and Instruments).

To give the illusion of social media integration, I used JavaScript in the sign-up phase. Because it is out of the scope of the assignment to actually get users to connect to Facebook/email/MySpace and find their friends, I used JavaScript to give the illusion that the user has connected to their chosen social media.

When developing the search area section of the home page, I had difficulty making the drop-down option list look and act like I wanted it to. With help from Cassie, she showed me how to make it act like I wanted with the help of JavaScript.

I wasn’t completely happy with the way it was looking and acting, so I researched online for a tutorial and found one that did exactly what I wanted it to do.

For this assignment, I have only chosen a select number of popular instruments for the home page of Earshot. The final website would have all instruments to choose from.

I found there was a flaw in my concept for Earshot. The flaw was in the fixed age group of the website. The concept was that only users aged between 16-30 years old would be able to sign up. This is flawed as what happens when a user turns 31? Would they be kicked off the website? Excluding users from the service the website performs is bad marketing and web interface design. I have fixed this by allowing users of all ages to sign up. Though, the website will be marketed and designed for users between 16 and 30.