-
Wireframes: my initial sketches as I was coming up with my design and layout.
-
POC: Final Concept
The concept for my (as yet unnamed) music mashup is as follows.
Description
A music mashup site based around live music. It provides images, gig guides, reviews, videos and “buzz” all in one place.
Use Cases
1. Search by band.
On the front page, the user has the ability to type in a band/artist name. This is a one-click process, laid out very clearly on the homepage. The results returned include images, Tweets, Youtube live clips, reviews of gigs they have previously done, and a list of their upcoming shows. All information is displayed in one place, and wont require the user to navigate away.
2. Search by Location.
Similar to the above, the user can search by location (eg. “Brisbane”). The results are then based on live music in general in that location, with the same data sources used.
Data Sources
Flickr - photos from recent gigs.Fasterlouder - Photos, reviews and gig guide
Twitter - Tweets (“buzz”)
Youtube - clips of live performances
-
Moodboard compiled for my music mashup. I always associate red and black with live music. I find the propaganda-style posters to be an interesting style, and it’s something I’d like to experiment with.
-
Case Study 2: Foodspotting
Foodspotting goes one step further than your average restaurant review site. Rather than just being able to search through restaurants, users can also search dishes. If, for example, the user craves Gyoza, they can type it in and find restaurants near them that do good gyoza.
Information Sources
Include:
Twitter
Foursquare
Google (Maps/Geolocation)
Use Case
The user can search by dish, restaurant or location.
The default location is the user’s location, unless they enter different information. The results are returned in both a map and list formats. A list of related “guides” (eg. “Brisbane’s Best Breakfast”) are also listed down the side. The results are very easy to read, and can be clicked to find more information, images and in-depth reviews.
Assessment
This site is part of the reason I chose not to do a food-related mashup. It’s hard to find fault, or anything lacking, with this site: the range of information sources, the ways information is presented, and the user interaction are almost flawless. I will certainly be taking some cues from this site when I create my mashup.
-
Case Study 1: SoundReady
SoundReady is a website that generates setlists for bands as requested by the user. It analyses trends and looks at previous setlists to determine what a future setlist will consist of, and allows the user to listen to playlists matching this.
Information Sources
SoundReady uses a variety of APIs, including:
rdio
echonest
songkick.com
setlist.fm
Use Case
The home page is easily navigable: the user is prompted to enter the name of a band or artist.
The results show what is likely to be the setlist at an upcoming gig for that artist. The user can listen to the songs right in the browser, without navigating to a different page. There is also some information on the artist, and a list of their upcoming gigs.
Assessment
This site provides all the information that someone looking forward to a concert could want. I personally have looked up setlists before, and would definitely use this tool in the future. It also incorporates many of the features/expectations of web interfaces that I discussed a few weeks ago: social connectivity, live/current data, cross-browser/platform compatibility and usability. -
Refining My Ideas and Making A Decision
Decision time!
Now that I’ve done research regarding data sources, I’ve established the following sources, and which of my 3 ideas they would be suitable for.
Ideas:
1. Restaurant idea
2. Recipe idea
3. Live Music idea
Data Sources:
Twitter - suits 1, 2, 3
Flickr - suits 1, 2, 3
Foursquare - suits 1, 3
local.google.com - suits 1
Yelp - suits 1
Taste - suits 2
Fasterlouder - suits 3
Looking at this, it’s clear I have more data sources for my Restaurant and Music ideas than my ingredient/recipe-based mashup. So, idea #2 is now eliminated.
Refining the Idea
This leaves two ideas.
1. My Dining Out Mashup
Data sources: Twitter, Flickr, Foursquare, local.google, Yelp
Idea: I want to expand this idea, so it’s not just restaurants that are searchable, but also dishes/cuisines. The user can search for either a specific restaurant, or a type of restaurant. Results would include reviews, images and location details. I need to figure out how to streamline this best to include location etc.
2. My Live Music Mashup
Data Sources:Twitter, Flickr, Foursquare, Fasterlouder
Idea: Allows users to find images, reviews and gig guides, pertaining to either a specific location or a specific band/artist.
Decision
After looking around at a few different mashup sites, and considering the potential for what I want to do, I have decided to go with the music-oriented site. I have seen too many good examples of food-related sites similar to what I want to do (examples to follow), and think I’ll be able to be more creative with my music site.
-
Research: Data Sources
Having come up with 3 different ideas for my mashup, I am now looking at the data sources that I might use, to help determine which idea I will select.
Proposed data sources:
Twitter
Flickr
Foursquare
Urbanspoon (or similar?)
A recipe site (taste.com.au?)
Fasterlouder (or similar?)
So, beginning with the easiest…
Twitter
The documentation for the Twitter API is EXTENSIVE! This seems to be one of the most commonly used data sources for mashups, and there are many apps, widgets etc. created using this documentation. It appears to be easy to use, and would be helpful in providing community-based “buzz” about the subject of the mashup. Getting real-time opinions and info seems like something that would be valuable in any of my 3 mashup ideas.
Flickr
http://www.flickr.com/services/api/
The Flickr API is also one of the most commonly utilised in mashups (as evidenced by the large number of search results if you look up “Flickr” on Yahoo! Pipes). This is one data source that I experimented with in class when we looked at Yahoo! Pipes, and it does seem to be quite straight-forward. I can imagine that this would work well to provide images in whichever of my mashups I choose to do - it’s easy to find gig photos (there are many!), and it’s equally easy to find images about food and restaurants. As an experiment, I searched some of my favourite small local restaurants and there, and got a surprisingly large number of results. I will definitely use Flickr, regardless of which mashup idea I choose.
Foursquare
https://developer.foursquare.com
Foursquare has been suggested to me as a possible data source. While researching, I was suprised to learn that popular iPhone app Instagram uses Foursquare as a data source (see: https://developer.foursquare.com/appsshowcase/instagram). I can definitely see the use of location as being beneficial to each of my mashup ideas, as well as the fact that the number and nature of “check-ins” could definitely be of use in my restaurant mashup.
Urbanspoon (or similar)
In all my research, I COULD NOT find a feasible way to incorporate Urbanspoon into my mashup. No RSS feeds, no API, everything is closed off to developers. Some alternatives I came up with are:
local.google.com: the Google API has quite extensive documentation, but I’m not 100% sure how I’d implement this.
yelp.com
http://www.yelp.com/developers/documentation/examples
Similar to Urbanspoon, but seemingly less popular in Australia.
I will definitely have to assess whether this will affect my choice of Mashup theme.
Taste
http://www.taste.com.au/feeds/
After the frustration of Urbanspoon, it was a huge relief to find that one of my favourite (and one of the largest) recipe websites, taste.com.au, has a heap of usefull RSS feeds. This bodes very well for my ingredient-based mashup idea.
Fasterlouder
http://www.fasterlouder.com.au/
Fasterlouder is one of Australia’s foremost music sites. With a built-in RSS feed, this one should be fairly easy to build in if I choose to make the live-music-based mashup.
-
Brainstorming for Mashup Concept
Areas of interest for me:
Food
Music
Expanding on this:
What kind of website would I access/what information would I want?
1. Local restaurant reviews
Example Use case: User types in city or suburb to find restaurants in their local area. They are searching for reviews (both professional and casual).
Information sources: Could probably use a combination of Twitter, Flickr and a restaurant review site (like Urbanspoon? Find one with a good API) to deliver “buzz” about particular restaurants and/or restaurants in a particular area.
2. Inspiration for recipe/meal ideas.
Use case: user has one main ingredient, and don’t know what dish to make with it. They type in the ingredient, and get numerous ideas back.
Information sources:
Twitter, Filckr, Maybe a recipe site, or Tumblr
3. Live Music
Example Use case:
1. The user is searching for gigs in their local area, or
2. The user is searching for reviews and photos (professional and non-professional) of gigs that have already occurred
Information sources: - Similar to above: Twitter, Flickr, maybe a few music review sites (eg. Fasterlouder) so people can search for what’s happening in a particular town, reviews of gigs, info about a venue etc.
-
Initial Analysis Poster
-
Initial Analysis: 3 Web Projects That Fit My Criteria
Name: Deviantart
Link: http://www.deviantart.com/
Justification:
Social Connectivity: All “Deviation” (Individual artwork) pages have social media icons for easy sharing across networks.
Live/Current Data: Homepage has option of seeing newest works first, as well as the most popular (received most favourites from members) in the past 8 hours, 24 hours, 3 days, 1 week, 1 month, or all time.
User Interaction/Contribution: Members can post their art to not only their own page, but various groups. They can give and receive comments and critique, and use the “favourite” capability to influence the popularity of works they like (see above). There is also a popular forum section.
Part Of A Network: It is easy to find new artists to “watch” (receive updates from); through groups, by using the site’s forums, or simply by browsing. With millions of members, a user can spend a long time casually looking for new favourite artists.
Cross Browser/Platform Compatibility: The mobile site (as shown in a previous post) is easy to use, and purpose-designed for smaller touch-screen devices.
Accessibility and Usability: The site has changed dramatically over the years, maintaining its distinct visual appearance while altering the way it functions. It is now maximized for both casual browsers and members who have specific tasks in mind.
[Image]
Name: Tumblr
Link: http://www.tumblr.com/
Justification:
Social Connectivity: It is possible to connect with other networks via settings, where a user can link their account to Twitter or Facebook, which will then automatically post their new posts/reblogs to those other networks. No social media icons or quick ways to post other user’s content to your own social media circles, however these might clutter up/”slow down” Tumblr’s minimalistic appearance and usability.
Live/Current Data: Users can follow others, meaning new posts from blogs they follow will appear immediately on the “Dashboard”. Users can also track tags, meaning posts tagged with particular words or phrases (eg. all posts tagged “Brisbane”) will appear on the dashboard, regardless of who published them.
User Interaction/Contribution: All content is user-generated. Each reblog increases the number of “notes” on a post, some posts have comment sections, and long conversations often take place over reblogs.
Part Of A Network: Users can easily see who else liked or reblogged a post they enjoyed (or who created the post in the first place), and find new content publishers this way.
Cross Browser/Platform Compatibility: The Tumblr app allows users to easily post and tag content from their mobile devices. Browsing content this way is not yet perfect, but it is functional and complements the desktop experience well.
Accessibility and Usability: The dashboard (front page for users who are signed in) is extremely straight-forward. Options to post new content are in the centre-top. From there, posts by blogs the user is following are displayed neatly, in a single column, in chronological order. It couldn’t be more simple!
[Image]
Name: Lifehacker
Link: http://www.lifehacker.com.au/
Justification:
Social Connectivity: The site is absolutely littered with social media icons. There is a section in the sidebar with links to Lifehacker on Facebook, Twitter, and its RSS feeds. On each article, there are icons to allow easy sharing over numerous social media platforms, including those that aren’t so popular.
Live/Current Data: Having numerous staff members writing for the site, the front page is updated quite frequently (several times a day). The front page seamlessly displays both popular and most recent content.
User Interaction/Contribution: Though this site is not as strong as the others here, it does still have a comments section. It’s likely that discussion about the articles would occur on users’ individual social networks when they share the content.
Part Of A Network: Lifehacker is part of the Allure/Gawker network, home also to Kotaku, Gizmodo, Popsugar etc. It is easy to find what other articles a writer has done, as well as find content on any of the other sites in the network.
Cross Browser/Platform Compatibility: The site has a mobile-optimised site, similar to those of the sites above.
Accessibility and Usability: The design of the site displays the information in the most logical way possible. Popular and new articles are both given priority, while colour and a grid layout are used to guide the eye.
[Image]
