1. Media Dev 2 Wire framing and app digital development By Junaid (u1310202) & Rafi (u1406613)

2. Business requirements  Create an app or a website for the client street market  App should inform the user what items are sold at that market  Have information about the history of that market  Help people know where they can park their cars  Map of the market to aid navigation by visitors.

3. Overview of development process Idea generation –Research –Brainstorms –Sketching –Flow charts Wireframes Prototyping Branding

4. App or website We have decided that in order for our idea to work better, the client needs an app rather than a website. This is so that users can use a mobile device to get the most out of the market experience.  Easy access  Location GPS/compass Portable Camera (scan QR codes) Interact with the environment (Augmented realty = fun)

5. Brainstorm

6. DEVELOP APP IDEA

7. Research competitors Websites: -West Norwood Feast -Video general information -Picture of market -Upcoming events -Borough Market -Traders -What is on -Recipes -Map App: -Toronto food + drink market -Modern Ui -Informs about their stalls -For young adults and upwards

8. App development

10. App development further Purpose: App aimed to engage the youth with their local market & culture in a fun & interactive way Target audience: 6 -12yrs Theme and Aesthetic : -Pirate themed -Bright colours -Cartoonish design style

11. App functionality Objective: Get a Prize by gathering points How to get points: 1) unlock stalls on map by scanning their QR codes 2) Buy items and scan QR code vouchers given 3)Unlock badges by completing challenges Unlocking prize location: unlock all stalls on map

12. Features -Map (GPS) -Compass -QR code scanner -Points -Badges -Prizes -Parking location -Search -Stall description -Market history

13. Moodboard https://uk.pinterest.com/jun950189/treasure-market/

14. Logo development

17. Flow chart

18. Flow chart developed

19. Wireframes 1 (Lucid Chart)

20. Be-spoke and hub  Central index from which users will navigate out.  Navigate between spokes but must return to the hub

21. Wireframe 2 Balsamiq

22. Hierarchy  Standard site structure  Index page  Series of sub pages The Hierarchy structure was chosen because it gave a logical structure to a complex information architecture

23. Prototype https://popapp.in/projects/5639db4630 0d0fe5187837f3/previewhttps://popapp.in/projects/5639db4630 0d0fe5187837f3/preview

24. How was it made Balsamiq: -used iPhone template -used shapes and icons to form objects and navigation -icon sizes were changed for purpose -text used to form content POP: -uploaded images -linked a page to a clickable space -added transitions

25. User testing methods Usability Testing - Focus group : age 6-12 : 10 people questions: -Style? -interactiveness? -Premise? -problems? -liked? With Rapid prototyping Observation of tasks -scan QR Codes -find stall -check stall information -unlock a badge

26. Frameworks Web - faster development -less functionality -easier to use e.g app furnace, app inventor Native - Full access to phone API -Longer development time -most customisable e.g IOS coacoa framework in XCODE(IDE) Hybrid - access to phone API -Reasonable development time -best of both worlds

27. Ionic framework -Hybrid -can be used with a native rapper such as Cordova or Phonegap -Uses HTML, CSS, JS, Angular js Benefits: -Performance (hardware accelerated graphics) -Easy implementation of popular functions -Tabs, pull to refresh, side menus, slide box -MIT licensed (Free commercial use) -Dev Speed

28. Future proofing app Augmented reality -Map can use it to aid navigation -interact with the environment - more immersive experience with VR

29. overview Market app or website Treasure Market: an interactive and fun way that children can enjoy the market experience. Use a Hybrid framework (Ionic) to develop it

30. References -Balsamiq, R. (no date) Effective and fun wireframing software. -Â Balsamiq. Available at: https://balsamiq.com/ (Accessed: 3 November 2015). -Chart, L. (no date) Lucidchart wireframe software. Available at: https://www.lucidchart.com (Accessed: 3 November 2015). -Feast, W. N. (2011) West Norwood feast. Available at: http://westnorwoodfeast.com (Accessed: 3 November 2015). -Inc, A. (no date) ITunes - everything you need to be entertained. Available at: https://itunes.apple.com/ca/app/market/id978724379?mt=8 (Accessed: 4 November 2015) -Market, B. (no date) Borough market. Available at: http://m.boroughmarket.org.uk/ (Accessed: 3 November 2015). -Pinterest (2015) Available at: https://www.pinterest.com/jun950189/treasure- market/?invite_code=5d2c44cf83c854456212f36847c55936 (Accessed: 4 November 2015)