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>

 

Mobile Apps

You get a ton done when you’re at your computer, speeding away on the day’s social media strategy.  In the last year alone, mobile payments apps has generated a total $235.4billion worldwide.

Mobile apps and tools can make it easier for a marketer’s entire day as it is filled with easier ways to tap opportunities to connect, engage and share. You can get more done while waiting, lounging, and at anytime when you’re not tethered to a desktop or laptop. The palm size, weightlessness and wireless technology that comes with mobile makes it convenient and primary for miXXerS users on the go,

It necessary for miXXerS’ future development that in addition to being a mobile first site we  create mobile apps that enable users to log-on their account just by clicking a miXXerS app icon on the mobile screen. This allows all users  to stay on top of the latest news or music posts, share music and all the service that we offers are now able to access from mobile apps.

In summary, you can enjoy complete page management controls like you can with the Facebook app, making life super easy for admins who need to make changes on the fly, while you’re on the go.

The following picture is the sample of the front page when you click on our future miXXerS app on your mobile.

MiXXer App

< Click to enlarge >

 

Figure 1: miXXerS Future Mobile App

MiXXer2

< Click to enlarge >

 

Figure 2: miXXerS Welcome Page After Click the miXXerS App Icon 

MiXXer3

< Click to enlarge >

 

 

Figure 3: miXXerS Log-In Page (Only for the first time Log-in)

MiXXer4

< Click to enlarge >

 

Figure 4: One of the miXXerS App Functions

Favourite Music

Figure 5: The User Profile and the user able to view their favourite music that they  save

 

Location Tracking

Figure 6: The user allows to share their piece of music with optional related details such as description of the songs, Location or event. 

Notes: Figure 6 content such as location of events and songs will be provided based on users approval

 

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 >