Idea Analysis
The idea is a website in which children can learn to write music in a simple and easy layout for younger generations to understand.
At the moment in the music creating industry, there are only two extremes in the market. There is very advanced and complex DAW’s and too simplistic apps where you just press buttons where programmed loops play, as you press more buttons, more layers are added to your ‘song’. DAW’s like Logic Pro X by Apple are very easy to get confused by very quickly as there are many menus’ which are hidden as standard so someone who has never used it before can find it very intimidating. Apple do also offer a step down from Logic Pro X called Garage band but this is still very complex because it just removes some of the very complex and deep features of Logic Pro X meaning that on the surface it can still be very scary and intimidating to someone who is very new to all of this. This person just wants to explore how sounds go together but find it hard to do this with simple apps with only buttons to press and there is not even a slight bit of control for the user. On the other hand, they find proper DAW’s too intimidating so they try to find an in-between and this is where my idea comes in.
For my idea, there will be 4 main chunks the GUI; a top section of basic controls including play, pause, stop and back to start. There will be a section on the left of the screen left where the user can pick a new layer that they would like to add to their song, this will include the different instruments that are pro-programmed that the user can pick from. On the right hand side of the GUI, the user will be able to choose what loop they want to use which they can then drag and drop in the next drag and drop part. This will change depending on the instrument layer they choose in the left section of the GUI. The last area and where the user will spend most of their time. This section will progressively more and more full as the user builds up and creates their song. Also, I want the left side of the middle to show what instruments and layers correspond to which loop blocks in the middle so it’s easy to tell what is what. I want this to look a bit like how Logic Pro X laid this out, it is very clean and easy to see everything you’ve done:
I want most of the GUI to look similar to Logic Pro X’s design all over. The changes to mine will be that it is simpler and cleaner. Logic Pro X’s GUI can be quite overwhelming sometimes because of the amount that it can do so my aim is to make it look much simpler and accessible. At the moment, this is how to Logic Pro X GUI looks:
At the top, there are so many controls that it can look very clustered. Logic Pro X has many different sections to its GUI, there is another two main parts of it that aren’t open like there’s an area on the right that is closed at the moment that takes up a lot of space. Once all of these sub-windows are open, there becomes less and less space to actually work in and it becomes very hard to actually create for someone who is new to all of this. For my GUI, only having a maximum of three windows open at the same time, in effect this will mean that there is much more space for the user to work in and create. Also I will have a much less control button heavy top bar which is very universal. What I mean by this is that every user will know, I will only use basic controls because at the level that the website is designed for, it doesn’t need anything more complex.
In the loops part of the website, they will be pre-recorded by me and imported to the website. The point of my idea is not for the user to song write but for
Competition
Logic Pro X
Price: £199.99
Platform: Mac
Pros: The GUI is very clean and aesthetically pleasing,
Cons: Is very complicated from the get go and have to pour many hours into it to start to understand it and my target audience won’t want to do that.
Fruity Loops
Price: £169.99
Platform: Windows, Mac
Pros: Available on both mainstream platforms,
Cons: Doesn’t include many extras apart from the base program. This means that they offer a more expensive counterpart which includes everything. Complicated GUI
Both of my competitors offer pieces of software meaning that
Success Criteria
– The user is able to easily navigate the GUI and in effect then the user can create a song with little to no difficulty
– The website must be able to run on most browsers
– The website must be able to output sound
–
User Requirements
– A computer that they can access
– A computer with internet access
Limitations
– Internet/internet access
– Outputting sound
– Computer speed
– Accessibility to a computer
Some user’s might not only not have any internet access all of the time, which will mean that instead of having some projects downloaded like other software, but they might not even be able to access a computer at all.
Survey
Fifteen people in total took the quiz. The responses in colour.
What is your gender?
1. Male – 13
2. Female – 2
3. Prefer not to Say – 0
What category of age are you in (years old)?
1. Below 5 – 1
2. [5-7] – 1
3. [8-10] – 1
4. [11-13] – 6
5. [14-16] – 5
6. Over 16 – 1
Do you have a home computer which has access to the internet?
1. Yes – 15
2. No – 0
Do your school have a computer suite that has access to the internet?
1. Yes – 15
2. No – 0
Have you ever used Logic Pro X?
1. Yes – 8
2. No – 7
If yes, did you like the experience of using it? Explain why.
[Long text answer]
1. Positive – 7
2. Negative – 1
If no, have you ever thought about using it?
1. Yes – 4
2. No – 2
3. Maybe – 1
Have you ever used Fruity Loops?
1. Yes – 3
2. No – 12
If yes, did you like the experience of using it? Explain why.
[Long text answer]
1. Positive – 1
2. Negative – 2
If no, have you thought about using it?
1. Yes – 8
2. No – 2
3. Maybe – 2
If you’ve used a DAW before, do you think the time box is significant?
1. Yes – 2
2. No – 12
Did you find these programs hard to use?
1. Yes – 10
2. No – 4
3. Maybe – 1
If yes, would you like a simpler application?
1. Yes – 9
2. No – 1
3. Maybe – 0
Would you rather it be a web app if there were to be something new in the market?
1. Yes – 9
2. No – 0
3. Maybe – 0
Survey Responses
My survey was split into two parts. The first part was about the user and what their basic info was like age, gender and then about their situation with computers. In the second part of my survey is about my competition and if they had used it, what they thought about it and of they wanted something new to the market that suited their needs to create music with ease.
For my first question, I asked what the persons gender was giving the options of: male, female, prefer not to say and other. When I reviewed the responses to my survey, two were female and thirteen were male. This shows that my target audience is males and I should aim to develop my website with an aesthetic that would appeal more to males, like using a darker palette and less colour in general. This should attract more males check the website out and continue to use it because they think it looks nice.
The second question was in my opinion the most important because it tied all of the survey together and gauged how useful the last questions were. The question was ‘What age category are you in (years old)?’ I then gave the user multiple options of different brackets. The most popular option was the age bracket of eleven to thirteen with six people choosing that option. The second most popular option was the age bracket of fourteen to sixteen with five people choosing that option. There were then other options, but they only had one vote each with the other four options. This shows that my target audience for the website should definitely be towards students in high school, whether they have any experience in music creation will be determined in the survey later which is also quite crucial to the development of my website in terms of the user interface including some more complicated features or not.
The third question was ‘Do you have a computer that has access to the internet in your household?’. I included this question because even though I am intending to develop my website for schools, if the user wants to carry on their music creation at home it is vital that they have an internet connection to be able to access the website from their home. All of the people that did the survey selected yes for this option. This is good because it doesn’t restrict the target audience anymore in any way.
The fourth question was ‘Does your school have a computer suite that has access to the internet?’. As I said about in the previous question, having access to the internet and being able to actually use a computer in the user’s school is the most important question in this survey. This is because I am intending to develop the website for the purpose of the user either in their own free time or in a music lesson to be able to access this website and just start creating music to be able to express their feeling through the composition of music if they don’t want to speak about it. All of the people who did the survey said yes. Again, this is good because it doesn’t restrict the target audience in any way.
The firth question was ‘Have you ever used Logic Pro X before?’. I included this question because Logic Pro X is one of my rivals and I am basing some of my website on Logic Pro X. This question is good because it gauges how much experience the user has with music creation DAW’s (digital audio workstation). The results were that eight people said that they had used Logic Pro X before leaving seven people that hadn’t ever used Logic Pro X before.
The sixth question was an extension of question five but essential to information collection. The question was ‘If you answered yes to the previous question, did you like the experience of using it? Explain why, or why not’. This question was very important because since I am basing part my website on Logic Pro X. If my target audience have used Logic Pro X have used it before and didn’t like the experience of it, I need to know why they didn’t like it and how I could take this on board to not make the same choices that lead to the target audience not enjoying their experience using the piece of software. Out of the eight people that said that they had used Logic Pro X, seven people said that they enjoyed the experience that they had with Logic Pro X and one person said that they did not enjoy their experience when using Logic Pro X.
A sample answer from one of the people that said they did was: ‘I really enjoyed my experience when I was using it because the colours were really appealing and was easy on the eyes. Another reason I liked it was because of how easy and clearly everything was set out. I did stop using it however because even though everything was set out really clearly, it got very complicated very quickly and there were no in-built guides to show you what to do and progress. I think that they should include a tutorial on how to use most basic features because I could only figure out how to use one or two’. This was a perfect answer because they said that they really liked how it looked and that they liked how easy everything was set out. This changed though because they found quite quickly that it got too complex with nothing to show you how to use those more complex features leading them to stop using it. That might sound bad but actually it’s really good because my website is being developed to tackle the problem of some pieces of software being too easy and then others being too complex and there being no in-between which is at the point I plan to develop my website towards that specific area.
A sample answer from one of the people that said that they did not was: ‘I didn’t enjoy using Logic Pro X was because there are no instructions or anything on how to do anything and therefore I had to look for other places to find out what was going on. I also didn’t like how you had to press so many buttons just to reveal one part of the user interface.’ Similar to the first response, this person said that they didn’t like how there was no tutorial. This is definitely an aspect which I will incorporate into my website whilst also it not being nearly as complex as Logic Pro X. They did however say that they didn’t like the number of buttons that they had to press to just be able to do fewer things. I am planning to only have two buttons which do two different things and just open up the two main components of the user interface and the user then having the ability to compose. The only reason that I am planning to include any buttons at all is because I don’t want the main section of the user interface to become really cluttered all of the time, so I included the option to be able to collapse or expand these sections for this reason.
The seventh question was ‘If no, have you ever thought about using it?’. This is an important question because if they say yes, it means that the person has shown an interest into the music creation industry and could then benefit from the solution that I am offering. Out of the seven people who said that they had never used Logic Pro X before, four people said that they had thought about using it, two people said that they had never thought about using it and one person said that they maybe thought about using Logic Pro X. These results are very positive because over half of the people said that they effectively have shown interest into using a piece of software in the area in which I plan develop my website in.
The eighth question was ‘Have you ever used Fruity Loops before?’. Like Logic Pro X, Fruity Loops are one of my rivals but unlike Logic Pro X, I do not plan on using any aspects of Fruity Loops when developing the features of my website. Out of the fifteen people that took the survey, the results were a little bit more disappointing. Only three people said that they had used Fruity Loops before meaning that twelve people said that they had not used Fruity Loops before. This shows a little less interest than I would like but it’s okay because although Fruity Loops is on both platforms, it is a much less widespread piece of software and much less mainstream than Logic Pro X. Much more schools these days use Logic Pro X for the older years but not many at all use Fruity Loops because of its un-user-friendliness and complexity. They still don’t have any pieces of software of accessible websites that they know of to use for the lower years of the school.
The ninth question in my survey was ‘If you answered yes to the previous question, did you like the experience of using it? Explain why, or why not’. Again, this is the same as for the Logic Pro X but just asking about Fruity Loops this time. This is vital again because this question offers a comparison to the question about Logic Pro X, this is because just they are two very different pieces of software even though they get the user the same end result (composing music). Like the other question, I will give two different responses. For Fruity Loops though there was much less positive feedback out of the people who have used it, out of the three people who said that they had used it all two people said that they didn’t enjoy the experience of using it and one person said that they felt indifferent about their experience with it. This is interesting because even though Fruity Loops is on both mainstream platforms, only three people had used that took the survey which is half the amount of people that had used Logic Pro X before even though Fruity Loops is on double the number of platforms.
The answer from the person who felt indifferent: ‘I have tried to use Fruity Loops quite a few times now. I started off by watching YouTube videos to learn the basics of it, this only got me so far though. After watching quite a few videos, I didn’t get very far as the way everything was displayed was very complicated and hard to navigate. I eventually only learnt how to use one instrument but once I had, it was quite an enjoyable experience but couldn’t get any further than that, so it wasn’t much use after then. I would say that my overall thoughts of Fruity Loops are indifferent because it’s so complicated to use to start off with but it is fairly enjoyable after learning how to do something very basic but that can only last so long’.
A sample answer from someone who said something negative about Fruity Loops: ‘After discovering that my school computers had Fruity Loops installed on them, I decided to try and use it. I used online resources to help me in starting and learning how to use the software. I quickly realized that it would be much more complicated than it first seemed. I didn’t manage to get anything useful out of it because it was so complicated. I gave up after 4 hours, my overall experience wasn’t good at all since I couldn’t use the piece of software unless I put serious hours into researching how to use even the most basic features’.
Negative feedback about something would usually be bad, but in this case, it is actually really good. This is because I was planning on using no features or GUI design aspects from Fruity Loops. I put it in my survey just to see what (mostly) my target audience, but also others who just took the survey, think of Fruity Loops. This question is actually quite important because if my target audience actually did really like Fruity Loops, I would have to start thinking about other ways of designing my whole website.
Stakeholders
The stakeholders will be people who have a laptop or computer for home use but also go to a school which have facilities like a computer suite so that a whole class can use the website.
The main stakeholders for this website will be people of ages from seven to fourteen. I have outlined this demographic because even though it is only seven specifically targeted years, there can be a lot of different circumstances that they could be in. I have said from 7 years old because there a lot of very young people around the world that would like to seriously get into music from a very young age, with a simple drag and drop design I think my idea would really appeal to them. I have outlined until fourteen years old because on the other end of the spectrum, some older kids might have just started to think about getting into music, the simplicity of having pre-made loops instead of them having to write the whole piece would really appeal to this end of the audience just so they can get themselves started in the industry.
To demo my product to the target market, I think the best place for me to test it would be in a primary school and a secondary school for their respective demographic brackets. I think I should try it in a primary school because it will cover half of the range that I am targeting my website towards. This will also give younger kids access to the website as well which will be the real test for the GUI because if they can use it then it.
I would want to demo it in a secondary school as well not only because it covers half of my target audience range but also because it will give another response to how difficult the GUI actually is to use. In reality, it should be perfect since I’ve made it towards my survey responses so if they do have any ways that they would want it to be changed should only be minor tweaks could be done without too much hassle to better please the target audience.
Hardware and Software
There are three main options to create this app or website. Two of them are to develop an app on two different platforms, the other being to design and host a website.
I will develop this app in Visual Studio if I decide to create an android app or in XCode if I decide to create an iOS app. This is because they are the best for whichever platform of OS I choose to create my app for.
If I do decide to go down the app development route I think that it would be better for me to create an app for iOS would be better and easier for me because I personally own a phone which runs on the latest version of iOS therefore it would be much easier for me to test the app while in development. I would need to use an Apple computer because you can only run XCode on macOS.
Despite that, I want to design my idea as a website because I think that will be the platform in which my age range will have most access to. I also think that in general my idea would be much better in practice as a website because it might be quite slow on devices running iOS or Android apart from the high end/flagship models which would limit my target demographic even more. Most computer these days will be able to run a website with quite a lot of JavaScript which either the user’s school or home will be able to provide.
Computational Methods
In development, my website will use many computation methods. Write about computational method, which I don’t know how to do.
GUI Design
For my GUI design, I have chosen to go with a grey theme all over and used splashes of colour for accents of certain features. The website will use three different colour palette; a grey palette for everything but in-use buttons, a pastel palette for all the in-use buttons and a soft-warm palette for all the instrument icons. The aforementioned features are the: instrument icons, the button in use, the master volume slider and the current track time. The screenshot to the left shows what the website will look like while the user is generally using the website. This screenshot shows the play button active, this means that the track is currently playing, this is indicated by the green colour instead of the grey like all the other buttons are. On the left-hand side in the instruments section, I have made it so that all the icons are different colours, this is because I want to make it so that the user can easily differentiate between each instrument. I have also kept all those colours in a certain colour palette which is different to the one I used for the top bar controls. The master volume slider has colour guides to how loud or soft the user wants the tack to be. The time is in a pastel blue that is used throughout the GUI and I will talk about that in later screenshots. The website will have subtle section dividers which split up the 5 different tracks, there will be separate ones for the audio parts and the instruments part.
The screenshot to the left shows what the website will look like if all the buttons were active, at no point would all of them be active at the same time. In the top bar, there is a lot of colour which is why I wouldn’t like it like all the time because then it looks like it’s meant for a younger audience than intended. The idea is that when you press a certain button, its respective colour will light up, and depending on the button, the button will either stay lit up of go off as soon as you’ve finished pressing the button. In the top control bar, only one of the lights should be lit up at one time. They should all stay the same colour after the user has finished pressing the button but as soon as another one of those buttons has been pressed, the light should switch to the one that has just been pressed. For the top bar controls, I have kept all the colours in a certain colour plate so that it looks pleasing to the user. For the loops and instruments icons and some of the top bar controls, I have chosen to go with the same pastel blue as I used for the time, in the pastel palette. When the loops or instruments tab is open, the respective buttons will stay lit up in the pastel blue colour.
The screenshot to the left shows what the website will look like if no buttons were pressed (which would be impossible). It shows every button not pressed and the different combinations of buttons pressed with their respective colours. On the right-hand side of the main GUI is where the audio blocks are. I have kept these in with the instruments soft-warm colour palette because they are related to them. I have made them all the same colour so that the GUI doesn’t become over crowded with colour and again make it look like it’s for an audience that is younger than intended. The audio waves fit in with the grey palette, so it blends in with the GUI background.
The screenshot to the left shows what the website would look like if the loops tab were open. Loops will look just like the audio blocks but with the loop names instead of the audio waves.
You can see that all of the buttons are grey apart from the ‘Loops button’ which is blue. This is my main indication to whether that particular function is in use or not.
Development Plan
Stage 1: Main Layout
– Create the main elements to the layout of the website GUI
– Make the style professional looking with a bit of colour because of the target audience will appreciate that
For the first step, I will create the layout of the main section of the GUI, the part where the user will spend most time and when none of the pop out sections of the GUI are out. Because it is quite a simple GUI design, there won’t be much to go into creating the main layout. This consists of a background, the instruments control area and the audio block area.
The background will be the simplest part of the main layout; this is because it is just a block grey colour with no change splitting up the different sub sections.
For the audio blocks section, because he project will be empty at this point, there will only be the lines to code to split the different tracks up.
Just like the audio block section, the only elements that need to be coded are the lines to split the different tracks up. The only elements that will be there in this section when the project is still blank is the numbers to indicate what track number each slot it. I will code the elements to go into this section later.
When developing stage 1, there won’t be much development for the algorithms and code because all of it is going to be HTML. This is because all of the first stage is
Test No. Description Type of Test Test Data Expected Result Actual Result
1 When you load the website, it the background the specified grey? Black Box Load website The background of the page is the specified grey colour
2 When you load the website, do you see the lines that split up the respective sections? Black Box Load website The lines hat split up the different sections are visible.
3 Black Box
4 Black Box
5 Black Box
Stage 2: Reveal Section Layout
– Create the layout for the subsection of the GUI
– Keep the style the same to the main section of the GUI
Next, I will create the layout for the reveal on request sections of the GUI. These are the sections in which you must press a button for the user to be able to see. These sections will only be out briefly, but they are very key because they are the user will use both in tandem to create their music. I will code the buttons later in development so once this stage is done and until the stage where I code all of the buttons, these sections will remain visible at all times when normally they would be invisible. The reason that I am keeping them visible when they never will be until you press a button is because it will make it much easier to develop when they are visible and test to see if they have been developed correctly when it comes to testing this section of the website.
Again, when developing stage 2, there will be no development for algorithms because all of this section, like stage 1 will all be HTML. This is because all of this stage is design.
For my website, design is one of the most important parts. Design is so important because it defines the target audience and demographic of people I am aiming the website towards and it appeals to the people who will find it most useful. This is why most of the stages have a very large amount of design with programing because every single element of the website is oriented towards the target audience. If every single part of the website is like this, it might not appeal to a certain range of the target audience and that will then defeat the point of the website for those people.
Test No. Description Type of Test Test Data Expected Result Actual Result
1 When you load the website, can you see the instrument section? Black Box Load website The instrument section is visible in its specified area.
2 When you load the website, can you see the loops section? Black Box Load website The loops section is visible in its specified area.
3 Black Box
4 Black Box
5 Black Box
Stage 3:
Stage 4: Added instruments
In this stage, I will be coding the event in which the user is selecting an instrument from the revealed instruments section and for it have to be outputted into the instrument control area. It will show the instruments icon and its own volume slider.
Test No. Description Type of Test Test Data Expected Result Actual Result
1 When you load the website, can you see the instrument section? Black Box Load website The instrument section is visible in its specified area.
2 When you load the website, can you see the loops section? Black Box Load website The loops section is visible in its specified area.
3 Black Box
4 Black Box
5 Black Box
Stage 5: Added audio blocks
Next, I will be coding the event in which the user has opened up the loops section and then dragged and dropped into the track that links with that instrument loop. When they do, it will look like a block with an audio wave through it.
Stage 6: Instruments Section
– Code the section for the instruments reveal
– The instruments section will be revealed by the click of a button
Stage 7: Loops Section
– Code the section for the loops
– Make the loops able to be ‘dragged and dropped’
–
Stage 8: Drag and Drop
– Create an easy system for the user to be able to drag and drop loops
– Outline the place in the main GUI where the loop should be placed
– Make sure that if the user doesn’t drop the loop in the right place, the loop goes back into the loop section
Next, I will code and implement the drag and drop feature into the loops and main GUI section where the user can click on a loop in the loops section and then be able drag it into the desired location into the main GUI section with the respective instrument.
Test No. Description Type of Test Test Data Expected Result Actual Result
1 Can you drag the loops? Black Box Drag a loop The loop is picked up and can be dragged across the screen
2 Does the loop drop in right instrument section? Black Box Drag and drop a loop into right section Loop is in correct place and can be played.
3 Does the loop drop in the wrong instrument section? Black Box Drag and drop a loop into the wrong section Loop goes back into the loops section, not the wrong section.
4 Does the loop drop back into loop box if dropped elsewhere? Black Box Drag and drop a loop into somewhere else Loop drops back into the loops section
5 Black Box
Stage 9: Time Box
– Code the box for the current time of the track to be displayed
– Code it so it also displays the time as the track is playing
The time box is being done at the rear end of the project because it is one of the elements of the page that is only there for aesthetics state, the survey shows this because
Stage 10: Final JavaScript
– Add colour to control buttons
– Add animation to colour on control buttons
– Add colour to volume sliders
– Add animation to the colour on the control buttons
For the final stage of development, I will be refining the main structure and outer edges of the GUI. This will mainly include creating JavaScript animations for certain elements of the website to make the GUI more user friendly and pleasing to use.
Test No. Description Type of Test Test Data Expected Result Actual Result
1 Do the lights on the slider bars work? Black Box Click and drag on the slider bars. Their set sections will glow up in colours to match the volume they want to set the track/piece to.
2 Do the lights on the control buttons work? Black Box Click all the buttons separately. The buttons set colour should light up when pressed.
3 Does the animation on the colour on the control buttons work? Black Box Click all the buttons separately. The buttons set colour has an animation.
4 Black Box
5 Black Box