Media Dev 2 Wire framing and app digital development By Junaid (u ) & Rafi (u )

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.

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

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)

Brainstorm

DEVELOP APP IDEA

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

App development

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

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

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

Moodboard

Logo development

Flow chart

Flow chart developed

Wireframes 1 (Lucid Chart)

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

Wireframe 2 Balsamiq

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

Prototype 0d0fe f3/previewhttps://popapp.in/projects/5639db4630 0d0fe f3/preview

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

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

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

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

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

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

References -Balsamiq, R. (no date) Effective and fun wireframing software. -Â Balsamiq. Available at: (Accessed: 3 November 2015). -Chart, L. (no date) Lucidchart wireframe software. Available at: (Accessed: 3 November 2015). -Feast, W. N. (2011) West Norwood feast. Available at: (Accessed: 3 November 2015). -Inc, A. (no date) ITunes - everything you need to be entertained. Available at: (Accessed: 4 November 2015) -Market, B. (no date) Borough market. Available at: (Accessed: 3 November 2015). -Pinterest (2015) Available at: market/?invite_code=5d2c44cf83c f36847c55936 (Accessed: 4 November 2015)