Mockup Demo and Prototype of miXXerS

I built a prototype for our social website (miXXerS). Below are some screenshots with simple descriptions. (Double click the picture to see the legible one).

We also did a demonstration video of our prototype website. This video is narrated by our team member Liam. Thanks for recording Liam!

Homepage: part 1

Screen Shot 2015-04-24 at 10.07.38 PMScreen Shot 2015-04-24 at 10.08.20 PMScreen Shot 2015-04-24 at 10.08.37 PMScreen Shot 2015-04-24 at 10.08.57 PM

 

The navigation bar and carousel effect (made by Javascript). The carousel is made of three pictures and each picture has some context with a link button.

Homepage: part 2

Screen Shot 2015-04-24 at 10.09.39 PMScreen Shot 2015-04-24 at 10.10.00 PM

 

Three headings show the newest party, popular DJs and musicians and popular music automatically. You can click the “view detail” button to view the detailed information for each heading below.

Party page:

Screen Shot 2015-04-24 at 10.11.01 PM Screen Shot 2015-04-24 at 10.11.35 PM

 

This page shows the parties that will happen soon. Each party event is listed by theme, time, location. You click the “Search on Google Map” link for to search for the location. You can also find out where a DJ or musician will be playing and buy ticket either via paypal links or external ticket sites like Eventbrite or Ticketmaster. The DJ and Musician’s name is a link so you view her/his profile.

DJ page:

Screen Shot 2015-04-24 at 10.12.15 PM Screen Shot 2015-04-24 at 10.12.35 PM

 

This page show each DJ’s profile. His name, the genres of his music, occupation(s), Instruments and year active. There is a “Events” link, this link navigate to event page. There is also a feature that allows you to book the DJ/musician’s services.

Event page:

Screen Shot 2015-04-24 at 10.12.54 PM

 

This page shows the events this DJ will attend. You can click for more detailed information for each event.

Find music page:

Screen Shot 2015-04-24 at 10.13.22 PM

 

This page is used for users to find the music they want. Input the name in search bar to find the music or to click the alphabet.

About us page: Those that are checking out the demo of our site can find out more about us here!

Screen Shot 2015-04-24 at 10.13.43 PM Screen Shot 2015-04-24 at 10.14.06 PM

 

 

 

 

 

Web maps and Storyboards (revised)

Following up on the draft web map published earlier here are the revised Web maps and Storyboards that I did. In this map ‘band’ also refers to musician.

—————————————————————————————————————

function 1: Function to attend events.

Select Location/Date/DJ/Band/Music genre and narrow down your search to go to the DJ/Band’s personal page to view event information. All events are linked to google map. ticket should be sold online using Paypal or third party ticket sites like Eventbrite or Ticketmaster.

miXXerS2_1

< Click to enlarge >

—————————————————————————————————————

function 2: request DJ/band

When you would like to ask the DJ/band to play for personal event, use this function. Selection could be by location, data, DJ.Band and Music genre, then narrow down to each event information. When you found the one you wanted, send an email to the DJ/Band to negotiate the detail. Those email exchange will be monitored by miXXerS and miXXerS will take few % of the price.

miXXerS2_2

< Click to enlarge >

—————————————————————————————————————

Function 3: RSS     Function 4: Chat

This is the optional communication site. Members can buddy up to attend an event or chat about their favorite musicians. Those social aspect also is necessary to bound people in the tie of their favorite music.

miXXerS2_3

< Click to enlarge >

—————————————————————————————————————

Function 6: register DJ/Band

This is the site for both DJ/Band and listeners can have profits. DJ/Band looking for fan base will register themselves to miXXerS.

miXXerS2_4

< Click to enlarge >

—————————————————————————————————————

Function 7: register (user)

Users also have to register to use any of this service, since information of DJ/Band and members will be confidential and exclusive to members only. It would be dangerous enough to contact/meet a stranger especially at some night club, so registration is important for the safety of users. It also is required to ask users to buddy up carefully, at their own risk.

miXXerS2_5

< Click to enlarge >

—————————————————————————————————————

Function 8: review   Function 5 : Upload music

After attended to some events members may write review and evaluate stars to each DJ/Band page to contribute the trustfulness of miXXerS. The administration staff may upload legal music or video clip but they can also link to 3rd party sites like Spotify and SoundCloud.

miXXerS2_6

< Click to enlarge >