1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2376],{17483:function(e,t,o){"use strict";o.r(t);var s,r=o(92777),i=o(82262),n=o(45959),a=o(63553),c=o(37247),d=o(59499),g=o(67294),l=o(12511),p=o(47228),m=o(90798),h=(o(84941),o(80550)),u=o(65269),f=o(86074),j=o(85893);function x(e){var t=function(){if("undefined"===typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"===typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var o,s=(0,c.Z)(e);if(t){var r=(0,c.Z)(this).constructor;o=Reflect.construct(s,arguments,r)}else o=s.apply(this,arguments);return(0,a.Z)(this,o)}}var w=(s=function(e){(0,n.Z)(o,e);var t=x(o);function o(){return(0,r.Z)(this,o),t.apply(this,arguments)}return(0,i.Z)(o,[{key:"componentDidMount",value:function(){API.trackPage(Constants.pages.projectDetonator)}},{key:"render",value:function(){return(0,j.jsxs)(g.Fragment,{children:[(0,j.jsxs)(l.Z,{title:Constants.titles.detonator,canonical:"projects/detonator",children:[(0,j.jsx)(p.Z,{clientImage:"/images/projects/detonator/detonator-wordmark.png",projectTitle:"Re-introducing reading to a disengaged young audience",projectType:"Mobile App",ProjectServiceListItem:(0,j.jsxs)(g.Fragment,{children:[(0,j.jsx)(m.Ts,{listItemText:"UX design,"}),(0,j.jsx)(m.Ts,{listItemText:"UI design,"}),(0,j.jsx)(m.Ts,{listItemText:"Interaction Design,"}),(0,j.jsx)(m.Ts,{listItemText:"Product Management"})]}),className:"hero--detonator",projectImage:"/images/projects/detonator/1.png",srcSet:"/images/projects/detonator/1.png 1x, /images/projects/detonator/[email protected] 2x"}),(0,j.jsx)("div",{className:"container",children:(0,j.jsx)(h.Ru,{className:"sectionOneAnimation",subTitle:"Overview",description:"Detonator is a brave new concept to re-introduce reading to a disengaged young audience. \n\nThe Detonator interactive reader customises the reading experience based on what is being read and the current narrative. Short punchy stories, broken into easy to read chunks with atmospheric background noises, and sticky gamification make reading a far more immersive experience. Detonator users are incentivised to read more by a ranking system and earn rewards which can be equipped to personalise their profile. \n\nDetonator content is exclusive to the platform and is released periodically to subscribed users.\n"})}),(0,j.jsx)(ProjectFullImageSection,{imageUrl:"/images/projects/detonator/2.png",srcSet:"/images/projects/detonator/2.png 1x, /images/projects/detonator/[email protected] 2x",imageAltText:"Dashboard UI"}),(0,j.jsxs)("div",{className:"container",children:[(0,j.jsx)(h.ZP,{subTitle:"Challenge",imageOne:"/images/projects/detonator/Kick-Ass-Books-Presentation-2.jpg",srcSetImageOne:"/images/projects/detonator/Kick-Ass-Books-Presentation-2.jpg 1x, /images/projects/detonator/Kick-Ass-Books-Presentation-2.jpg 2x",description:"\nThe Detonator philosophy is to get kids reading again. The reading industry thinks they\u2019ve lost 10-15 year olds to gaming and Tik Tok, so Detonator wanted to capitalise on this gap in the market to produce books and content for kids in that age group which would make reading feel as exciting as playing Fortnite."}),(0,j.jsx)(h.ZP,{title:"Design Discovery",className:"flex-row-reverse",subTitle:"Solution",imageOne:"/images/projects/detonator/Detonator-IA.png",srcSetImageOne:"/images/projects/detonator/Detonator-IA.png 1x, /images/projects/detonator/[email protected] 2x",description:"Over the period of 10 weeks we distilled the project goals, stakeholders, brand requirements and features for the detonator application into a comprehensive list of stories for the MVP.\n\nWe started with a discovery session to gather information about the structure of the business and a blueprint for the product we\u2019re hoping to build. This allowed us to gain a greater understanding of the project goals and proposition values for our team."}),(0,j.jsx)(ProjectFullImageSection,{imageUrl:"/images/projects/detonator/User-Interview.png",srcSet:"/images/projects/detonator/User-Interview.png 1x, /images/projects/detonator/[email protected] 2x",imageAltText:"User Persona",title:"User Research Synthesis"}),(0,j.jsx)(ProjectFullImageSection,{imageUrl:"/images/projects/detonator/Persona.png",srcSet:"/images/projects/detonator/Persona.png 1x, /images/projects/detonator/[email protected] 2x",imageAltText:"User Persona",title:"User Persona Creation"}),(0,j.jsx)(h.ZP,{title:"Designing the workflows",subTitle:"Solution",imageOne:"/images/projects/detonator/Wireframes.png",srcSetImageOne:"/images/projects/detonator/Wireframes.png 1x, /images/projects/detonator/[email protected] 2x",description:"We wireframed the entire application creating a clickable prototype of each page and user flow.",ProjectServiceListItem:(0,j.jsxs)(g.Fragment,{children:[(0,j.jsx)(m.Z_,{listItemText:"UX Analysis"}),(0,j.jsx)(m.Z_,{listItemText:"Information Architecture"}),(0,j.jsx)(m.Z_,{listItemText:"Wireframing"}),(0,j.jsx)(m.Z_,{listItemText:"Low Fidelity Prototype"})]})}),(0,j.jsx)("div",{className:"col-md-12 text-center",children:(0,j.jsx)("iframe",{width:"100%",height:"650",src:"https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FdMgEG7DS6lG8lwYHhYF2u1%2FDetonator---Wireframes-v1%3Fpage-id%3D71%253A29622%26node-id%3D71%253A29624%26viewport%3D367%252C457%252C0.14%26scaling%3Dscale-down%26starting-point-node-id%3D71%253A29624%26show-proto-sidebar%3D1",allowFullScreen:!0})}),(0,j.jsx)(h.ZP,{title:"High Fidelity Design",className:"flex-row-reverse",subTitle:"Solution",imageOne:"/images/projects/detonator/UI-Sketch.png",srcSetImageOne:"/images/projects/detonator/UI-Sketch.png, /images/projects/detonator/[email protected] 2x",description:"In order for the app to compete with other screen based distractions, Detonator wanted the UI to feel more like a videogame than a traditional e-reader. \n\nWe took inspiration from video game interfaces to produce an eye catching UI, with high fidelity animations and transitions to add character to the workflows.",ProjectServiceListItem:(0,j.jsxs)(g.Fragment,{children:[(0,j.jsx)(m.Z_,{listItemText:"UI Design"}),(0,j.jsx)(m.Z_,{listItemText:"Design System"}),(0,j.jsx)(m.Z_,{listItemText:"Interaction Design"}),(0,j.jsx)(m.Z_,{listItemText:"High Fidelity Prototype"})]})})]}),(0,j.jsxs)("div",{className:"container",children:[(0,j.jsx)(ProjectFullImageSection,{description:"Once we were happy with our design direction, we started assembling a design system that we would use to build out the reader workflow and act as a base for the project UI going forward.",imageUrl:"/images/projects/detonator/UI Design Iteration.png",srcSet:"/images/projects/detonator/UI Design Iteration.png 1x, /images/projects/detonator/UI Design [email protected] 2x",imageAltText:"Design System",title:"UI Design Iterations"}),(0,j.jsx)(ProjectFullImageSection,{imageUrl:"/images/projects/detonator/3.png",srcSet:"/images/projects/detonator/3.png 1x, /images/projects/detonator/[email protected] 2x",imageAltText:"Design System"}),(0,j.jsx)(ProjectFullImageSection,{description:"Once we were happy with our design direction, we started assembling a design system that we would use to build out the reader workflow and act as a base for the project UI going forward.",imageUrl:"/images/projects/detonator/Buttons.png",srcSet:"/images/projects/detonator/Buttons.png 1x, /images/projects/detonator/[email protected] 2x",imageAltText:"Design System",title:"Design System"})]}),(0,j.jsxs)("div",{className:"container",children:[(0,j.jsx)(h.Ue,{autoPlay:!1,controls:!0,muted:!1,className:"mb-5",title:"High Fidelity Reader Workflow",videoLink:"/images/projects/detonator/Noodle-Fuel-Demo-Audio-Balanced.mp4"}),(0,j.jsx)(ProjectPrototypeSection,{title:"Clickable Prototype",prototypeLink:"https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2F4ME4iMsJ2AmTKE7dm5HJC8%2FDetonator---UI-Design%3Fpage-id%3D428%253A5672%26node
1-id%3D472%253A9284%26viewport%3D286%252C48%252C1%26scaling%3Dscale-down%26starting-point-node-id%3D472%253A9284"}),(0,j.jsx)(h.ZP,{title:"Usabilty Testing",className:"flex-row-reverse",subTitle:"Solution",imageOne:"/images/projects/detonator/User-Test.png",srcSetImageOne:"/images/projects/detonator/User-Test.png, /images/projects/detonator/[email protected] 2x",description:"We tested the prototype via a series of unmoderated usability tests and user interviews. We found that all users completed the goal we\u2019d set for them and provided positive feedback with regards to the design of the app. Using these insights helped us to further refine our high fidelity prototype that Detonator could show to prospective investors."}),(0,j.jsx)(h.Ru,{className:"sectionOneAnimation",subTitle:"Highlights",description:"As part of the discovery phase, we wireframed the entire application, creating a clickable prototype of each page and user flow and delivered a high fidelity prototype that demonstrated the core workflow of the reader journey for the mobile application to allow prospective investors and other interested parties to get a real feel for how the application looks, feels and sounds. We also provided a detailed breakdown of the stories and cost estimates for the initial phase of the application. \n\nThe founders are currently using our outputs from the discovery phase to seek funding to develop an MVP of the detonator mobile application."})]}),(0,j.jsx)(f.Z,{})]}),(0,j.jsx)(u.Z,{})]})}}]),o}(g.Component),(0,d.Z)(s,"displayName","TheComponent"),s);t.default=w},14562:function(e,t,o){(window.__NEXT_P=window.__NEXT_P||[]).push(["/projects/detonator",function(){return o(17483)}])}},function(e){e.O(0,[4885,1664,1616,6568,5269,7035,2049,538,9774,2888,179],(function(){return t=14562,e(e.s=t);var t}));var t=e.O();_N_E=t}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.