1. - Billy Van-der-have - Hilton Alessi - Ummad Ahmed

2. Intro  Our app is called “Karate Kicks”, its based on Jackie Chan. We created this app to have a laugh, there is no serious or technical element to it as it is simply a sound board of Jackie Chan's quotes and some martial arts sound effect, but it does also hold a bio about his early days with a link to a website which gives more detail.

3. Roles/ Responsibilities Main Responsibilities - Ummad - design/wireframes -Billy - figured out Appfurnace -Hilton- figured out the functions and code Joint responsibilities  Final design  Designing Assets  Research  Final layout  Colours

4. Inspiration/ Influences  Launch Pad (Apps)  Soundboards (Apps) – DJ Mixer  Celebrity apps - Hero Face Changer - Gangnam Style yourself  YouTube vids – beat board vids https://www.youtube.com/watch?v=3vC5TsSyNjU https://www.youtube.com/watch?v=3vC5TsSyNjU  movies- Rush Hour  Common interest  Fighting games – Tekken  Younger experiences (mimicking sounds)  Icon Archive – to create assets

5. ICON Archive

6. Intended Audience  14+  Martial arts enthusiasts  Jackie Chan lovers  People looking for a laugh (humor)  Nostalgia (Rush hour Quotes)

7. Form There are similar apps to the one we created but there were no Karate sound boards available. Some apps do have sounds according to who its about.  There are music apps which hold a similar layout to our app when it comes to the design of our sound page.  However these other apps don’t really tells us about the person, so we added a biography page to tell the user more about the person.

8. Style  We were using a cartoon / animated style for the assets and overall look of the app.  Used a lot of gradients to add depth to each element.  Silhouettes to create simple buttons  Easy and intuitive layout  Warm bright Colours / bold borders.

9. App Techniques  There are buttons linking the pages together  The audio is linked to the buttons, once pressed, they play sounds.  We have a pop-up which opens which provides an option to remove ads.  There is a scrolling section in the bio page.

10. Research / Ideas  Mind maps – initial ideas  Flow Chart – shows how pages are linked  Wire frame Paper and Digital - Designs  Wire Frame processes -

11. Mind Maps

12. Flow Chart (Paper) This flowcharts simply shows how all the pages will be connected.

13. Flow Chart (Digital)

14. Wire Frames (Paper) & Initial Sketches we started by creating rough sketches of each of the pages which we would later develop.

17. We chose a few of the good ideas/ designs and created neat versions just to better represent want they would look like.

18. Wire Frame Process

19. Wire Frames (Digital) We made these wireframes in Lucid Chart

20. Wire Frames (Digital)

21. Concepts / Themes  Having a digital version of a physical Launch Pad.  Being Able to Record and Share sounds. But we scrapped the record page as figuring out the code for the recording device was troublesome and we couldn’t work it out in time.  The logo has traditional style to it as the app is about martial arts. Made to look like an opened scroll.

22. Production of App  Assets  Adding sounds  CODE  Appfurnace (Final)

23. Asset Sketches Before we could actually use appfurnace to create the app we had to design our assets, which we would be using as the buttons and banners.

24. 11/6/2015Footer Text

25. Adding Sounds Adding sounds was particularly tricky as at first we couldn’t find the right code to link the sound to the buttons. We had to try a lot of code which we found on different forums to get the buttons to play the sounds but majority would not work for us. - But once we found the right code it was pretty simple as we first had to download the sounds from http://soundbible.com/tags-martial- arts.html,http://soundbible.com/tags-martial- arts.html -Then we uploaded them to our library in appfurnace. -Named all the buttons and sounds. -Then used the code to link them together but changing the source name and the button name each time.

26. Code Sound Name Button Name Code for links Code for Sounds

27. Code If we had more time we were thinking about adding a tweet button / widget which allows us to share information about our app on twitter in a personalized way. However we didn't’t want to limit our self with just linking this was to Twitter but also the other social media platforms which we have links to in out app.

28. Appfurnace Final

29. SHARE/BIO

30. QUOTES/SOUNDS

31. Project Evaluation How can we improve Within time constraint, make do-able designs – previous or initial ideas we first worked off of were difficult to do within the time we had to do it.  In appfurnace change restraints for different phones – there was a small gap at the bottom of app when you view on your phone but when working online there is no gap.  Create assets in the sizes they are going to be used.  Use smaller canvases which would speed up the loading time

32. References  Rebi. (2014). Beat Maker (Version 1.9) [Mobile Application Software]. Retrieved from https://play.google.comhttps://play.google.com  Widebeam Digital. (2012). Keith Lemons Mouthboard (Version 1.3) [Mobile Application Software]. Retrieved from https://play.google.comhttps://play.google.com  M4sonic. (2012). M4SONIC – Weapon (Live Launchpad Mashup). Available: https://www.youtube.com/watch?v=3vC5TsSyNjU. Last accessed 17 th November 2014 https://www.youtube.com/watch?v=3vC5TsSyNjU  Music Paradise. (2014). DJ Mix Maker (Version 117.5.15.7) [Mobile Application Software]. Retrieved from https://play.google.comhttps://play.google.com 11/6/2015Footer Text