CMS

Work to be done:

+ Allows new designs to be added to the site

+ New user playlist details sent here so they are ready to compile

+ Add new songs to the database

*Coded in PHP*

Mixtape Designer

Work to be done:

+ Adds design to playlist assigned to users account

+ 2 stages (custom) - tape colour and sleeve design

+ Pre-designed sleeves to be sorted into tape theme (ie love)

+ Details to be emailed or sent to CMS for me to compile

+ Visuals to be completed

+ Allow user to upload images from their computer or flickr

Components of the site

1. Mixtape designer (drag and drop)

2. Add words to the mixtape

3. Add gift voucher to the mixtape

5. Shopping cart

6. CMS back end to add new content to the site

Members Area

I do not want the user to be put off by the fact they have to sign up to the website to make their mixtape, so I plan to keep the information they need as simple as possible.

8tracks.com requires a user to sign up to use the website but they ask for only a username, email address and password to join. Once a user has entered their username, email and password they have direct access to their profile page and there is no need to confirm the account.

I plan to use something as simple as this login as I do not want this to be a barrier for the user. The reason behind creating an account is to store the playlist so that a user can come back and add/remove songs and take time over the order of their playlist.

Functional Requirements

After a discussion with lecturer James Field, a decision has been made on the functional requirements for the website.

The website will be mainly coded in HTML and PHP, however actionscript 2.0 will be used for the mixtape designer and the playlist maker. In order for this to work I will have to learn how to pass variables from actionscript to PHP.

When the user first enters the site they can choose one of two options:

1. Begin their mixtape
2. Sign up

If the user decides to make a mixtape before signing up to the website I will have to have some way of storing the information from the playlist they make and transferring it to their account once they have signed up.

If the user decides to sign up before making a playlist their account details will be stored within a database. When the user then makes a playlist and designs a sleeve the details will be saved to their account in the database.

As the playlist compiler and the mixtape designer will be coded in flash I will be using loadvars to send and load data between actionscript and PHP.

First illustrator sketches

Here are a few images on a boombox illustration I have been working on in adobe illustrator. I think there is too much detail in the image as I had orginally wanted so I will redraw this image again but with less detail.

Icon Sketches

Here are a few rough sketches for ideas of icons to be used within the site.

This sketch of a retro boombox is an idea for one of the icons for the hompage to represent compiling the playlist.

This was another idea for an icon to represent compiling the playlist. I felt this would be too detailed for the style of the website. I have chosen to go with the simple image of a boombox.

An idea for the homepage is to have a step-by-step visual of how to make your mixtape. The style of this will be sketchy and hand drawn with textures and patterns. This was a first inital idea for the icons.

Homepage sketch ideas

These were rough first sketches of the homepage design. I went back to the roots of the website and took inspiration from mixtape sleeve designs and cassette tapes to come up with the overall design.

tapedeck.org

http://www.tapedeck.org/

Tapedeck has been a point of reference to myself throughout the design process of the website. It is a website which collates all the weird and lovely designs of the cassette tape and showcases them to the public.

new revised site map

With the idea that I would include a members area for the website I have had to changed the flowchart slightly to accomodate this.

bruno mars - just the way you are

The video for bruno mars song 'just the way you are' the singer uses the tape from a cassette to express what he is feeling towards the subject.

login and members area

When initially working on the concept of the website I hadn't thought about adding a members area. After careful consideration I believe having the user create an account might be a useful aspect to the site.

When the user is making a playlist for their mixtape, a lot of time and consideration will be taken into which songs they choose so the flow of the website cannot be one which is rushed.

By having a members area it allows the user to save the playlist and return at a later date to finish it. Also the flow of the mixtape creation will be more structured.

Other benefits of having users set up an account on the website is for further marketing of the website. When users create an account their email address if stored for email marketing.

Flowchart Research - Moonpig

As I was having problems working out the flow of the website I decided to research similar websites to see how they managed different stages of the users experience on the site.

Moonpig

Moonpig. com is a website which allows the user the customise cards for a more personal touch.

1. First the homepage allows you to select from either a selection of popular/latest cards or from a list of occasions down the left hand side

2. After selecting an occasion you are then asked to define your search further by choosing a design

3. Once a design is chosen, moonpig confirms your choice but also gives you other recommended cards to the right hand side of the design.

4. Once your card is confirmed you then can edit the text on the front of the card

5. This page allows you to edit the inside message of the card

6. Once the editing of the card is done, you are then able preview card and submit or go back a step

7. Before purchasing the card you must select whether you want the card sending to you or the recipient of the card

8. Once you have selected your delivery you are then asked to create a moonpig account to finish the transaction.

mixtape designs