Adding social networking - Facebook

My original idea for the adding music stage was that the site would recommend music to the user depending on the type of mixtape they were making. This would involve the user inputting who they were making the mixtape for at the beginning of the process. The idea was to have 3 options:

- lover

- friend

- other

If they choose lover for example, a list of randomised songs that had been tagged with the genre "romance" or "love" would appear at the music stage. I would personally tag the music when listing the tracks in the database.

However, because giving the user more information to fill out would mean an extra stage I have started looking into other ways of helping the user compile a playlist.

A good way to get information is by using social networks. I have looked at both Facebook and Spotify.

Facebook

By using the Facebook graph API, information from a users profile is easily accessible. Using HTML and javascript, the API can access the users information after they have approved the connection.

The tutorial and example here: http://developers.facebook.com/blog/post/481 shows an application gaining access to Facebook users movie interests. This can be defined to user_likes and friend_likes.

Part of the information shared on a Facebook profile is 'music you like'. If I could gain access to a users friend list that would then allow them to find out the music the recipient of the mixtape likes.

Etsy Example

Etsy have a used a similar idea within their site to allow users to look for gifts specific on a Facebook friends tastes. Information from their Facebook profile is taken and applied to the store, a list of gifts appear on etsy that would be suitable for the friend. Information such as pages the user has liked and hobbies and interests are shared with Etsy in order for them to display the right gifts.

By clicking "choose a Facebook friend" the user authorises access to their Facebook account and the information held there.

The users friend list is displayed in a pop up box. The user then can select the friend they are wanting to buy for.

By accessing that friends Facebook information, a list of gifts are displayed which would be suitable to their tastes

Stage three - Edit stage (revised)

Originally in my storyboard I wished to have an edit stage after choosing the theme. Because each theme comes with a set inlay and cassette sticker to match, I wanted to let the user mix up the sticker and inlay so they could create their own style.

However I realised if I were to allow the user to edit the design on the cassette tape, it would be more effective if I let them have more freedom to add text and stickers.

Also as I was developing the stages I realised that because the user chooses the colour of the cassette tape first, sometimes the cassette sticker design does not compliment the colour. I had the idea to perhaps let the user tint the sticker colour so it would compliment the cassette colour more.

A test page for the code can be seen here:

colour_test01

Overall I think this would be a more beneficial stage to add to the process. I would like to add buttons of colour down the side of the cassette tape for the user to click on. When then the colour is clicked a tint will be applied to the cassette sticker. This is done by adding an event listener to the button for it to perform the function of tinting the movie clip tape_sticker.

The following classes are added to the top of the code:

import fl.motion.Color;

import flash.geom.ColorTransform;

The ColorTransform class adds the ability to control brightness and tint.

Stage one - Choosing a cassette (revised)

After some careful thought into the first stage I realised it would be more useful for the user to choose a coloured cassette instead of a brand of cassette.

Originally I wanted the user to choose a brand of cassette such as an Alfa or Memorex, based on the similar idea photography app Hipstamatic implements with its style of camera lenses.

See blog post here.

My reasons behind the idea was because different brands tend to have different styles and looks to the tape and it would be nice for the user to choose a vintage looking tape.

See tapedeck.org

However, I realised that there would be no need for the user to choose a brand.

- The sound quality of the branded tape would have no relevance to how the final product would sound, as music was stored on the USB and not the cassette tape

- The unique design of the branded cassette would not be seen as the theme sticker would cover the front of it

- Realistically, even though the product is recycled being able to get hold of the exact same branded cassettes would be a very difficult task.

Instead I have decided it would be more realistic if the user chooses the colour of the cassette tape. For making the product this is more realistic as the majority of cassette tapes I have collected tend to be of set colours:

- black

- white

- clear

- cream

- baby blue

Stage one - Choosing a cassette

Because the idea behind the website was that all the products were recycled I thought it would be nice that the user chooses out a brand of cassette. For instance, a memorex or an alfa. See tapedeck.org.

It is something many photography apps have implemented for their photo filters. I have started looking into Hipstamatic which allows you to add different lens to achieve different photographic looks. Each lens is based on old camera lenses.

I wanted to apply a similar idea to when the user chooses a cassette tape. When the user clicks on a brand a pop up window would display with the history of the tape and facts about it.

Stage Two - Theme Chooser

After careful consideration, I decided to change the design of the theme chooser stage. An example can be seen here:

choose_theme02

When the user reaches this stage, the coloured tape they choose appears in the window along with a blank inlay. When the user clicks add theme a pop up window slides in with a choice of themes, represented by square thumbnails. Once the user selects a theme the pop up slider disappears and the theme is added to the tape and inlay.

Blank cassette and inlay

Theme selected

Make a Mixa - Inspiration

When starting the design of the mixtape maker, I noticed some flaws with the usability when choosing a theme. I tried out a few different layouts, which can be viewed here:

choose_theme01

If you select the middle image a pop-up appears confirming your choice of theme. I wanted to keep the themes small and concise like buttons. However this does not work well for the user because apart from the pop-up window that appears after selecting a theme, the user does not get to see what the theme would look like on their tape. It would be better if the user could see their theme take shape in the full window too rather than a small pop-up window.

Eventually I decided to take some inspiration from one of my competitors. Although Make a Mixa are a competitor and I didn't want to copy their work, the way they had designed their mixtape maker was simple and easy to use.

Blank Inlay

Left side slider menu

Choose pre-designed theme

Theme added to blank inlay

Add stickers to tape by drag and drop

The stage ends by the user clicking the 'Next Stage' button in the bottom right, which only appears after the user has added something to the inlay.

Storyboard - mixtape maker

I have gone through many different ideas for how the mixtape maker will run through. I want to ensure there are not too many steps and the process is quick and easy. Because the theme designs include the inlay and the cassette sticker and also the choice to add music to the tape it is hard to condense the process. I decided to draw a few ideas of storyboards to see how the mixtape maker could run through:

Stage one + two

Stage three + four

Stage Five