[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-adidas-video-hacking-here-to-create-en":3},{"post":4,"parsedBody":17},{"slug":5,"locale":6,"otherLocales":7,"title":10,"description":11,"body":12,"cover_image":13,"cover_alt":14,"published_at":15,"updated_at":16},"adidas-video-hacking-here-to-create","en",[8],{"locale":9,"slug":5},"it","Adidas Video Hacking","Adidas Video Hacking - Installation and web project for Adidas®. Thesis of my training program in Web Design at IED Firenze.","## The thesis project\r\n\r\n**IED Firenze** usually invites its students to carry out a thesis project in collaboration with companies that turn to the institute in search of ideas to enrich and innovate their communication or the design of their services and spaces.\r\n\r\nFor our **PTP training program in Web Design**, the 2018 proposal came from **Adidas**.\r\n\r\n## Adidas: Here to Create\r\n\r\nIn an introductory brief (via videoconference from Nuremberg), some of the Adidas marketing managers summarized the characteristics of the **target audience**, the **storytelling** behind the current campaigns, the **activities** undertaken so far, and the main **objectives** of the upcoming communication initiatives.\r\n\r\n::gallery\r\n---\r\nitems:\r\n  - url: \"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-tavola-2.webp\"\r\n    description: \"Adidas Video Hacking - Presentation sample 1\"\r\n    width: 1920\r\n    height: 1082\r\n  - url: \"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-tavola-3.webp\"\r\n    description: \"Adidas Video Hacking - Presentation sample 2\"\r\n    width: 1920\r\n    height: 1082\r\n  - url: \"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-tavola-4.webp\"\r\n    description: \"Adidas Video Hacking - Presentation sample 3\"\r\n    width: 1920\r\n    height: 1082\r\n---\r\n::\r\n\r\nWe students were given the task of developing an innovative proposal that could be integrated into their strategy.\r\n\r\n## Call the Creators\r\n\r\nAdidas communication campaigns target ***Creators***: young people of the so-called ***Generation Z*** who want to express themselves, participate, modify, and create their own uniqueness.\r\n\r\nTheir first goal is to **engage**, offering an entertainment or shopping **experience** that strengthens the sense of belonging to the **Adidas community**.\r\n\r\n::gallery\r\n---\r\nitems:\r\n  - url: \"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-moodboard-creators.webp\"\r\n    description: \"Adidas Video Hacking - Creators moodboard\"\r\n    width: 2048\r\n    height: 1448\r\n  - url: \"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-moodboard-graffiti.webp\"\r\n    description: \"Adidas Video Hacking - Graffiti moodboard\"\r\n    width: 1024\r\n    height: 768\r\n---\r\n::\r\n\r\nThey are also looking for proposals aimed at **reducing the gap between the experience in the physical store and online communication**, also as a counterweight to the dominance of Amazon's anonymous, all-encompassing shopping.\r\n\r\nTogether with my teammates ([Lorenzo Cini](https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Florenzo-cini-668545309), [Davide De Bartolomeo](https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fdavide-de-bartolomeo-b3a684139) and [Michele Martelli](https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fmichelemartelli)), after a phase of analysis, brainstorming and research, we decided to go for an unusual project…\r\n\r\n## Adidas Video Hacking\r\n\r\nWe found our main inspiration in a web project: [The Johnny Cash Project](https:\u002F\u002Fwww.radicalmedia.com\u002Fwork\u002Fthe-johnny-cash-project\u002F).\r\nIn this online portal (now replaced by a case study, since the initiative has ended), visitors could **customize individual frames** of the video of *Ain't No Grave* by Johnny Cash, redrawing them and creating a **collective work in constant motion**.\r\n\r\n::embedded-video\r\n---\r\nsrc: \"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fjohnny-cash-project.mp4\"\r\nposter: \"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fjohnny-cash-project-cover.webp\"\r\ncaption: \"Excerpt from “The Johnny Cash Project”, all rights belong to the project owners.\"\r\n---\r\n::\r\n\r\nThis idea of providing a tool and letting the public express themselves by modifying existing media seemed to us in line with the concepts of **hacking** and **creation** promoted by Adidas.\r\n\r\nWe wanted Adidas, which had already experimented with product customization, to offer a **hacking experience for a brand communication video**, integrated with social networks.\r\n\r\n::gallery\r\n---\r\nitems:\r\n  - url: \"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-tavola-5.webp\"\r\n    description: \"Adidas Video Hacking - Presentation sample 4\"\r\n    width: 1920\r\n    height: 1082\r\n  - url: \"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-tavola-6.webp\"\r\n    description: \"Adidas Video Hacking - Presentation sample 5\"\r\n    width: 1920\r\n    height: 1082\r\n  - url: \"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-tavola-7.webp\"\r\n    description: \"Adidas Video Hacking - Presentation sample 6\"\r\n    width: 1920\r\n    height: 1082\r\n---\r\n::\r\n\r\nThe idea of Adidas Video Hacking is to create a **web portal** where users can customize the individual frames of a promotional video, giving life to the collective work.\r\n\r\nBut this wasn't enough for us… we wanted our experience to be usable **in-store**, in an even more engaging way, so we decided to pair the portal with a **physical interface**.\r\n\r\n::gallery\r\n---\r\nitems:\r\n  - url: \"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-user-flow.webp\"\r\n    description: \"Adidas Video Hacking - User flow\"\r\n    width: 1920\r\n    height: 1081\r\n  - url: \"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-schema-software.webp\"\r\n    description: \"Adidas Video Hacking - Software diagram\"\r\n    width: 1753\r\n    height: 1240\r\n---\r\n::\r\n\r\n## Graffiti artists are the hackers of urban space\r\n\r\nIn the store, an installation made of a **panel** and a fake **spray can** (actually an infrared pointer) will let visitors customize the video frames as if they were a wall to draw **graffiti** on.\r\n\r\nThe portal will be just like the one available online, but with a dedicated interface that puts the user in the **mood** of **urban hacking**, together with Adidas!\r\n\r\n::gallery\r\n---\r\nitems:\r\n  - url: \"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-tavola-9.webp\"\r\n    description: \"Adidas Video Hacking - Presentation sample 7\"\r\n    width: 1920\r\n    height: 1082\r\n  - url: \"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-tavola-11.webp\"\r\n    description: \"Adidas Video Hacking - Presentation sample 8\"\r\n    width: 1920\r\n    height: 1082\r\n  - url: \"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-tavola-12.webp\"\r\n    description: \"Adidas Video Hacking - Presentation sample 9\"\r\n    width: 1920\r\n    height: 1082\r\n---\r\n::\r\n\r\n## From the pitch to the prototype\r\n\r\nDuring the project pitch, the Adidas marketing and R&D managers were very interested in our idea! They asked us to build a prototype representative of the user experience and to highlight any potential issues, proposing solutions.\r\n\r\nThe first step was **developing the software** to create custom frames and generate the video from them.\r\n\r\n::gallery\r\n---\r\nitems:\r\n  - url: \"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-build-3.webp\"\r\n    description: \"Adidas Video Hacking - Work in progress 1\"\r\n    width: 2048\r\n    height: 1152\r\n  - url: \"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-build-6.webp\"\r\n    description: \"Adidas Video Hacking - Work in progress 2\"\r\n    width: 1850\r\n    height: 1084\r\n  - url: \"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-build-1.webp\"\r\n    description: \"Adidas Video Hacking - Work in progress 3\"\r\n    width: 1152\r\n    height: 2048\r\n---\r\n::\r\n\r\nWe designed and then implemented a **simple and direct interface**, letting users try their hand at creating right away. Some design choices came from the need to make the process intuitive, others from the need to work around technological limitations and optimize performance.\r\n\r\n::gallery\r\n---\r\nitems:\r\n  - url: \"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-invision-0.webp\"\r\n    description: \"Adidas Video Hacking - Screen 1\"\r\n    width: 736\r\n    height: 414\r\n  - url: \"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-invision-1.webp\"\r\n    description: \"Adidas Video Hacking - Screen 2\"\r\n    width: 736\r\n    height: 414\r\n  - url: \"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-invision-2.webp\"\r\n    description: \"Adidas Video Hacking - Screen 3\"\r\n    width: 736\r\n    height: 414\r\n---\r\n::\r\n\r\nSatisfied with the result, we moved on to the next step: building the **\"spray can\" pointing system**.\r\n\r\nAfter experimenting with remote controls, lasers, webcams and various kinds of projectors, we settled on the components we needed and got everything ready.\r\n\r\n::gallery\r\n---\r\nitems:\r\n  - url: \"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-build-7.webp\"\r\n    description: \"Adidas Video Hacking - Building the spray can\"\r\n    width: 1152\r\n    height: 2048\r\n  - url: \"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-cover.webp\"\r\n    description: \"Adidas Video Hacking - Sketch\"\r\n    width: 1920\r\n    height: 1282\r\n  - url: \"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-build-4.webp\"\r\n    description: \"Adidas Video Hacking - Building the screen\"\r\n    width: 2048\r\n    height: 1536\r\n---\r\n::\r\n\r\nDriven by the desire to prove our idea (and by the worry that something might go wrong), **with a good dose of DIY**, we built an installation that wasn't pretty to look at, but worked wonders!\r\n\r\n::gallery\r\n---\r\nitems:\r\n  - url: \"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-build-9.webp\"\r\n    description: \"Adidas Video Hacking - Screen assembly 1\"\r\n    width: 2048\r\n    height: 1152\r\n  - url: \"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-build-2.webp\"\r\n    description: \"Adidas Video Hacking - Screen assembly 2\"\r\n    width: 1152\r\n    height: 2048\r\n  - url: \"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-build-5.webp\"\r\n    description: \"Adidas Video Hacking - Screen test\"\r\n    width: 1920\r\n    height: 1080\r\n---\r\n::\r\n\r\nAfter the final adjustments, calibrations and tests, we were ready for the grand finale!\r\n\r\n## Presenting the project\r\n\r\nWe presented the project to the Adidas marketing and R&D managers, walking them through the initial analysis phase and the research and work that shaped the prototype.\r\n\r\n::gallery\r\n---\r\nitems:\r\n  - url: \"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-presentazione-1.webp\"\r\n    description: \"Adidas Video Hacking - Presentation 1\"\r\n    width: 1920\r\n    height: 1280\r\n  - url: \"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-presentazione-2.webp\"\r\n    description: \"Adidas Video Hacking - Presentation 2\"\r\n    width: 1920\r\n    height: 1280\r\n  - url: \"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-presentazione-3.webp\"\r\n    description: \"Adidas Video Hacking - Presentation 3\"\r\n    width: 1920\r\n    height: 1280\r\n---\r\n::\r\n\r\nHere is the **sample video** we brought: taken from Adidas promotional material and edited through the app by me and the other members of the group.\r\n\r\n::embedded-video\r\n---\r\nsrc: \"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-video.mp4\"\r\nposter: \"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-video-cover.webp\"\r\ncaption: \"Note: all rights to the original video belong to Adidas.\"\r\n---\r\n::\r\n\r\nThe moment of greatest satisfaction (and apprehension) came when, as planned, we invited our audience to **try the installation firsthand**.\r\n\r\n**It was a success!** We managed to communicate every aspect clearly and propose further developments, and we were complimented for delivering a complete prototype that did justice to our original intent.\r\n\r\n::gallery\r\n---\r\nitems:\r\n  - url: \"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-class-1.webp\"\r\n    description: \"Adidas Video Hacking - Class 1\"\r\n    width: 1600\r\n    height: 1200\r\n  - url: \"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-class-2.webp\"\r\n    description: \"Adidas Video Hacking - Class 2\"\r\n    width: 1600\r\n    height: 1200\r\n  - url: \"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fdiploma-2.webp\"\r\n    description: \"IED Florence - Diploma Presentation\"\r\n    width: 1024\r\n    height: 683\r\n---\r\n::\r\n\r\n---\r\n\r\n::link-button\r\n---\r\nhref: \"https:\u002F\u002Fgithub.com\u002Fnmanvilli\u002Fadidas-video-hacking-fe\"\r\nexternal: true\r\n---\r\nFront-end web app GitHub repository\r\n::\r\n\r\n::link-button\r\n---\r\nhref: \"https:\u002F\u002Fgithub.com\u002Fnmanvilli\u002Fadidas-video-hacking-be\"\r\nexternal: true\r\n---\r\nBack-end web app GitHub repository\r\n::\r\n\r\n::link-button\r\n---\r\nhref: \"https:\u002F\u002Fgithub.com\u002Fnmanvilli\u002Fadidas-video-hacking-of\"\r\nexternal: true\r\n---\r\nSpray-can app GitHub repository\r\n::","https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-cover.webp","Adidas Video Hacking - Sketch","2018-06-20T02:24:00+00:00","2026-10-26T11:01:14+00:00",{"data":18,"body":19},{},{"type":20,"children":21},"root",[22,31,43,62,68,101,106,111,117,143,168,172,184,218,223,257,264,282,294,298,310,328,332,338,364,383,387,393,398,410,414,426,430,441,446,450,462,466,471,477,482,486,498,504,515,525,529,533,544,553],{"type":23,"tag":24,"props":25,"children":27},"element","h2",{"id":26},"the-thesis-project",[28],{"type":29,"value":30},"text","The thesis project",{"type":23,"tag":32,"props":33,"children":34},"p",{},[35,41],{"type":23,"tag":36,"props":37,"children":38},"strong",{},[39],{"type":29,"value":40},"IED Firenze",{"type":29,"value":42}," usually invites its students to carry out a thesis project in collaboration with companies that turn to the institute in search of ideas to enrich and innovate their communication or the design of their services and spaces.",{"type":23,"tag":32,"props":44,"children":45},{},[46,48,53,55,60],{"type":29,"value":47},"For our ",{"type":23,"tag":36,"props":49,"children":50},{},[51],{"type":29,"value":52},"PTP training program in Web Design",{"type":29,"value":54},", the 2018 proposal came from ",{"type":23,"tag":36,"props":56,"children":57},{},[58],{"type":29,"value":59},"Adidas",{"type":29,"value":61},".",{"type":23,"tag":24,"props":63,"children":65},{"id":64},"adidas-here-to-create",[66],{"type":29,"value":67},"Adidas: Here to Create",{"type":23,"tag":32,"props":69,"children":70},{},[71,73,78,80,85,87,92,94,99],{"type":29,"value":72},"In an introductory brief (via videoconference from Nuremberg), some of the Adidas marketing managers summarized the characteristics of the ",{"type":23,"tag":36,"props":74,"children":75},{},[76],{"type":29,"value":77},"target audience",{"type":29,"value":79},", the ",{"type":23,"tag":36,"props":81,"children":82},{},[83],{"type":29,"value":84},"storytelling",{"type":29,"value":86}," behind the current campaigns, the ",{"type":23,"tag":36,"props":88,"children":89},{},[90],{"type":29,"value":91},"activities",{"type":29,"value":93}," undertaken so far, and the main ",{"type":23,"tag":36,"props":95,"children":96},{},[97],{"type":29,"value":98},"objectives",{"type":29,"value":100}," of the upcoming communication initiatives.",{"type":23,"tag":102,"props":103,"children":105},"gallery",{":items":104},"[{\"url\":\"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-tavola-2.webp\",\"description\":\"Adidas Video Hacking - Presentation sample 1\",\"width\":1920,\"height\":1082},{\"url\":\"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-tavola-3.webp\",\"description\":\"Adidas Video Hacking - Presentation sample 2\",\"width\":1920,\"height\":1082},{\"url\":\"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-tavola-4.webp\",\"description\":\"Adidas Video Hacking - Presentation sample 3\",\"width\":1920,\"height\":1082}]",[],{"type":23,"tag":32,"props":107,"children":108},{},[109],{"type":29,"value":110},"We students were given the task of developing an innovative proposal that could be integrated into their strategy.",{"type":23,"tag":24,"props":112,"children":114},{"id":113},"call-the-creators",[115],{"type":29,"value":116},"Call the Creators",{"type":23,"tag":32,"props":118,"children":119},{},[120,122,131,133,141],{"type":29,"value":121},"Adidas communication campaigns target ",{"type":23,"tag":123,"props":124,"children":125},"em",{},[126],{"type":23,"tag":36,"props":127,"children":128},{},[129],{"type":29,"value":130},"Creators",{"type":29,"value":132},": young people of the so-called ",{"type":23,"tag":123,"props":134,"children":135},{},[136],{"type":23,"tag":36,"props":137,"children":138},{},[139],{"type":29,"value":140},"Generation Z",{"type":29,"value":142}," who want to express themselves, participate, modify, and create their own uniqueness.",{"type":23,"tag":32,"props":144,"children":145},{},[146,148,153,155,160,162,167],{"type":29,"value":147},"Their first goal is to ",{"type":23,"tag":36,"props":149,"children":150},{},[151],{"type":29,"value":152},"engage",{"type":29,"value":154},", offering an entertainment or shopping ",{"type":23,"tag":36,"props":156,"children":157},{},[158],{"type":29,"value":159},"experience",{"type":29,"value":161}," that strengthens the sense of belonging to the ",{"type":23,"tag":36,"props":163,"children":164},{},[165],{"type":29,"value":166},"Adidas community",{"type":29,"value":61},{"type":23,"tag":102,"props":169,"children":171},{":items":170},"[{\"url\":\"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-moodboard-creators.webp\",\"description\":\"Adidas Video Hacking - Creators moodboard\",\"width\":2048,\"height\":1448},{\"url\":\"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-moodboard-graffiti.webp\",\"description\":\"Adidas Video Hacking - Graffiti moodboard\",\"width\":1024,\"height\":768}]",[],{"type":23,"tag":32,"props":173,"children":174},{},[175,177,182],{"type":29,"value":176},"They are also looking for proposals aimed at ",{"type":23,"tag":36,"props":178,"children":179},{},[180],{"type":29,"value":181},"reducing the gap between the experience in the physical store and online communication",{"type":29,"value":183},", also as a counterweight to the dominance of Amazon's anonymous, all-encompassing shopping.",{"type":23,"tag":32,"props":185,"children":186},{},[187,189,198,200,207,209,216],{"type":29,"value":188},"Together with my teammates (",{"type":23,"tag":190,"props":191,"children":195},"a",{"href":192,"rel":193},"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Florenzo-cini-668545309",[194],"nofollow",[196],{"type":29,"value":197},"Lorenzo Cini",{"type":29,"value":199},", ",{"type":23,"tag":190,"props":201,"children":204},{"href":202,"rel":203},"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fdavide-de-bartolomeo-b3a684139",[194],[205],{"type":29,"value":206},"Davide De Bartolomeo",{"type":29,"value":208}," and ",{"type":23,"tag":190,"props":210,"children":213},{"href":211,"rel":212},"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fmichelemartelli",[194],[214],{"type":29,"value":215},"Michele Martelli",{"type":29,"value":217},"), after a phase of analysis, brainstorming and research, we decided to go for an unusual project…",{"type":23,"tag":24,"props":219,"children":221},{"id":220},"adidas-video-hacking",[222],{"type":29,"value":10},{"type":23,"tag":32,"props":224,"children":225},{},[226,228,235,237,242,244,249,251,256],{"type":29,"value":227},"We found our main inspiration in a web project: ",{"type":23,"tag":190,"props":229,"children":232},{"href":230,"rel":231},"https:\u002F\u002Fwww.radicalmedia.com\u002Fwork\u002Fthe-johnny-cash-project\u002F",[194],[233],{"type":29,"value":234},"The Johnny Cash Project",{"type":29,"value":236},".\nIn this online portal (now replaced by a case study, since the initiative has ended), visitors could ",{"type":23,"tag":36,"props":238,"children":239},{},[240],{"type":29,"value":241},"customize individual frames",{"type":29,"value":243}," of the video of ",{"type":23,"tag":123,"props":245,"children":246},{},[247],{"type":29,"value":248},"Ain't No Grave",{"type":29,"value":250}," by Johnny Cash, redrawing them and creating a ",{"type":23,"tag":36,"props":252,"children":253},{},[254],{"type":29,"value":255},"collective work in constant motion",{"type":29,"value":61},{"type":23,"tag":258,"props":259,"children":263},"embedded-video",{"caption":260,"poster":261,"src":262},"Excerpt from “The Johnny Cash Project”, all rights belong to the project owners.","https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fjohnny-cash-project-cover.webp","https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fjohnny-cash-project.mp4",[],{"type":23,"tag":32,"props":265,"children":266},{},[267,269,274,275,280],{"type":29,"value":268},"This idea of providing a tool and letting the public express themselves by modifying existing media seemed to us in line with the concepts of ",{"type":23,"tag":36,"props":270,"children":271},{},[272],{"type":29,"value":273},"hacking",{"type":29,"value":208},{"type":23,"tag":36,"props":276,"children":277},{},[278],{"type":29,"value":279},"creation",{"type":29,"value":281}," promoted by Adidas.",{"type":23,"tag":32,"props":283,"children":284},{},[285,287,292],{"type":29,"value":286},"We wanted Adidas, which had already experimented with product customization, to offer a ",{"type":23,"tag":36,"props":288,"children":289},{},[290],{"type":29,"value":291},"hacking experience for a brand communication video",{"type":29,"value":293},", integrated with social networks.",{"type":23,"tag":102,"props":295,"children":297},{":items":296},"[{\"url\":\"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-tavola-5.webp\",\"description\":\"Adidas Video Hacking - Presentation sample 4\",\"width\":1920,\"height\":1082},{\"url\":\"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-tavola-6.webp\",\"description\":\"Adidas Video Hacking - Presentation sample 5\",\"width\":1920,\"height\":1082},{\"url\":\"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-tavola-7.webp\",\"description\":\"Adidas Video Hacking - Presentation sample 6\",\"width\":1920,\"height\":1082}]",[],{"type":23,"tag":32,"props":299,"children":300},{},[301,303,308],{"type":29,"value":302},"The idea of Adidas Video Hacking is to create a ",{"type":23,"tag":36,"props":304,"children":305},{},[306],{"type":29,"value":307},"web portal",{"type":29,"value":309}," where users can customize the individual frames of a promotional video, giving life to the collective work.",{"type":23,"tag":32,"props":311,"children":312},{},[313,315,320,322,327],{"type":29,"value":314},"But this wasn't enough for us… we wanted our experience to be usable ",{"type":23,"tag":36,"props":316,"children":317},{},[318],{"type":29,"value":319},"in-store",{"type":29,"value":321},", in an even more engaging way, so we decided to pair the portal with a ",{"type":23,"tag":36,"props":323,"children":324},{},[325],{"type":29,"value":326},"physical interface",{"type":29,"value":61},{"type":23,"tag":102,"props":329,"children":331},{":items":330},"[{\"url\":\"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-user-flow.webp\",\"description\":\"Adidas Video Hacking - User flow\",\"width\":1920,\"height\":1081},{\"url\":\"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-schema-software.webp\",\"description\":\"Adidas Video Hacking - Software diagram\",\"width\":1753,\"height\":1240}]",[],{"type":23,"tag":24,"props":333,"children":335},{"id":334},"graffiti-artists-are-the-hackers-of-urban-space",[336],{"type":29,"value":337},"Graffiti artists are the hackers of urban space",{"type":23,"tag":32,"props":339,"children":340},{},[341,343,348,350,355,357,362],{"type":29,"value":342},"In the store, an installation made of a ",{"type":23,"tag":36,"props":344,"children":345},{},[346],{"type":29,"value":347},"panel",{"type":29,"value":349}," and a fake ",{"type":23,"tag":36,"props":351,"children":352},{},[353],{"type":29,"value":354},"spray can",{"type":29,"value":356}," (actually an infrared pointer) will let visitors customize the video frames as if they were a wall to draw ",{"type":23,"tag":36,"props":358,"children":359},{},[360],{"type":29,"value":361},"graffiti",{"type":29,"value":363}," on.",{"type":23,"tag":32,"props":365,"children":366},{},[367,369,374,376,381],{"type":29,"value":368},"The portal will be just like the one available online, but with a dedicated interface that puts the user in the ",{"type":23,"tag":36,"props":370,"children":371},{},[372],{"type":29,"value":373},"mood",{"type":29,"value":375}," of ",{"type":23,"tag":36,"props":377,"children":378},{},[379],{"type":29,"value":380},"urban hacking",{"type":29,"value":382},", together with Adidas!",{"type":23,"tag":102,"props":384,"children":386},{":items":385},"[{\"url\":\"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-tavola-9.webp\",\"description\":\"Adidas Video Hacking - Presentation sample 7\",\"width\":1920,\"height\":1082},{\"url\":\"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-tavola-11.webp\",\"description\":\"Adidas Video Hacking - Presentation sample 8\",\"width\":1920,\"height\":1082},{\"url\":\"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-tavola-12.webp\",\"description\":\"Adidas Video Hacking - Presentation sample 9\",\"width\":1920,\"height\":1082}]",[],{"type":23,"tag":24,"props":388,"children":390},{"id":389},"from-the-pitch-to-the-prototype",[391],{"type":29,"value":392},"From the pitch to the prototype",{"type":23,"tag":32,"props":394,"children":395},{},[396],{"type":29,"value":397},"During the project pitch, the Adidas marketing and R&D managers were very interested in our idea! They asked us to build a prototype representative of the user experience and to highlight any potential issues, proposing solutions.",{"type":23,"tag":32,"props":399,"children":400},{},[401,403,408],{"type":29,"value":402},"The first step was ",{"type":23,"tag":36,"props":404,"children":405},{},[406],{"type":29,"value":407},"developing the software",{"type":29,"value":409}," to create custom frames and generate the video from them.",{"type":23,"tag":102,"props":411,"children":413},{":items":412},"[{\"url\":\"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-build-3.webp\",\"description\":\"Adidas Video Hacking - Work in progress 1\",\"width\":2048,\"height\":1152},{\"url\":\"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-build-6.webp\",\"description\":\"Adidas Video Hacking - Work in progress 2\",\"width\":1850,\"height\":1084},{\"url\":\"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-build-1.webp\",\"description\":\"Adidas Video Hacking - Work in progress 3\",\"width\":1152,\"height\":2048}]",[],{"type":23,"tag":32,"props":415,"children":416},{},[417,419,424],{"type":29,"value":418},"We designed and then implemented a ",{"type":23,"tag":36,"props":420,"children":421},{},[422],{"type":29,"value":423},"simple and direct interface",{"type":29,"value":425},", letting users try their hand at creating right away. Some design choices came from the need to make the process intuitive, others from the need to work around technological limitations and optimize performance.",{"type":23,"tag":102,"props":427,"children":429},{":items":428},"[{\"url\":\"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-invision-0.webp\",\"description\":\"Adidas Video Hacking - Screen 1\",\"width\":736,\"height\":414},{\"url\":\"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-invision-1.webp\",\"description\":\"Adidas Video Hacking - Screen 2\",\"width\":736,\"height\":414},{\"url\":\"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-invision-2.webp\",\"description\":\"Adidas Video Hacking - Screen 3\",\"width\":736,\"height\":414}]",[],{"type":23,"tag":32,"props":431,"children":432},{},[433,435,440],{"type":29,"value":434},"Satisfied with the result, we moved on to the next step: building the ",{"type":23,"tag":36,"props":436,"children":437},{},[438],{"type":29,"value":439},"\"spray can\" pointing system",{"type":29,"value":61},{"type":23,"tag":32,"props":442,"children":443},{},[444],{"type":29,"value":445},"After experimenting with remote controls, lasers, webcams and various kinds of projectors, we settled on the components we needed and got everything ready.",{"type":23,"tag":102,"props":447,"children":449},{":items":448},"[{\"url\":\"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-build-7.webp\",\"description\":\"Adidas Video Hacking - Building the spray can\",\"width\":1152,\"height\":2048},{\"url\":\"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-cover.webp\",\"description\":\"Adidas Video Hacking - Sketch\",\"width\":1920,\"height\":1282},{\"url\":\"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-build-4.webp\",\"description\":\"Adidas Video Hacking - Building the screen\",\"width\":2048,\"height\":1536}]",[],{"type":23,"tag":32,"props":451,"children":452},{},[453,455,460],{"type":29,"value":454},"Driven by the desire to prove our idea (and by the worry that something might go wrong), ",{"type":23,"tag":36,"props":456,"children":457},{},[458],{"type":29,"value":459},"with a good dose of DIY",{"type":29,"value":461},", we built an installation that wasn't pretty to look at, but worked wonders!",{"type":23,"tag":102,"props":463,"children":465},{":items":464},"[{\"url\":\"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-build-9.webp\",\"description\":\"Adidas Video Hacking - Screen assembly 1\",\"width\":2048,\"height\":1152},{\"url\":\"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-build-2.webp\",\"description\":\"Adidas Video Hacking - Screen assembly 2\",\"width\":1152,\"height\":2048},{\"url\":\"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-build-5.webp\",\"description\":\"Adidas Video Hacking - Screen test\",\"width\":1920,\"height\":1080}]",[],{"type":23,"tag":32,"props":467,"children":468},{},[469],{"type":29,"value":470},"After the final adjustments, calibrations and tests, we were ready for the grand finale!",{"type":23,"tag":24,"props":472,"children":474},{"id":473},"presenting-the-project",[475],{"type":29,"value":476},"Presenting the project",{"type":23,"tag":32,"props":478,"children":479},{},[480],{"type":29,"value":481},"We presented the project to the Adidas marketing and R&D managers, walking them through the initial analysis phase and the research and work that shaped the prototype.",{"type":23,"tag":102,"props":483,"children":485},{":items":484},"[{\"url\":\"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-presentazione-1.webp\",\"description\":\"Adidas Video Hacking - Presentation 1\",\"width\":1920,\"height\":1280},{\"url\":\"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-presentazione-2.webp\",\"description\":\"Adidas Video Hacking - Presentation 2\",\"width\":1920,\"height\":1280},{\"url\":\"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-presentazione-3.webp\",\"description\":\"Adidas Video Hacking - Presentation 3\",\"width\":1920,\"height\":1280}]",[],{"type":23,"tag":32,"props":487,"children":488},{},[489,491,496],{"type":29,"value":490},"Here is the ",{"type":23,"tag":36,"props":492,"children":493},{},[494],{"type":29,"value":495},"sample video",{"type":29,"value":497}," we brought: taken from Adidas promotional material and edited through the app by me and the other members of the group.",{"type":23,"tag":258,"props":499,"children":503},{"caption":500,"poster":501,"src":502},"Note: all rights to the original video belong to Adidas.","https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-video-cover.webp","https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-video.mp4",[],{"type":23,"tag":32,"props":505,"children":506},{},[507,509,514],{"type":29,"value":508},"The moment of greatest satisfaction (and apprehension) came when, as planned, we invited our audience to ",{"type":23,"tag":36,"props":510,"children":511},{},[512],{"type":29,"value":513},"try the installation firsthand",{"type":29,"value":61},{"type":23,"tag":32,"props":516,"children":517},{},[518,523],{"type":23,"tag":36,"props":519,"children":520},{},[521],{"type":29,"value":522},"It was a success!",{"type":29,"value":524}," We managed to communicate every aspect clearly and propose further developments, and we were complimented for delivering a complete prototype that did justice to our original intent.",{"type":23,"tag":102,"props":526,"children":528},{":items":527},"[{\"url\":\"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-class-1.webp\",\"description\":\"Adidas Video Hacking - Class 1\",\"width\":1600,\"height\":1200},{\"url\":\"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fadidas-video-hacking-class-2.webp\",\"description\":\"Adidas Video Hacking - Class 2\",\"width\":1600,\"height\":1200},{\"url\":\"https:\u002F\u002Fblog-api.nmanvilli.com\u002Fuploads\u002F2018\u002F06\u002Fdiploma-2.webp\",\"description\":\"IED Florence - Diploma Presentation\",\"width\":1024,\"height\":683}]",[],{"type":23,"tag":530,"props":531,"children":532},"hr",{},[],{"type":23,"tag":534,"props":535,"children":538},"link-button",{":external":536,"href":537},"true","https:\u002F\u002Fgithub.com\u002Fnmanvilli\u002Fadidas-video-hacking-fe",[539],{"type":23,"tag":32,"props":540,"children":541},{},[542],{"type":29,"value":543},"Front-end web app GitHub repository",{"type":23,"tag":534,"props":545,"children":547},{":external":536,"href":546},"https:\u002F\u002Fgithub.com\u002Fnmanvilli\u002Fadidas-video-hacking-be",[548],{"type":23,"tag":32,"props":549,"children":550},{},[551],{"type":29,"value":552},"Back-end web app GitHub repository",{"type":23,"tag":534,"props":554,"children":556},{":external":536,"href":555},"https:\u002F\u002Fgithub.com\u002Fnmanvilli\u002Fadidas-video-hacking-of",[557],{"type":23,"tag":32,"props":558,"children":559},{},[560],{"type":29,"value":561},"Spray-can app GitHub repository"]