jrDrop
something to consider I would like you to consider this Digital Process Book as not only a booklet of the digital development process, but as a design project within itself. Producing these books allows me to work/learn layouts displayed in a digital sketchbook. The aims of this brief are to learn a new process and explore a new direction that I can lend my graphic design and illustration skills towards - I’m striding towards something risky and challenging!
CONTENTS Initial Ideas/Research
Primary Research
Coming across Tedtalks
1
Three eventful days!
13
User Experience Research
23
National Cirriculum
6
Questionairre No.1
15
Researching for the User
30
Quote by Ken Robinson
6
Research board results
17
Apps on the Market
31
Secondary Research Board
9
Questionairre No.2
19
Prezi
35
Exciting Prospects & Target Users
11
The Problem/Question
21
UI for Children
37
Intentions
22
Interaction Arts
41
Designing the UI
Secondary Research
Instruments
Storyboards
Interface Design
153
13 Instruments
195
Induce Play
269
Intro UI Design
167
All final Instruments
259
Explore
273
Main UI Design
171
Final Three Screens
262
Listen&learn
277
Information Box
265
Developing an Idea
Reflection Point
Thoughts & Ideas scans
51
Considering the outcome
Starting Over
112
61
Scenarios
117
Kathy’s Lecture
62
The Final 3 scenarios
129
Contacting Computer Science
63
Moodboard
135
The 4 possible Directions
65
Branding the App
139
Animation
Reviewing the scenarios
Major Realisation 105
Presentation Board
Summary&Reflection
Testing images in Hype
281
Initial Sketches
327
Reflection
439
Animating on Hype!
289
Secondary Research
331
Job Offering
440
Final Animation stills
318
Continued sketchbook scans
347
A rather biig problem
311
Section 1: USP/Feature
359
Inserting Hype Music
312
Section 2: UI Design
369
Section 3: 3 Directions
383
Section 4: Scenarios
391
The Final Board
419
The Two Final Outcomes
431
In context
433
Advertising the App
437
Coming across a great TEDtalk Ken Robinson: School kills Kids Creativity I’m a huge fan of TEDtalks, I would chose to watch this over any television program in today’s daily outputs on the TV screens, so when I came across Ken Robinsons talk on kids education - an idea came to light. I’ve taken greatly to the mind set of Ken Robinson - “Creativity expert Sir Ken Robinson challenges the way we’re educating our children. He champions a radical rethink of our school systems, to cultivate creativity and acknowledge multiple types of intelligence” (TEDtalks, 2012)
“We've all agreed nonetheless on the really extraordinary capacities that children have, their capacities for innovation" “Every education system on earth has the same hierarchy of subjects: at the top are mathematics and languages, then the humanities, and the bottom are the arts.”
“Creativity now is as important in education as literacy, and we should treat it with the same status.”
“I believe this passionately: that we don’t grow into creativity, we grow out of it. Or rather, we get educated out if it.”
“We are educating people out of their creative capacities.”
1
Mitch Resnick Point: Let's teach Kids to Code After finding Ken Robinsons talk I searched more into this idea of kids education and creativity. This talk by Mitch Resnick grasped my attention not by the overall topic of ‘coding’ but by the quote written beside his video stream. Shown to the right of this paragraph the quote makes you consider the current status of kids creativity. This concept of children enaging and expressing themselves through new technology began to stir some initial thoughts for a possible project. Resnicks talk also involved the engagement of his audience. The screenshot to the right is an example of this; the audience had to shout out random noises in order to make the lines on the screen move - it instantly gave interaction between the design - to its user equalling encouraging interaction
The audience is then automatically involved in the talk - this made the lecture more fun and engaging - by the looks on the peoples faces. Fun and interaction are two inviting words that could possibly lend to my project 2
After discovering Robinson & Resnicks Ideas I thought it would be a good idea to look a little deeper into childrens learning of creative subjects in primary schools, mainly focusing on the United Kingdoms Education Curriculum. I came across a variety of articles
which all state the importance of music to a childs learning and it’s lack of priority in primary schools across the country. Music & Art were mentioned consistently throughout my research.
“The best learning I’ve been involved in has not been “delivered” to a class, but built, over time, in collaboration with students. Explored, examined and argued over.” - The Guardian
I came across a wide selection of issues all relating to childrens creativity. Passionate, educationlists are
striving towards this creative side being pushed more in schools Another interesting point that I’ve high 3
lighted blue is the small print above the “Fostering article” this idea of ‘Educational Apps” Potential idea for this?
Talk of IBM, business and the economy
http://www.youtube.com/watch?v=ywIhJ2goiGE&feature=player_embedded
“If you speak to business leaders, they say they want people who are creative, people who can innovate, think differently, who can work in teams and communicate - all the things that are not now being taught in schools that you now have to submit to these rather standardised programs and policies... There was a book published by IBM which was a survey of 3,000 c.o’s, they were asked what there priorities are as they face the future - what are the things that wake them up at night, and the thing that came out top was creativity - yet schools today are not teaching this” - Sir Ken Robinson 4
At this stage in the project I really began to grasp some peoples passion for childrens learning. Afterall, the kids of today are the future, so we need to educate them well and keep them engaged.
The classrooms of today need more interaction between students, we need to be teaching them about team work, gaining the confidence to ask questions, be involved, play with their imaginations more!
The Slow School concept
What is missing from schools?
“The learners have spaces that support creativity and encourage them to find the tempo giusto; the right tempo for their learning.” An Article by Joe Harrison which talks about childrens creativity from a musicians perspective. His story is this: that he would go into primary schools and teach a 1 hour class to pupils who have no music ability at all, each week. I quote, “Over the course of a year we made some great music and developed some innovative strategies, but one thing always constricted that raw creative development: time.” Surely if we made schools more fun and opened up the create mind, children would feel more enclined to learn/find their joys in education. As they were have a wider array of access to creative subjects? Possibly...
One aspect I have discovered from my research is the absence of ‘music’ in primary schools around England. The statistics below show that music in primary schools may somehow be more associated with girls. I would like to focus on this area and develop my work in a ‘music’ direction. The app could be an infomative piece where children are able to make the music themselves by the icons that they choose from the screen.
‘In many instances there was insufficient emphasis on active music-making or on the use of musical sound as the dominant language of learning.’ - Laura Clark 5
National Curriculum Key Stage 1 Research for music in Primary Schools
“Teaching should ensure that 'listening, and applying knowledge and understanding', are developed through the interrelated skills of 'performing', 'composing' and 'appraising'.” - National Curriculum (2011) Below is a direct screenshot from the National Education Curriculum is the
breadth of study - its states integratation through performance, responding,
working as a team and individually and listening to music from different times
http://www.education.gov.uk/schools/teachingandlearning/curriculum/primary/b00199150/music/ks1 6
and cultures - these will be aspects I’ll keep a look out for in my primary research!
Music is an importa education and dev concentration, aidi exerting a generally on their moods a the moment, acce tuition in primary s of luck, and tha
7
ant part of a child's velopment, helping ing relaxation and y positive influence and emotions. At ess to good music schools is a matter at must change.
8
Secondary Research Presentation Board These could be printed possibly? To understand my research more clearly
Secondary Research
‘Creativity now is as important in education as literacy, and we should treat it with the same status.’
{
The National Cirriculum states a point under the title ‘Breath of Study’ that claims this...
d. a range of live and recorded music from different times and cultures.
Sources of primary research state otherwise to what point (d.) is claiming. 9
Secondary Research
‘We are educating people out of their creative capacities.’ - Sir Ken Robinson ‘Every education system on earth has the same hierarchy of subjects: at the top are mathematics and languages, then the humanities, and the bottom are the arts.’
Could we turn over a fresh page and bring more creativity into the national curriculum?
10
Exciting Prospects After reading into many articles on childrens learning about creative subjects and creativity in primary school classrooms - I latched onto this idea that was highlighted in blue in one of the earlier pages of this process book. The idea of an app for children to express their creativity through music - it’s from this idea, I became very excited by the prospects of what could be a great concept for this project. I decided to go and speak to Matt Fray about borrowing an ipad for a few weeks to gain some primary research from the target audience themselves.
Target Users From research so far, secondary and a-level schools have not been mentioned so much, so at this stage I feel I will stick with the Primary School target users for this particular task - my mind is open to interpretation if the project alters however. Having never used an ipad before I booked a tutorial with Stuart Franey just so he could show me the ropes with downloading free musical apps to test on my target users.
11
above LUSAD departments ipad
12
PRIMARY RESEARCH Three eventful days with a group of 5-7 year olds!
I was really lucky in my primary research as I was able to go back to my old primary school that I worked part-time in during my Duke of Edinburgh Award. I spent Monday 25th, Tue 26th and Wednesday 27th talking, playing and interacting with the children
and telling them about my project. I learned alot from the very first reaction the children had to the musical apps. The functions, features and designs which were preffered were rather ovbious from the excitement
Unfortunately photographs were not allowed to be taken during my visit, so I have no visual evidence Getting to know the children a little more was the first step, I didn’t want the children to feel as though they had to be cautious around me or whilst answering questions - I was given Millie, Olivia, Sophie, Daniel, Oliver and Oscar for the first few days. 13
Downloading musical apps for the research
I downloaded a variety of apps before I took my visit to the primary school. I learnt my way around them incase the children weren’t instantly understood, there was a mixed approach to these apps that I tested with the children in test 1.
Here’s a small step by step guide of my lesson plan for the period I spent with the children. Step 1: Explanation
Step 2: Question time
Step 3: Reactions
Step 4: Analysis
I began the days by explaining the daily tasks and outcome I was aiming at for this project - I said I needed to “pick their brains” on technology for a few days - they seemed to enjoy this idea and everything went very smoothly.
Whilst many of the children seemed absorbed in this idea of an ipad in their school - some weren’t as keen so I took time with these children to find out about music lessons they’d had questions about tuition/ hours taught etc.
As photo’s were not allowed to be taken, understandably, I tried to type down all the reactions after each question/app was played with or responded to, this initial reaction for some apps especially, was very interesting.
Whilst the children had their morning 15minute breaks I took time to reflect on some of the answers to the questions, making sure I didn’t forget anything that was said or mentioned during the lessons.
14
Questionnaire No. 1: Finding the target user Unfortunately I wasn’t able to connect to the internet at the primary school and that’s where I’d made the ‘surveymonkey’ questionnaire. So, I was left in a situation of not being able to put the results in instantly. I had to open up a textedit file
and keep a track of the childrens feedback/results that way so that I could then later (when connected to an internet source) put the results in to the computer. Here’s some of the results from the questionnaire that I typed in later.
the children seemed especially excited about the idea of being outside whilst learning. play + learning = Good!
This was quite an exciting concept as quite a few of the children said there parents had ipads etc, so if they were to make music at school in a lesson then they could show their parents when they get home - homework?
15
HD Recorder Plus App
One aspect I recognised with the children is the constant want of a ‘new’ song - quick & constantly
One part of the app that the children didn’t even recognise was the camera feature, my icons need to be BIG.
The children enjoyed typing there names in to make the app more personal and saying “thats mine, i did that”
Hitting the screen as many times as possible for these yellow triangles to appear was a hit with the kids! As you can tell from the photograph, they liked the idea of visibly having something appear through the touch screen feature.
Aspects to keep in mind: personalised play touchscreen visibility recordable quick & Simple a keeper 16
Being able to record themselves making horrendous noises, then hear it back, got the kids VERY hyper!
Primary Research Results Board 1 ipad. 3 days. 6 target users. 4 musical apps. 6 hyper-active children.
Millie • Olivia • Sophie • Oliver • Daniel • Oscar
Question.
Answer.
Do you learn a variety of cultural music sounds in your music lessons here at school?
not really because the music instruments we have isn’t very many - Daniel
wider array of instruments from a variety of backgrounds
One major factor I learned from my stay with the children was the lack of instruments available for the children to learn from. The lack of cultural variety in the choices of stocked instruments and the non practical aproach to learning -
interactivity in the classroom
wider knowledge of world music and music genres 17
Interview 1: re-written out clearly
Question 1: Do you know different genres of music?
Question 2: Do you learn about other cultures music in the classroom or at school?
Question 3: Have you ever heard of a type of music called jazz music? If so, what instruments are included in this music, do you know?
{
one reply - “my mum and dad watch television instead of the radio or music”
Question 4: Would you learn from relating an instrument to a country or place do you think?
Question 5: How often do you play music on a daily basis? Does anybody really enjoy it and would consider doing it when there in secondary school or going to Ryedale?
{
- One boy spoke at this section quite promptly saying “my mum and dad watch television instead of the radio or music”
Question 6: f you could learn about other cultures music, would you enjoy that?
18
another reply - “I don’t know about other music apart from radio songs that my mum listens to”
Questionairre No. 2: Alternate Target Users
Reflection
}
A lot of the results from this ‘alternate user questionairre’ were more positive than expected. People around
the age of 18-21 do recall having music in primary school somewhere. Whether after school or paid tuition 19
music classes were not frequent nor were they free! which isn’t the greatest start for a childrens education
Reflection
}
I got some really great extra responses fromquestion 2. There is a limited amount of instruments in primary
school lessons. The recorder seemed to come up rather often in the list of ‘instruments available’ to children. 20
Another aspect that was mentioned again was the fact you had to pay for music to be taught in schools?
THE PROBLEM. The problem is too many primary schools are not engaging their children in extra cirriculum activities, traditional methods of learning such as a pencil and paper, theory and no practicallity is for some, not the best way to absorb and learn from your peers and teachers.
QUESTIONS. The questions to consider for this project is - What will the child learn from the app? Does the app offer the child an opportunity to practise a skill needed in school? (consider this later for business too) Does the app motivate a child to transfer that learning into the real world? What conversation and collaboration will the app inspire? These are all questions I need to consider if it is aiming at this target user as they are at an age of continuous learning.
21
{
INTENTIONS. I intend on designing an app which engages children into an active, fun and less traditional stratedgy to learning about music.
}
I’ve discovered that 74% of UK 18-24 year olds do recall having music lessons in primary school, however they had to be paid for for private tuition or they were as I quote “sporadic but not infrequent” 82% said they had access to various instruments such as; triangle, clarinet and the keyboard and were encouraged to learn to play an instrument but were never given a set timetabled hour to engage in the subject. Another aspect which was brought up in my primary research was the fact that all of the musical instruments were still very traditional and their was a lack in variety and culture in the classroom. This could be an area I touch on - world music.
22
SECONDARY RESEARCH
User Experience Research Being new to the whole process of UX Design, I thought the best place to start was at the library, luckily I came across this fantastic book by Rex
Harston and Pardha Pyla. This will be essentially the guide through this project. It is filled with great tips on how to succeed in User Experience Design.
23
above I also did research via the web too, just incase there were extra tips on how to make this project as successful as possible for my user
24
25
left It would be nice if I could have this smooth development through the work - so it would show how it has developed. It could be good for me too as this is new to me and would show I was organised in my developments throughout the process
26
A very helpful wheel of UX
below the most helpful wheel of process I’ve found, this seems to be working a treat, I have it pinned on my bedroom wall so I can keep looking back to it to see if I’m missing any important aspects of the process!
27
Inclusive Design Research In a recent crit with Kathy, she mentioned that I should consider researching into inclusive design for my app, so here are some parts I came across.
28
above considering every person in the process of my work is something I’ve never done so it could be a good start with this brief. I feel the idea I had earlier on in this process about world music would be a good topic to chose as it would be ‘global’, including everybody.
29
Researching for the User With a good foot in the door with primary research and a place to go back to for extensive research throughout this project, I decided to do a little research into more apps that are on the market at the moment - Apps that are aimed at the age of 5-7
years. I’m going to look into interactive designs for children - starting off with a great example of an advert that’s come on the television recently...
COW & GATE CREATIVE NEWS: ‘Feed Their Personalities’ This is a great example of how we need to “Feed their Personalities” at a very young age - it illustrates a group of children being placed in a recording studio for the day and they’re allowed to play around with the music quipment. The advert starts with just clashes and bashings of the instruments, it’s then compiled into a very popular piece of music - it seems to be the perfect advert to illustrate my project and the concept entirely.
30
Apps on the market Whilst living in Hong Kong I became intrigued with interactive art and design. I went to a number of exhibitions in the city that involved projection art and many projects where the engagement of its audience was key.
The app starts you off slowly, with a relatively limited palette of sounds, but the more you create the more elements it offers you element of suprise!
The functions of ‘Scape’ are interesting for its ambience. Its uers aims are to create their own visual and sonic landscape
31
I have a friend who is in the music industry - I just had a thought after reading the article on Brian Eno’s app of how I could as part of my project use my friends music as an example of one of the functions - so I could do an interview with him and he can explain how his style of music is made by collecting sounds - as an example to show the children aswell to see if they like that idea.
32
The Royal London Hospital has a progressive new initiative advocating the healing powers of art and play for children.
Recently, the facility welcomed a new installation called “Woodland Wiggle”. The project is a collab between artist and designer Chris O’Shea, and digital production company, Nexus Interactive Arts. The hospital has already been housing some breakthrough playspaces— including a ‘through the looking glass’ style room where everything is five times a child’s size - Woodland Wiggle is an interactive digital experience you can get lost in.
33
Whilst living in Hong Kong I was also lucky to take a look at PolyU Final Degree Show. The interactive aspects of this show were amazing. I think this is where my love for interactivity in design came from. Every crit I’ve had so far for this project - I’ve
had a tutor who has children and have all told me that the ipad device has great interest to their children and once the children get it, it’s not an easy task getting it back. So this was gret news to me as it’s exactly what I need to hear 34
Prezi | Jo & Frans Crit I came home from a crit which was held with Jo and Fran regarding my app project and I mentioned my concerns on animating the work I had already attempted - not being an animator, or wanting to go into building apps as a living, it made sense for me to stop where I was and really take a look at what role I held in this project, where do I stand? and how do I define this through my process/
outcome? Since doing this I have realised I am the designer of the UI, not the animator or the coder. From here onwards, I feel clearer on this. Another highlight of this critique was Jo’s introduction of Prezi as a presentation platform - she told me if I didn’t want to animate so much, I could present my scenario on this platform so here is my research into Prezi
35
36
UI Design for children
You could use something quite similar to this with the paw slide bar - as an instrument or note that the children can move along the line? Give this a think!
37
38
39
40
Interaction Arts Whilst living in Hong Kong I became intrigued with interactive art and design. I went to a number of exhibitions in Hong Kong that involved projection art and many projects where the engagement of its audience was key. Here is some research in
to interactive works - showing it’s user/audience interacting with the piece itself and the ideas behind getting the audiences attention through the use of digital technologies.
41
42
43
I like this idea of producing a short film which shows the process of work. The idea of having the title, the name of the artists, the year and the Presentation of the work. e.g. INsideOUT (2013) Sarah Burgess. Presented at Loughborough University Degree Show 06/13. This could be a really nice way to wrap up the whole project. Also, this involves filming my way though the project. I could gain knowledge about my new Camera + keep a log. 44
45
I really enjoy the function on this app that you can choose to ‘create’ or just listen to music that is already composed on the app. The function where you can shake the ipad and all the art disappears - Great 46
Some kind of movie from my research sounds exciting - maybe an advertisement.
GENRE OPTIONS
about
I like the flexability of this app, you can chose a genre which is something I found the children didn’t know anything about. The ‘mood’ function may be too much for a child at the age of 5 - 7 years.
interface
mood
shuffle the grid
47
48
Whilst I was in the primary school the one function the children really enjoyed was the way they could record
The image below gave me the idea of possibly having a map in the ipad so when the kids go to collect sounds, they follow a mall route. so it’s not only teaching them about making sounds it teaching them map reading too in the outdoors.
49
the sounds they were making and listen to them back again - my app could have this function and save op.
50
Developing an Idea Thoughts & Idea Sketchbook scans below playing with alternative directions
51
below sketching out ideas in my idea journal please find this alongside the A4 paper process book
52
above original ideas and sketches for the app 53
above original ideas and sketches for the app 54
above for a better look at this work, please refer to the paper process book found in my space 55
above for a better look at this work, please refer to the paper process book found in my space 56
left sketchbook sketches for the app flow, playing with ideas
left questioning every possibility for the flow
57
left trying different compositions
left telling myself it has to engage it’s audience!
58
above small scenario testings for the app
59
top right the first idea, a concept which meant you chose; similar song, different or the same.
60
Developing the Idea So far, I have quite a few directions to take with this project, the ‘similar, different, same’ idea sticks out so far when considering these small ideas. I would like the idea to be simple but unique whilst also being useful and engaging.
Considering the Final Outcome I’ve started to think about how what the final outcome could be for this project - it would be really great to have a functioning app, but it limits me as I have no background in animation or building any kind of apps. There is a the idea of visualising the app too - some kind of presentation board possibly or it could be a film of the children playing on an ipad and I could visualise that digitally. I could even just made the user interface and show that as a final piece - either way I would like to take on a challenge for this brief.
61
Kathys Lecture Kathys lecture came in perfect time for my project. Leaning very much towards User Experience Design this final semester meant having Kathys advice and knowledge was a great thing for me to take in - hence why I’ve let it claim a full page in
my process book, so I can look back to her points to remind myself of what’s needed.
}
“Interactive design and touch screen technology is developing for the next generation” - Kathy
Designing a visual also means?
}
Persuading
Innovating
Provoking
Solving
convince the user
Subvertising
Surface Design
influence peoples beliefs & actions
Offer a different perspective make people see things differently
making an emotional connection
What is the role of the visual communicator?
change their behaviour
Let people experience something different
Branding to what target market?
The Value of Visual Communication? Help solve world problems.
your style needs to be adaptive and versatile enough to lend to the clients
Visualize the concept
62
CONTACTING COMPUTER SCIENCE After having a tutorial and conversation with various tutors and technical tutors I thought it would be a good idea to go with this idea of collaborating with somebody from the design school here at Loughborough or the computer science guys. This
would not only make my outcome more professional but it would also show that I can work with other departments like you would in the industry. And it could lead down the road of a functioning app.
63
64
FOUR POSSIBLE DIRECTIONS I came up with four possible directions to take the app design into. After all the primary/secondary reseach, the questionairres and the visit to teach at the primary school, I knew what my target users needed and these four directions pointed this out
65
above the four pointers written in a sketchbook
66
above initial thoughts and sketches
67
68
above thinking about different techniques to the layout
69
70
71
above two photos taken from a day of working on scenarios
left teting a flowchart of scenarios
72
Musical Instrument Scenario Test
1
above testing the instrument idea
Please find the originals in the print process book. 73
above ‘it has to be simple’
Please find the originals in the print process book. 74
above drawing out ways of presenting certain aspects of the interface
Please find the originals in the print process book. 75
above drawing out different ways of movements in the app
Please find the originals in the print process book. 76
above different, similar, the same
Please find the originals in the print process book. 77
above instrument of the day idea
Please find the originals in the print process book. 78
above using instruments
Please find the originals in the print process book. 79
above sticky note tests
Please find the originals in the print process book. 80
above the branch tree concept, where all instruments are chosen at random
Please find the originals in the print process book. 81
above introducing the play bar
Please find the originals in the print process book. 82
2
Educate and Learn
above sketchbook notes
Please find the originals in the print process book. 83
above rough flowchart
Please find the originals in the print process book. 84
above Globe composition Idea!
Please find the originals in the print process book. 85
left please refer to the paper process book for more information on the idea generation
Please find the originals in the print process book. 86
QUICK TEST Tapping into three directions; place, genre, instrument
above each row is a different test of place, genre and instrument
Please find the originals in the print process book. 87
above considering genre, location & instrument in one
Please find the originals in the print process book. 88
89
above scenario
Please find the originals in the print process book. 90
above checking each option is available for the user to navigate around the app easily
Please find the originals in the print process book. 91
above question yourself constantly!
Please find the originals in the print process book. 92
above sketchbook scan
Please find the originals in the print process book. 93
above sketchbook scan
Please find the originals in the print process book. 94
The Genre
3
above sketchbook scan
Please find the originals in the print process book. 95
above “instruments found in a variety of genres�
Please find the originals in the print process book. 96
above sketchbook scan
Please find the originals in the print process book. 97
above brainstorming the information into buttons
Please find the originals in the print process book. 98
above Important page because it shows a good possible working flow of a scenario
Please find the originals in the print process book. 99
above xplore idea comes into play
Please find the originals in the print process book. 100
above scenario sketchbook test
Please find the originals in the print process book. 101
above genre mixed with instruments
Please find the originals in the print process book. 102
Please find the originals in the print process book. 103
4
Relate with Location (origin)
At this stage in the project I feel like I have a strong Idea with the three options that have previously been worked on - including a number of uitems feels like I am giving my user more of what is needed in the school environment. For this reason, I will not explore the Location (origin) section that I originally set out to do yet I will push foward with the ideas and scenarios that have been explored in previous pages of the print process book, sketchbook and digital process book
104
Reflection Point With such a lenghtly project that I’m not used to, I find it really helps when I go back and relfect on everything from the beginning to check I haven’t missed a gem of an idea, so here is my reflection
above questions
Please find the originals in the print process book. 105
above brainstorm
Please find the originals in the print process book. 106
above scenario test of reflection
Please find the originals in the print process book. 107
above reflecting on work
Please find the originals in the print process book. 108
above reflection
Please find the originals in the print process book. 109
above reflection continued
Please find the originals in the print process book. 110
MAJOR REALISATION POINT
It was time for me to step back from this project at this stage and see where I was with everything - I felt I was working and working on scenarios but it wasn’t aiming towards what I had planned in my head and from my research. I’ve found it really difficult to understand the process behind a user experience brief. I came to realise that I have made the design scenarios too complex. I have been aiming towards an audience too high. From my primary research the one thing I learned was this importance of ‘play’ and how the children in my target user group which I tested and sourced most of my information from needed this element of play By stepping back, it allowed me to move forward.
FIND YOUR ROLE IN THE PROJECT! I had a great crit with Steph this week, as she works in user experience she knew exactly where I was going wrong with this project. It was upsetting to hear but I realised I really needed to start over if I had the intention to follow this project through like I previously had. I needed to find my role in this project. I’m trying to do everything when actually, my strengths lie in graphic design and illustration and so I should be working on elements where these appear - for instance, the user interface design - as soon as these came to light, I felt better and felt ready to move forward and push the project into a better stage with much more outcome lead work
111
Starting Over With a clearhead, here we go again - the idea needs to be simple, it’s aimed towards 5-7 years so it needs an element of play - Go for it. Also I have decided that a section of the work will be animated and I will do a final presentation board as both, were
mentioned earlier in this process book - further information will appear later i nthe book on these two pieces.
above back to the sketchbook for round 2
Please find the originals in the print process book. 112
above initial thumbnails
Please find the originals in the print process book. 113
above initial sketches
Please find the originals in the print process book. 114
above initial sketches
Please find the originals in the print process book. 115
I woud consider this one of the most important pages in this entire book. The reason being this is the idea I went with in a slight panic over time management thankfully, it was rather successful 116
SCENARIO TESTS 2 I feel like this section of the process looks quite bare, but I knew exactly what I was aiming for once I had over come the realisation of aiming towards an audience too high out of my target. Here is the next set of scenarios to help towards a final outcome
above instrument noise relates to the colour on the screen? more visibly obviously which instruments relate to one another?
Please find the originals in the print process book. 117
above scenario test
Please find the originals in the print process book. 118
above pushing the scenario tests further
Please find the originals in the print process book. 119
above considering the user experience by the User interface design and patterns
Please find the originals in the print process book. 120
above written scenario
Please find the originals in the print process book. 121
above drawn UI
Please find the originals in the print process book. 122
above scenario tests
Please find the originals in the print process book. 123
above scenario tests and thinking about a second outcome presentation board?
Please find the originals in the print process book. 124
above please refer to the paper process book for more information on the idea generation here, it’s difficult to tell as the post it notes aren’t tangible
Please find the originals in the print process book. 125
above considering the instruments
Please find the originals in the print process book. 126
above please refer to the paper process book for more information on the idea generation here, it’s difficult to tell as the post it notes aren’t tangible
Please find the originals in the print process book. 127
above the three strong directions to take this project towards
Please find the originals in the print process book. 128
THREE FINAL SCENARIOS I feel like this section of the process looks quite bare, but I knew exactly what I was aiming for once I had over come the realisation of aiming towards an audience too high out of my target. Here is the next set of scenarios to help towards a final outcome
1. INDUCE PLAY.
129
left it is important on this page that you look at the paper process book where you can lift each layer/page for an insight into the scenario
130
2. LISTEN & LEARN
131
left it is important on this page that you look at the paper process book where you can lift each layer/page for an insight into the scenario
132
3. EXPLORE.
133
left it is important on this page that you look at the paper process book where you can lift each layer/page for an insight into the scenario
134
Moodboard 1: UI colour research
135
Final colours for app design
136
LOGO RESEARCH Doing research into logos which had been produced before for apps and iphone features helped me lots considering I have never done a branding project before - or had to brand any work or outcome. It’s rather pleasant to sift through however!
137
I’m rather unsure on how to do a branding for a project - so this research is very helpful, however, I’m not to osure whether the logo should incluse text and image or just an image. I need it to be appealing to children but also professional enough to look contemporary!.
logo and text possibly... 138
BRANDING THE APP After much deliberation about the branding of this project I decided the first aspect I needed was a logo for the project - as all my storyboarding on paper and paper prototypes had a simple made up logo for the mock ups - so it’s best I did this first
Also, as branding was not my main role in this project and was not as important as the UI design, I felt this happened rather quickly and developed into an icon/logo pretty sharpish. Here’s is the developments and a light look at the ideas.
Sketchbook Scans.
above brainstorming
Please find the originals in the print process book. 139
above brainstorming
Please find the originals in the print process book. 140
Sketchbook Scans.
above brainstorming
Please find the originals in the print process book. 141
above brainstorming
Please find the originals in the print process book. 142
Sketchbook Scans.
above small snippets of some logo designs I’ve thought up for the app
Please find the originals in the print process book. 143
above considering my target user group and the logo outcome - it needs to be playful but also neat and readable
Please find the originals in the print process book. 144
Sketchbook Scans.
above sketching out some logo ideas - the face idea was fun to begin with but didn’t work when i considered its feature as a logo
Please find the originals in the print process book. 145
Moving onto Digital
jrDrop
jrDrop
jrDrop
jrDrop
146
jrDrop
jrDrop
jrDrop
jrDrop
jrDrop
jrDrop
jrDrop 147
Final Logo Choices These were the final two decisions for the apps logo. I wanted it to be playful as it is aimed at a younger audience but also look quite contemporary too, hopefully the dark background brings out the colours and slick-ness of the design
1
148
2
above without text
149
3
jrDrop above with text
150
Research into Hype Animating the app idea
After speaking to a few members of staff about animation programmes they informed me abouit one called Hype that is the latest replacement of Flash. I have downloaded the trial and done my research into the programme. Never having done animation digitally before I know this is going to be diffuclt but the programme looks okay so far.
151
152
Designing the User Interface At this stage of the project I realised that to engage the children from the very beginning my app needed a well designed, engaging introduction so they wanted to play and keep playing! This is the hardest part of this project - Keeping the children
Press here
153
Intro to the app:
Designing to Engage!
right I had this idea of how all of the squares can turn as the app opens and the logo is central and stays in the middle. You could then press that logo (press here) and the app will open.. This is just a tester for now but it needs to be engaging and fun to entice the children in to the
above I really liked the idea of the boes turning colours for around 2 second whils tthe app opens... it en154
Choosing complimentary child-like colours from my moodboard On still screenshots it’s really difficult to illustrate how the movements are made in these next few shots, but basically the boxes fold and turn colours
whilst the screen opens! I thought this would be a good way to keep the children watching and wanting more.
1
2
In the first image I feel the red is too striking so I’ve toned it down in colours for this second screenshot. 155
3
I’m tempted to keep it simple and just use two cold and two hot colours throughout the entire app, its a tricky one
156
157
158
jrDr
159
rop
160
161
162
163
Bigger Squares
jrDrop
OR
jrDrop
Smaller Squares
164
jrDrop
above trying the transparency fade for the intro to the app
165
above faded even more? this could be a nice little idea
166
FINAL INTRODUCTION UI DESIGNS After asking people on my SBIllustration facebook page which they considered more playful as I wasn’t able to contact any of my target user - they decided this one - with smaller sqares, so this is what I went with
167
jrDrop
168
Final Storyboard: Introduction to App
169
170
UI Design:
Main Interface This is the section I’m really excited about getting stuck into. I am a little aprehenive considering in my design I will not have a group of children to guide me through what they prefer in terms of the colour scheme and interface - however, from secondary research I feel it is suitable to my user.
jrDrop
171
172
iPad
I thoroughly enjoyed working with the patchworklike background for the opening to the app and so I thought using this with a fade and changing it’s opacity could be an interesting way to keep the colours and design consistent throughout
placing a transparent cover over the pattern design
173
iPad
jrDrop
Whilst playing on Indesign and illustrator a lot more on this project I discovered from my research into childrens Ui designs - the use of this 3D feel. I then became rather addicted to the Bevel funtion on both programs and once talking to the children again, it finalised my decision to use this aspect in my design as the children liked this ‘depth’ in the design of apps
174
left/right testing colours for the background interface
left/right testing colours for the background interface
175
left/right testing colours for the background interface
left/right testing colours for the background interface
176
BUTTON & ICON DESIGNS Here I’ve designed all the buttons and non-active layers for the animated USP. Sticking strictly to the colour scheme and moodboards, I’m hoping my combination of colours will flow fluently throughout my app
go!
back
next
back
next
backward
forward 177
back
next 178
back
next
back
next
179
Final Arrows Design
180
181
exit
exit
exit exit 182
exit
Final Cancel Button
183
Volume Symbols
184
185
186
Final Volume Design
187
Information Bar Battery | Signal
59%
59% 59%
188
Instrument Layouts
189
Sound Vibrations
190
hold&drop Design This is the section I’m really excited about getting stuck into. I am a little aprehenive considering in my design I will not have a group of children to guide me through what they prefer in terms of the colour scheme and interface - however, from secondary research I feel it is suitable to my user.
191
192
193
194
Instrument Research
Researching World Music This project revolves around the concept of a greater variety of music available to young children in primary schools around the country. Great restrictions are held on the amount of musical instruments available and this is my aim, to broaden these options.
Jazz Folk Indie Soul Reggae
A selection of musical genres
Funk
By exploring many of these genres, children will be educated more in a variety of sounds than they are previously and this is a minute selection of genres
Dub Mexican Rock Dancehall Punk Drum n Bass Post Rock Ambient Music Chicago Jazz Chillout Electro-swing Hiphop Jitterbug 195
Alcahuete conga Kakko Tenoroon Bifora Helicon Kazoo Melodica Nadaswaram Sheng ruan
A selection of world instruments
Banjo ukulele Bouzouki
Some of the possibe world instruments I could illustrate for the working functions of the app! It’s been amazing given the chance to explore such a variety of instrument from such a vast variety of cultures.
Dahu Ektara Harp guitar Harpsichord Sanxian Viola Synthesizer Eigenharp Piano Sarangi Shehnai 196
13 instruments and the search begins...
}
I’ve browsed the web and looked through a series of books on world music - all I need to do now is choose 100 instruments and illustrate them for the function of my app. Before I do this though, I need the images and also an idea of whether they will be full colour of blck and white or just two colours
Taiko Japanese Drum Japanese taiko drums, while having antecedents in Chinese and Korean drums, have been developed into a wide range of percussion instruments that are used in both Japanese folk and classical musical traditions
197
One drum is hit by two men - watch this if you have another chance! It’s amazing.
http://www.youtube.com/watch?v=T5rDYAFbJfk
http://www.youtube.com/watch?v=X7T5kFuJ6CM&feature=fvwp
Decisions, decisions... Due to the amount of time this project has already taken because of the unknown I’ve dropped myself in, I
feel it might be a good idea to stick to illustrating in limited colours for each instrument. 198
All drums are used in sync. This gave me the idea of how the ipads could work - one child could be using my app as another one is and they could be making music together with there individual iPads
Test: Placing the Instruments Here I tested the instruments in the main interface before going any further as I need to know whether black and white will work with my UI.
above the Taiko dru m test did not work, it looks completely out of place in this UI. It’s a good job I tested it with instrument number one!
199
above it didn’t work again, I thought I could test it with a thicker point size but now it looks even worse with a heavy line!
200
above Using white line doesn’t seem to work either, it may have to be a full colour job. Or even two colour with every instrument and using line
above Testing the drum on a white background this works better but now it looks unfinished.
201
above its an attempt at using full colour of the real instruments colour scheme - not nice at all I’m now in a slight pickle with colours
above Testing the white background completely and the full colour of all my other moodboards
202
above Testing the drum with a dark blue background taken from the moodboards
203
above Seeing if the other colours will match or whether it will look too dark for a childs fun
204
Research continues Helicon | Brass Family The helicon is a brass musical instrument in the tuba family. Most are Bâ™ basses, but they also commonly exist in Eâ™, F, and tenor sizes, as well as other types to a lesser extent.
205
http://www.youtube.com/watch?NR=1&feature=endscreen&v=jpv8ewT
http://www.youtube.com/watch?v=Cv-9Sq6_pV0
206
The Helicon seems to be an important feature for the brass instruments - this could be fun and give an insight into instruments the children are able to learn themselves
above Testing the helicon instrument in colour and on a blue backrgound
above choosing a simple block colour and text to make the instruments clearer
207
above using the block colour for both of these
below warm colour or cold colour considering
instruments seems to work better, I feel the instruments stand out a lot more like this
the background is blue? Maybe a warm colour for the block could work better
208
Djembe The Djembe is a rope-tuned skin-covered goblet drum played with bare hands, originally from West Africa. According to the Bamana people in Mali, the name of the djembe comes from the saying “Anke djé, anke bé” which translates to “everyone gather together in peace”
209
These guys are called Shoonya and are a band from Bangalore in India, I listened to a lot of there music - it’s beautiful - the Djembe drum is wonderful when played to a high level like this
http://www.youtube.com/watch?v=jqqjc0XrU58
http://www.youtube.com/watch?v=x2x6U91-d7I
210
Melodica The melodica, also known as the pianica, blow-organ or key-flute, is a free-reed instrument similar to the melodion and harmonica. It has a musical keyboard on top, and is played by blowing air through a mouthpiece that fits into a hole in the side of the instrument.
211
http://www.youtube.com/watch?v=VmYeoUQxuJQ
below beautiful french sounds http://www.youtube.com/watch?v=0uasz-b-dFI&feature=endscreen
212
The Harmonica was a lovely instrument to research and get to listen to, this video has a very French feel to it
Nadaswaram The nadaswaram, nagaswaram, nadhaswaram or nathaswaram, is one of the most popular classical musical instruments in the Tamil Nadu and the world’s loudest non-brass acoustic instrument.
213
http://www.youtube.com/watch?v=NMynTCF9v5w
below beautiful oriental sounds http://www.youtube.com/watch?v=0uasz-b-dFI&feature=endscreen
214
In South Indian Hindu culture, the nadaswaram is considered to be very auspicious, and it is a key musical instrument played in almost all Hindu weddings and temples of the South Indian tradition.
Ruan Instrument The ruan (髦ｮ, pinyin: ruﾇ始) is a Chinese plucked string instrument. It is a lute with a fretted neck, a circular body, and four strings. Its four strings were formerly made of silk but since the 20th century they have been made of steel
below They look so similar to a set of faces
215
http://www.youtube.com/watch?v=qNOn1K9x2jU
below beautiful oriental sounds http://www.youtube.com/watch?v=aehEWDNgvXQ
216
This just makes me miss living in China. Beautiful sounds of the Ruan Guitar
Banjolele The banjolele (brand name; sometimes banjo ukulele or banjo uke) is a four-stringed musical instrument with a small banjo-type body and a fretted ukulele neck.
217
Peter Moss seemed to be rather popular on youtube and the guy below seemed like a very interesting character - give them both a listen via the youtube links - the children will love this
http://www.youtube.com/watch?v=CQpuloaJIO0
below so much fun - listen to the youtube link http://www.youtube.com/watch?v=ncJY-RBLyD0
218
Greek Bouzouki The banjolele (brand name; sometimes banjo ukulele or banjo uke) is a four-stringed musical instrument with a small banjo-type body and a fretted ukulele neck.
219
http://www.youtube.com/watch?v=VRlvT1ijsGI
220
Harp Guitar The harp guitar (or “harp-guitar”) is a guitarbased stringed instrument with a history of well over two centuries. While there are several unrelated historical stringed instruments that have referred to as “harp-guitar” over
the centuries, its most common definition is a “guitar, in any of its accepted forms, with any number of additional unstopped strings that can accommodate individual plucking
221
http://www.youtube.com/watch?v=7LsDSgpHANM
http://www.youtube.com/watch?v=ncJY-RBLyD0
222
Harpsichord A harpsichord is a musical instrument played by means of a keyboard. It produces sound by plucking a string when a key is pressed.
223
http://www.youtube.com/watch?v=GMPIMUuE7yI
http://www.youtube.com/watch?v=_mYkWRuA4Ig
224
Viola The viola is a bowed string instrument. It is slightly larger than a violin in size and has a deeper sound. It is the middle voice of the violin family, between the violin and the violoncello (cello).
225
Maurice Ravel’s Bolero is one of the most famous classical pieces of the 19th century.
http://www.youtube.com/watch?v=rOMp6Z9af5E
http://www.youtube.com/watch?v=0Iazrb1l-zE
226
Synthesizer | Electronic A sound synthesizer (often abbreviated as “synthesizer” or “synth”) is an electronic instrument capable of producing a wide range of sounds. Synthesizers may either imitate other instruments (“imita-
227
http://www.youtube.com/watch?v=fLrWoS0JXGs
http://www.youtube.com/watch?v=uvDfHhuFF5w
228
Sarangi The sÄ rangÄŤ is a bowed, short-necked string instrument from South Asia which originated from Gandarbha folk instruments. It is said to most resemble the sound of the human voice – able to imitate vocal ornaments such as gamakas (shakes) and meend (sliding movements).
229
the sounds of India!
http://www.youtube.com/watch?v=SHcg-k0g7Jw
http://www.youtube.com/watch?v=fr8aRTeGIWg&feature=endscreen
230
Illustrating the Instruments Illustrating the instruments is going to be quite difficult I feel, because the instruments need to be clear without being too detailed
Taiko Instrument
231
The Final Taiko Illustration
Taiko
232
Helicon Instrument
233
The Final Helicon Illustration
Helicon
234
Djembe Instrument
Djembe
Djembe Djembe
Djembe 235
The Final Djembe Illustration
Djembe
236
Melodica
1pt thickness
2pt thickness
237
The Final Melodica Instrument
melodica
REALISATION
}
All of the illustrations needed to be these colours and very simple and linear. This is how I carried on through all the instruments - the process is very simple from here on out 238
Nadaswaram
testing alternative compositions
239
The Final Nadaswaram Illustration
Nadaswaram
240
Ruan
241
242
Testing different compositions
these should be even! 243
The Final Ruan Instrument
Ruan
244
Banjolele
Testing the blocks of colour
245
The Final Banjolele Illustration
Banjolele
246
Greek Bouzouki
Testing the blocks of colour
247
The Final Greek Bouzouki Illustration
Greek Bouzouki
248
Harp Guitar
With the string instruments like the guitars it’s really difficult to make them look asthough they fit in a circular composition - I’ve had to turn a lot of them on there side like on the final shown next 249
The Final Harp Guitar Illustration
Harp Guitar
250
Harpsichord
251
The Final Harpsichord Illustration
Harpsichord
252
Viola
253
The Final Viola Illustration
Viola
254
Synthesizer
Line out
phones
keyboard
255
oscillators
control osc.
filter
envelope generators
output
The Final Synthesizer Illustration
Line out
phones
keyboard
oscillators
control osc.
filter
envelope generators
Synthesizer
256
output
ALL FINAL INSTRUMENTS
259
Background colour change over After realising the similarity of the blue from the instrument colour background to the one in the background of the main user interface - I thought testing the background would be a good idea before going any further on to animating!
above I think red contrasts nicely with the blue and still gives it a feeling of ‘youthfulness’ 260
left this is the new final outcome for the background of the UI
261
Final 3 Screens Now that all the instruments are completed, I can place them into sections in the main user interface I have designed - Here is the three pages to swipe through on the design.
above screen number one includes taiko, bouzouki, melodica and the nadaswaram
262
above screen number two includes Djembe, ruan, harp guitar and the helicon
263
above screen number three includes the viola, harpischord, synthesizer and viola
264
Information Box: Testing the layout
265
Information Box Design Final
266
Three Final Scena
[in digita
267
ario Storyboards
al & print]
268
269
270
271
272
273
274
275
276
277
278
279
280
Testing images in Hype | Animation time! I’ve always been the type to enjoy watching animation, but never wanting to be the one making those animations - however for this project animation is a must if I would like my app to be functioning
so I have been testing some illustrations to get the hang of this new program. Hype was recommended to me by the technicians in LUSAD who were 100% certain to swerve me far away from Flash.
281
282
above playing around in the software
283
above seeing how the boxes move as a group this wasn’t successfull
284
above moving layers around to figure out what goes below and above when I’m importing my individual pieces of the user interface
285
above testing timeline movements
286
Organising Layers I need to organise all of the layers in to three sections ready for animating the app. They need to be placed into active, non-active and all instruments as layers
287
288
Animating the App Finally, it’s all coming together
After many hiccups, the app is finally being built in the correct interface screen size and on a software platform that I have almost got a little to hand with. I foolishly set the screen size for all my designs and animation on my first attempt to the size of a widesceeen laptop so that when it was time to
export it on to an ipad, it wouldn’t of worked and been enormous. So, here I am again - giving it a second go and recording each move I make through this process book. You just never know what may happen and you know what they say “it comes in threes”
above each small button or moving piece had to go through this process of being placed in web format
289
above the duplicate scene button was really helpful on this program! I could just duplicate each background layer
290
above Organising and preparing the introduction screen to the app
below where I went terribly wrong before!
291
292
above each small square that I wanted to move in a turn would have to be taken through the web process of getting them all the correct sizes for animating
293
294
295
full page development of the animation process
296
297
298
Placing Instruments
299
300
301
302
below previewing the animation in live HTML
303
304
305
306
307
dropping in media
308
309
310
A rather big problem In a most recent tutorial with Ben we were working on the music being dropped into my app - but unfortunatly the software they suggested - this is possible but the way I’d like to work my animation it would require somebody to code as it requires Javascript. So, at this stage in the project I am unable to produce an exact resembelance of what I had imagined, however the music I have placed in is tailored to how I imagined it and how I wanted it to sound, however, the movements and functions are not. In this case I will show in a presentation board flormat the flow of instruments and its functions. First though, here’s a small view of the animartion in HTML from stills.
Exporting I’m still going to export the animation I have worked on onto an iPad. Even though to some this might not look like much, to me it means a lot because I have learned so much for moving out of my comfort zone in illustration briefs. I feel I have achieved some new and reached a new level of ability in my work.
311
App Music Although my app can’t be designed pricesly how I’d liked and how would of been more of an experience for my target user - the music in the app is a very important section and as the app will still be seen on an iPad - I will add music still.
312
Converting in Gb.
313
altering the levels of sound in garageband
314
Instrument Sounds
315
Djembe sounds
Banjo sounds
316
the main source of the instrument sounds were from last.fm radios free podcasts and downloads. Its a great site because there’s instruments I have used which are not popular, yet a lot could be found here - it’s full of cultural differences in sound 317
Final Animation (still shots)
318
above Start Up
319
above Introduction to jrDrop
320
above Enter the main User Interface
321
above press an instrument and it lights up automatically
322
above play a little, tap another instrument
323
above a new flash of colour, go to the next page possibly?
324
above next page of instruments to explore
325
above pressing more instruments for sound
326
Designing the Presentation The initial Sketches
above Im giving myself enough room to make a long presentation board
327
328
above thinking about which sections are important for being displayed to my audience
329
330
Presentation Board Research
CLARITY HERE IS GOOD!
I would like my visualizations to be rather realistic/professional. Using possibly an even further limited colour scheme of two colours for the final board. I really love the raised effect and might take this idea into my own work
331
The reason so much research is going into the presentation board is because this is a final outcome for this project. The visualisation board, should I call it, will be a final outcome next to the final short clip of animated outcome. I’ve found Pinterest very useful for looking at app presentation boards that have been produced before in a clean and inviting style
332
below highlighting specific sections of the app to make them emphasised is a nice idea, I like it
below add this app icon at the bottom of the presentation board - it’s all part of visualising!
333
below This presentation board feels rather like a branding project but I like the fluency of colour throughout
334
above had the idea of placing all the instruments in this composition - shows the amount you can explore in my app
below I could do this for the three options - play - learn & listen and explore!
left again, enjoying the idea of layering up each part of the scnario so it’s realistic
335
336
337
338
339
340
below this could come in handy as a design composition - explore, play and learn.
341
342
343
left considering this project was a self initiated brief, treating it as a brief in the final outcome could be quite interesting - it would give the viewer/ asessor an idea of its intentions from the word go - or should it be more visual considering it is a visualisation of the final outcome - give this some thought!
344
345
left they’ve put here about 3 versions. Put in yours about three different directions
346
Sketchbook Development Continued...
above considering the boards measurements - I’m scared to design the board too long in length, but all my research it seems the best way to display such an outcome - so I’m going for it and if the boards need breaking down I can break down each important section that I’ve designed
347
above sketchbook scan
348
349
350
351
352
353
354
above considering the three directions board
355
356
Final structure Guideline Follow this!
357
358
Digital Developments Slogan ideas
359
360
361
362
Writing the concept/brief | The Concept | jrDrop is a portable (landscape layout) iPad App that will be placed in Primary School classrooms across the UK. It’s aim is to enable children to learn a wider variety of world music instead of what might only be available in the school cupboard - it opens up a global sound experience.
Casually browsing the Tedtalk lectures one day - a talk titled Do Schools Kill Creativity? by Sir Ken Robinson caught my attention. It made me consider the lack of music lessons there were whilst I was in Primary school. From here onwards, the idea of jrDrop snowballed into a self - initiated project.
OR jrDrop is a portable (landscape layout) iPad App that will be placed in Primary School classrooms across the UK. It’s aim is to give children a wider range of global music to learn, play and explore - whilst still keeping that element of fun in the classroom during music lessons. OR jrDrop placed to give explore
is a portable (landscape layout) iPad App that will be in Primary School classrooms across the UK. It’s aim is children a wider range of global music to learn, play and - whilst still attaining a element of fun into music lessons
363
364
365
366
left digital brief and concept test
left digital brief and concept test
367
left digital brief and concept test
left digital brief and concept test
368
Section 1:
Unique Selling Point/feature My main focus was the wide range of instruments available to children for in the school classoom. This is why it has taken place on the presentation board.
369
Final iPad illustration
370
371
372
373
374
375
376
377
378
Playing with distort
379
380
Info or no info
Africa Greece China
France
381
382
Section 2: UI Design
This certainly needs to have presence on the final board as it was an important part of the user experience. This section was easier because all the UI has been done already!
383
384
below no line or line
385
386
387
388
389
Final UI Design Board [+ zoom section]
390
Section 3: 3 Directions
The main focus of this entire project is the three directions it has been taken in for the use of the target user - this parts important!
391
392
393
394
395
396
397
398
Write ups Explaining explore, listen&learn and Play!
three directions. jrDrop takes three directions in enabling the user gets the most from there app experience. jrDrop is able to fulfill that gap where primary school equipment doesn’t fill. Built around the knowledge that primary schools lack musical equipment that these directions can fulfill. The design focus was to produce an effective navigation system, with organised labelling of instruments and a simple user interface to follow - making it easy and fun for users to find desired information and sounds. The design focus was to produce an effective navagation system The design focus was to produce an effective navigation system, with organised labelling of instruments and a simple user interface to follow - making it easy and fun for users to find desired information and sounds.
three directions. All three of these directions hold validity. With school cupboards lacking variety (sourced from first hand research) jrDrop brings a number of ways to discover a new
399
Final 3 write ups Explaining explore, listen&learn and Play!
400
401
Explore to engage the user from the off - the start
Listen&learn to engage the user from the off - the start up is an animation of
Play to engage the user from the off - the start up is an animation of turning boxes of colour
402
Explore
403
Listen&learn
Play
to engage the user from the off - the start up is an animation of
to engage the user from the off - the start up is an animation of
to engage the user from the off - the start up is an animation of turning boxes of colour
404
The Final
3 Directions Board
405
406
Section 4:
Scenario Section As the animation didn’t get completed to the level that was expected - I feel a scenario should be present on the board to show flow.
Firstly I tried testing the layout with the same interface just duplicated to give myself an idea
407
408
409
410
START UP
jrDrop
411
HOM
ME
CHOOSE
412
Final Scenario
413
414
Testing Layouts I’m going to just play around with the layouts a little to see if there is a better way to put this board together - it’s just a case of moving the four individual sections around
415
416
Final 4 Layout choices
417
418
The Final Board a closer look...
jrDrop
‘a pocket full of
| The Co Casually browsing the Tedtalk lectures one day - a talk titled Do Schools Kill Creativity? by Sir Ken Robinson caught my attention. It made
419
p App
f world music’
oncept | jrDrop is a portable (landscape layout) iPad App that will be placed in Primary School classrooms across the UK. It’s aim is to enable
420
Features
Africa Greece China
Fran
421
one. simple. click.
nce
Features. All three directions express the apps original concept - let children explore a wider range of global music and sounds.
422
Directions
Three directions. All three of these directions hold validity. With school cupboards lacking variety (sourced from first hand research) jrDrop brings a number of ways to discover a new sound or piece of music
423
Explore. Explore the music of Africa, Jamaica, Mexico and lots more from a simple tap of your finger.
Listen&learn. Absorb the small insightful snippets of information
Play. Click, press or hold and watch the screen light up with bright colours and a exciting choice of music
424
UI Board
UI Design. The design focus was to produce an effective navigation system, with organized labelling of instruments and a simple UI to follow - making it easy and fun for users to find desired sounds and music.
exit the app more pages with different instruments
press an instrument for the music to play
the main sound board - hold your finger down and the music will drop here
425
next button - more pages with different instruments
alter volume
426
split scenario board
Scenario. A short example scenario illustrating jrDrops flow
HOME You arrive at the home screen very quickly and the UI is designed in a clean, simple layout for any child of 5-7 to make there way around
427
2
START UP
1
to engage the user from the off - the start up is an animation of turning boxes of colour
2
428
split scenario board
PLAY There’s is plenty to play with on jrDrop - in this scenario you arrived at the main sound board quite quickly - tap around more next time!
GET THE APP jrDrop is now available for iOS 429
4
3 CHOOSE You have many choices at this stage you could go and explore, tap away at random instruments or hold your finger down to hear the music play on
430
Overall Finals: The two outcomes
From this whole project, there has been two major pieces as outcomes - the first is the animation and the second is the visualisation presentation board - here is a shot from both
431
432
In context
itunes App Store
jrDrop
jrDrop
jrDrop jrDrop Music & Education ÂŁ1.99
jrDrop 433
jrDrop jrDrop Music & Education
£1.99
jrDrop Music & Education jrDrop
£1.99
jrDrop Music & Education
£1.99
434
In context
itunes App Store
435
436
Advertising the app
437
438
Summary & Reflection Managing the Project
Highlights.
I would like to admit the naievty of time management on this brief - this project was around 8 weeks long, it was difficult to manage in comparison to my usual 2-3 week briefs, having no solid outcome after 5 weeks was difficult to handle. However, keeping in the flow of the project was rather easy as there were so much new exciting aspects I had never come across before and it reminded me of why I chose to do such a ‘out of the comfort zone’ type of brief - because it means I get to learn something new every week. Time management wise I did slip, but I am happy with the outcome and effort I put in to this project considering my lack of knowledge on it’s process, outcomes and animation knowledge.
The greatest highlight to this whole project is the amount I have learned along the way. I have learnt a whole animation program, explored first hand user experience interviews with a group of children, built 3D illustrations on illustrator, created maybe too many distort drawings on photoshop and got to learn a lot of tutorials with the Loughborough technicians, who I could not of done this project without. It has been one enormous learning curve and I’ve enjoyed every second.
Failures.
What would you change next time?
There was many failures to this project, I feel like I couldn’t list all of them here! However, each failure I managed to turn around into something new - for example the animation - I still added the music and it still flows so why throw it away? There were also failures regarding the very first developments of the scenarios - aiming to an audience too high and not seeing it critical enough maybe? Either way, whether it’s a failure or a success, with such a challenging project, I am pleased I managed to turn it around and produce one short functioning animation and a pres board
Well... where do I begin? Haha, the one major change would be my hunt for a coder - I would search that computer science block until somebody said yes! If this didn’t work - I would not attempt to start animating a project which is out of my capabilities. I would strictly stick to a strong imaginative visualisation board and focus my project towards the user interface - that way I would be sticking to my strengths and keeping my weaknesses hidden.
439
Job Offering This was the very last thing I expected from doing this brief - however, we are now in conversation over a possible live brief project. Exciting!
440
•
Thank you for taking the time to look thorugh my digital process
•