Johnny’s Concept

The Problem

The current look for Johnny’s Net was released roughly five to six years ago. With a static design relying on “sprites”, it doesn’t accomodate the mobile technologies that are now taking over the current markets. Needless to say, the design is very dated and very obtrusive when it comes to finding information that one is interested it.

The goal of this concept design was to bring the website up to date, make information easily accessible, and take advantage of the power of HTML5 to bring new methods of advertising that is crossplatform friendly rather than continue slowly depreciating products.

Target Demographic

Since the agency focuses on male artists, the target demographic was focused to be on females between the ages of 13 and 45. Most users would be accessing the website from Japan via their mobile phones (smart phones) or desktop computers. Since actual data could not be obtained on a wide scale, it was to assume that most users would be using Windows based PCs using the default pre-installed browser, Internet Explorer.

Because the website also caters to a global demographic, consideration was taken for those who would be using Mac OSX and competitor browser alternatives such as Firefox and Google Chrome. Since Mac OSX’s preinstalled browser is Safari, the website would take advantage of webkit’s font-smoothing.

Running a demographic survery of the global user base, roughly 80% of the results pointed to Windows users who used either Firefox or Google Chrome as their primary browser. Nearly half accessed the website via a mobile device, which an overwhelming majority accessing via Android (4 out of 5 users use Android over iPhone). The users accessed the site with an average of more than two times but less than 5 times a month. Majority of survey takers wished to have more visual media on the site such as artist images and videos.

Tackling the Beast

The current website is a nightmare to put it lightly. The user-flow is unnecessarily bloated. There’s plenty of information, but it takes several unnecessary clicks to access the information. The website also relies on having information load in external browsers which is old practice and absolutely unnecessary. I figure this practice was because there’s no place to put such information on the pages itself.

So, the biggest hurdle to overcome was trying to figure out a way to take all this information and have it on as least as many pages as possible, reducing the user’s need to always keep clicking to find out when an album is being released or how to get ticketes to a concert.

The best option to tackle this problem was to take advantage of the Jquery library and have content load via Ajax (through Jquery) and use the ui.Tabs to it’s fullest. Users would not have to click on links to have new browsers open or falling deeper into a rabbits hole, reducing processing load on their computers and reducing the user flow by several pages. This method would also reduce the amount of calls needed on the server itself, potentially reducing bandwith.

Design Process

The intial design process started with selecting colors and an overall layout flow. Grasping for inspiration, I went to several industry websites to get an idea of how they present themselves. The thing about Johnny’s net is that not only is the site a repository for information regarding it’s artists, its also a corporate website that has information on the company itself. So how do you balance these two things? The website needs to be attractive to retain a dedicated user-base but still be sleek and professional for corporate interests.

The color scheme was based off of the logo currently used by the site. The current site implements a usage of silver and gold. I wanted to put more emphasis on gold and black.

For font selection, there wasn’t many options. Johnny’s net is a Japanese website which meant that the default font choice would be no other than the system default. Of course, the website offers Chinese, English, and Korean options but again for the East Asian languages, you’re reduced to the system default. For the English font choice, I decided to pull from the Google Fonts repitoire and have Montserrat as the header font, taking advantage of the serif used in the logo, while the default font type would be Roboto Condensed.

I started with simple Wireframes to give an idea of the site. Since the website was information heavy, a simple, easy to use layout was the goal. A top sticky header to allow easy navigation with information in a two collumn format.

Since Johnny’s & Associates keeps visual representation of their artists on their website to an extremely limited degree compared to other companies like Avex Group, there was a challenge on how to make the website visually appealing and simply not colors and text on a screen. The current website keeps the artist images on a “Profile” page. Instead, with this concept, I decided to use the artist image as header image. This will allow the user to identify the name and brand of the artist to the actual person and not simply by name.

The Store page was another page of importance. The current design required users to click on the click and pop up a window with relative information contained. The maps were also hard to understand. Taking advantage of the Google Maps API, it gave clear indication of where the stores were in relation to the directions provided.

The front page had a lot of information on it but really no focus. There was also an video player on automatic autoplay with links to other videos. Instead of having users click on video links to view, throwing the videos in the top header I felt was a better alternative. Taking use of the HTML5 Video JS plugin, the user can see a static ad of the product on sale then click on whether they would want to view it or not. On each page reload, a new video would then present itself. The primary goal is to have the products front and center, not in a small box in the corner or hidden somewhere on the page.