Web maps and Storyboards (Finalized!)

Here are the finalized Web maps and Storyboards that I did for the group which considers not only the design of the websites and the features we can provide but also addresses any social, legal or ethical issues that may arise when it is used.

< Click to enlarge >

 

< Click to enlarge >

< Click to enlarge >

 

< Click to enlarge >

< Click to enlarge >

 

< Click to enlarge >

< Click to enlarge >

 

< Click to enlarge >

< Click to enlarge >

 

miXXerS3_5

< Click to enlarge >

 

< Click to enlarge >

< Click to enlarge >

 

< Click to enlarge >

< Click to enlarge >

 

< Click to enlarge >

< Click to enlarge >

 

< Click to enlarge >

< Click to enlarge >

 

 

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

 

 

 

 

 

miXXerS Graph

The graph represents relationships (edges or links) between miXXerS users and helps to illustrate the path length between them. Users and DJs/Musicians are connected by event, music, chat and RSS. Graph theory concepts will be used to help understand how our users are connected and what clusters have formed. This illustrates what a social graph for miXXerS could look like. You can read more about this in Keisha’s posts Capitalising on Clustering, Triadic Closure & Centrality For miXXerS and Maximising The Network Effect

graph

<Click to enlarge>