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

Final Themes

Name: Lovecraft

About: Dark, inspired by witchcraft, love.

For:

Name: Chasing Rabbits

About: Pinks, loving, girly and light.

For:

Genre

Name: Dark Love

About: Dark, dangerous, mysterious, sexual, serif fonts.

Fake French

French inspired, antique, travelling, handwritten.

Cosmic

Space theme, intergalactic, muted colours.

Kitsune

Fox inspired, collage effect

scanning materials

Today, I sourced some materials from a local haberdashery. I scanned each piece of material into the computer and using photoshop adjusted the colours and tones.

The images will be used for the cassette stickers. I want the product to be as organic as possible to give it a more hand made feel. I choose materials with different textures which will hopefully come across in the design of the sticker.

Each piece of material will be for a set tape theme.

Photoshop Actions

[about PS actions here]

Proposed Colour Schemes

Photoshoot - final images

I am in the process of editing the final images from todays photoshoot to advertise the product. The shoot went really well and helped me define a colour scheme for the website.

Photoshoot

There will be lots of imagery throughout the site to advertise the product. The photos will demonstrate how the product can be used and the different designs on offer to purchase.

My friend Rachel has offered to model in the photos for me.

The photos will show:

[sketches to be added soon]

- Her receiving a parcel

- Opening the parcel

- Holding the tape

- Opening the tape

- Playing the tape on her macbook

- Listening to the tape with her headphones

- Laying listening to music on headphones on the picnic blanket

- Walking thru the field with stereo in hand

- Reading love letter

- Putting cassette into stereo

The location

- Grassed area within some woods near my home

- Bedroom

The Concept

The concept behind the photos are to show the old and new ways of listening to music. I will first photograph my model having a picnic listening to a mixtape that her boyfriend has sent her. She will be happy and relaxed, reading a love letter from her boyfriend. She is listening to the music via an old tape player

The second shoot will show her in her bedroom listening to the new style mixtape on her apple macbook. She is listening to the music via her headphones. Again she is happy and relaxed reading a love letter this time on the computer screen.

The style

- Close up product photography

- Shots from above

- Washed out vintage filters

- Lens flare

- Rounded corners

Feelings

- Airy and sweet

- Dreamy

Cassette tape labels

For the cassette tapes, I will design stickers which will compliment the cassette inlay themes. The user will be able to change the design of the sticker with other options. I will produce some of the same patterns in different colours.

The label design will flow on from the design of the website and will have a scrapbook/collage feel to it. I will collect materials to scan into my computer which will then be printed out as stickers. The textures will give the tape a DIY feel to it, like it has been made personally.

Inspiration was taken from the book: Cassette from my ex

[scanned image here]

My target audience

[research goes here]

[questionnaires]

age group

income

location

sex

interests

musical interests

style

Tape Inlay Content

Content

Title

On the inlay of a mixtape the compiler usually gives the mixtape a name relating to the content of the tape and the person they are making the tape for. It could be an inside joke between the two listeners or just something that relates to the genre of music on the tape ie "death tape" for rock/metal.

I should possibly give the user the option of including the name of the person they are compiling the tape to.

Tracklisting

A track listing appears on the inside of the inlay so the listener knows what they are listening to. A cassette tape has two sides, side A and side B. The cassette tape inlay is separated into two so the track listing can be written for both sides.

This is a personal element to the tape as the compiler gets to hand write the track listing. So that I am still keeping this personal element within the design, I will look into using a handwritten type face.

Tape Themes

Themes

According to the book 'cassettes from my ex' there are several different types of mixtape:

Crush Tape

First date tapes, given to someone new that you have developed a crush on. Music on this tape is filled with tracks that represent you, but also songs you think the recipient may like.

Musical Journey

This is an opportunity to share a side of yourself you keep under wraps. Music included on these tapes share musical knowledge.

Audio Postcard Tapes

Usually starts with a spoken introduction to acquaint the recipient with the senders voice. Can be a crush tape or a musical journey tape.

Conceptual Tapes

Made by art students, for art students. Everything about these tapes are artistic, from the cover art to the choice of songs and the way they are recorded.

Era-defining tapes

Categorising music from a particular year or period, eg "Senior prom mix 92"

Breakup tapes

Sent to an ex to remind them of the times they spent together and important songs from their relationship. This could express nice or hurt feelings.

Themed Tapes

Tapes made for a special occasion. The birth of a new baby, driving tapes etc...

The design of my website and the concept of the tapes is based around the romantic gesture of a mixtape. I am predicting the majority of my customers will be purchasing the tapes for loved ones. The following styles apply to me:

Audio Postcard Tapes

Crush Tape

Themed Tapes

With this in mind this helps me define the style of the themes I will design for the user. Another fact which influences the design is the genre of music the user will be adding to the tape. The most common genres are:

Pop

Rock

Indie

RnB

However, the website will undoubtedly have a specific target audience which will determine the type of music they will be interested in, therefore adding to the mixtape.

Tape Inlay Designs

Design

The idea behind the themes is that they will all have a different layout. The user is choosing the layout rather than the content as the content can be edited and changed if they wish.

Inspiration will be taken from old cassette inlays. I will produce 6 designs with the intention of adding more designs in the future, these would include limited edition tapes aswell. All artwork will be my own or acquired from stock image websites.

The user will only be able to change the text and the imagery. This allows the user to create something personal but also of a good design. Most of the inlay designs will be simple and clean.

Layout

With traditional mixtapes, compilers would design the cassette inlay to match the songs on the tape or represent a feeling they wish to express to the person receiving the tape.

This element of freedom is great in allowing people to express their own feelings but perhaps some people wish to make a mixtape but do not feel comfortable designing a cover for it. With my themes, the user can choose a pre-made design, with the option of changing certain elements. However the layout will stay the same.

Traditional mixtape designs were designed both landscape and portrait. I would like to have functionality on my site to allow the user to choose between the two.

The making of the tapes

Today I made a prototype for the product. The finished product is a little glitchy.

- The slider is too high and needs to be cut down

- The slider needs to be covered in black electrical tape to match the tape colour

- The smaller reel inside is pushing the usb up causing it to sit wonky within the tape

To make the product I need cassette tapes which are fixed with screws so they are easy to dismantle. However, I am having problems getting more tapes at the moment.

Gift wrapping the tapes

The tapes will be advertised as gift wrapped in brown paper with card labels. The website logo will be stamped/printed onto the tag and the address handwritten on the reverse.

Typeface inspiration

After some research, I decided a retro style font would sit well with the design. As long as the type looks sketchy and hand drawn. This typeface is very popular at the moment.

The cassettes

I have met a dealer of old cassette tapes through Ebay who is willing to supply some old cassette tapes. Alot of the old tapes on ebay are quite expensive as they have become quite rare. however I will be choosing cheaper alternatives.

When I have received the tapes I shall be following the instructions set out on the website instructables.

Instructables - make a mixtape USB

The kind of look I was going for with the tapes are used, old, scratched and in a variety of interesting colours. Here are some examples:

Digital Scrapbooking

To help with my design, I started collecting reference photos and images and annotated them in my sketch book.

I found from my research that a scrapbook styled website must be:

+ Realistic

+ Rustic

+ Textured

+ Faded

To achieve this I must use:

+ Lots of overlapping elements

+ Textured paper over the top images to give them a more untidy feel

+ Vintage style photography

+ Shadows to give the design a feeling of depth

+ Skewed and misplaced elements

+ Handwritten type

New designs