“An interesting way to visualize data and personalize a report.” —juror Isabel Kantor

“This think piece folds in an additional layer of storytelling and data visualization with each swipe of the nger.” —juror Megan Meeker

Overview: After surveying 500 marketers and information technology (IT) professionals on the future of mobile technology, Adobe turned the data into the Adobe 2018 Mobile Study. To house the findings, digital agency Welikesmall built a mobile-first website that utilizes machine learning. A series of interactive features gathers user input; for example, visitors pick between two target audiences—marketer or IT professional—by physically tilting their mobile device. The combined inputs trigger machine learning to alter fonts, styles, colors and design elements. In the end, each visitor is presented with a personalized report of the 2018 mobile trends.

• • The project includes eight videos, dozens of data visualizations, mobile moments and several up-front minigames.
  • The interactive features include a minigame to determine and respond to a visitor’s attention span, and interactions with a 3-D, augmented reality (AR)–style environment to select personal preferences.
  • The site was built using Vue.js, Three.js, native GLSL shaders, modified Bootstrap, Google Geolocation API, GSAP and Waypoints.

Comments by Michael Kern:
Was the project part of a larger promotional campaign? “Yes. Adobe builds a number of reports/studies like this each year; they are meant to inform and educate the public about the current status and trends of the web. This experience was the main piece of content in a campaign that included email, social, ads and other media—all driving to the report.”

Did you meet with any out-of-the-ordinary obstacles during development? “This was our first project that involved aesthetic-based machine learning, so there were really no rules on how to start. One major challenge was including older mobile devices so that the content maintained relevance for every user across devices. Additionally, we employed hardware detection and GPU frames-per-second performance checks to determine the level of detail needed to deliver a fluid and polished experience. A few years ago, this would not have even been possible in-browser. Creating this all as a web app in-browser avoided the issue of forcing users to download a native app just to experience the report. We wanted a seamless and technologically innovative experience from the moment you click the link to experiencing AR in a browser.”

Did you learn anything new during the process? “Our team played with many new technologies early on to determine the best methodology to build the Adobe 2018 Mobile Study. The mobile web space seems to still be driven by highly conservative ideologies when the reality is you can create some really unique and interesting work. Mobile web has so many possibilities, and it’s not just resizing a website and slapping it up in a long-scrolling page. We wish people would think about mobile more creatively because most of us spend more time on our mobile devices than in front of a desktop computer. The future of technology is exciting.”