Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

XD Immersive: Charles Yust, "Designing Ikea’s AR Shopping Experience"

926 views

Published on

XD Immersive: Charles Yust, "Designing Ikea’s AR Shopping Experience"

Published in: Design
  • Be the first to comment

XD Immersive: Charles Yust, "Designing Ikea’s AR Shopping Experience"

  1. 1. XD IMMERSIVE 2018 Designing IKEA’s  AR Shopping Experience Producing the first prototype of the IKEA AR Place app using ARKit by Apple (WWDC 2017).
  2. 2. 1 2 3 4 5 2 CONTENT Introduction Immersion at frog IKEA at frog IKEA + AR SFMOMA
  3. 3. FROG DESIGN Introduction
  4. 4. Decades of innovation ABOUT FROG 4 frog’s journey began when Hartmut Esslinger founded esslinger design, ushering in an era of emotional design in response to the function- oriented products of the day. Engineering, branding, and packaging became part of frog's core offering. In the mid-1990s, frog led a dramatic shift in the design industry by incorporating software design for web and mobile. Formfollowsemotion Goingdigital frog’s design language for Apple launched with great success. It was recognized by Time Magazine and added to the permanent collection at the Whitney Museum of Art. frog began large-scale UX and convergent collaborations to create software, mobile products and connected experiences that blurred the lines between physical and digital. TheAppleera Designthattransforms Today, frog designs systems of brand, product and service that deliver better experiences. We look beyond point solutions and design new strategies, ecosystems, and businesses. Newfrontiers
  5. 5. Our studios ABOUT FROG 5 SAN FRANCISCO MILAN AUSTIN NEW YORK BOSTON LONDON AMSTERDAM MUNICH SINGAPORE SHANGHAI
  6. 6. We advance the human experience. Since our early days ushering in the era of personal computing, our rallying cry has been ‘form follows emotion.’Today our work goes beyond individual forms—we design systems of brand, product, and service—but our focus on emotion remains. We strive to create the world as it should be, and our work results in experiences people love.
  7. 7. 7 Charles Yust Principal Design Technologist, frogSF Focus Areas • AR/VR • Immersive Environments • HW/SW Prototyping • Pancake Art
 instagram.com/prandomcakes/
  8. 8. HOW WE USE XR TECHNOLOGY Immersionatfrog
  9. 9. Meta Meta, a tech startup developing Augmented Reality technology asked frog to design their second developer kit augmented reality headset. AR HEADSET
  10. 10. Rambus frog built a functioning eye-tracking prototype application using the new Rambus Lensless Smart Sensor (LSS).. This wearable concept proved to be a viable market opportunity. Later, Rambus asked frog to commission a future-vision film to bring the concept to life. AR EYE-TRACKING WITH LSS
  11. 11. frog Designed and developed a low-cost head mounted viewer + VR game experience to help burn patients cope with pain during the wound care process. The headset targeted a sub-$10 price point and the software could be controlled while lying down. The project was open- sourced to encourage use and further modification. FastCo Article VR CARE
  12. 12. DESIGNING FOR IKEA IKEA+frog
  13. 13. DESIGNING AR FOR IKEA IKEA+AR
  14. 14. Örigins
  15. 15. 24 APRIL 2017 Very well defined deadlines Little defined scope 1 week
  16. 16. 25 1 INFINITE LOOP,
 APPLE HQ
  17. 17. 26
  18. 18. An augmented reality based mobile application which allows people to play with, explore and purchase IKEA products from within their home.
 Opportunity 27
  19. 19. Pröcess
  20. 20. 29 PRIOR IKEA AR APP [METAIO - PURCHASED BY APPLE]
  21. 21. Long Distance Design PROCESS 30 FROG/APPLE, BAY AREA IKEA, DELFT FROG, MUNICH
  22. 22. We started by three days of brainstorming with the client in the frog Munich studio. At the end of this exercise, we had a clear flow and scope of the demo app. We then went straight into implementation, refining it through multiple iterations. Very lean UX. Process 31
  23. 23. Started evaluating off-the-shelf AR/Unity SDKs and building functional prototypes. Kudan and Wikitude were the two leading options. Helped establish workflow before heading into Apple and to benchmark existing technology.
 SLAM (Simultaneous Localization and Mapping). Process - SF 32
  24. 24. Technically savvy and curious to try the latest new thing, early adopters are looking out for new products with innovative technology and interactions. Early adopters Always up-to-date and consuming great quantity of online content, connected beings will seek approbation from their social networks and are attracted to apps with shareable artefacts. Connected beings Used to shop through websites and apps, online buyers do not mind using digital products to get an strong opinion on items. They trust what is displayed and rely on media to get information. Online buyers USERS AND USE CASES Who would use this app? 33
  25. 25. We based ourselves on a real world home furnishing experience, where people would actually carry furniture around then drop it in place, locking their position. Grab, move and place When browsing through products in 3D, users are confronted to an “IKEA Catalogue” view that relates well to the real world print layout. A virtual showroom INTERACTION DESIGN The real world metaphor Real world actions and moments drove our interaction design so users can have a recognizable experience. 34
  26. 26. DESIGN DOCUMENTATION - USER FLOW User needs to scan his room in order to get an optimal tracking and scaling experience. Browse Place Explore Capture & shareCalibrate User browses (in 2D) through IKEA product categories and range to find the first product to try out in his room. User places the chosen product in his room by physically moving himself and the phone. User explores variations of the product, other products and gets inspiration through combinations. User takes a picture of the setting to then share either in a static format or a “scene” that can be modified by other people through the app. High level flow 35
  27. 27. An augmented reality application requires the user to hold and point the device around him. A safe and steady grasp on the device is required during the majority of the experience. Holding the device steady We defined easily reachable areas while holding the device with two hands. These areas helped us define button placement to minimize risk of failure, drop or pain. Interactive areas Given the immersive nature of the app and the fact that tapping on objects on screen is a more risky interaction, user points the reticle to objects in space to access contextual actions that are reachable. Point to select INTERACTION DESIGN Basic ergonomic rules 36
  28. 28. Icons and buttons were designed with AR in mind, where the camera feed can take any colours. Shadows and pure white help graphics element to stand out no matter what is behind. Overlays on any background Simple shapes and familiar symbols such as the IKA flatpack drove inspiration for these icons. IKEA style VISUAL DESIGN An IKEA & AR friendly design We are guiding the user to the primary/ recommended actions thanks to different visual treatments throughout the app. Primary and secondary 37
  29. 29. 38 Liquid Development FINAL 3D MODELING [LA]
  30. 30. Låünch
  31. 31. The demo was showcased at WWDC 2017 in the developer sessions and mentioned in the main keynote. We also wrapped up the project into a Takeaway deck and gave a final presentation in Malmö at IKEA Creative Hub. Delivery and results 40
  32. 32. 41
  33. 33. PRESS 43 "You'retalkingaboutchangingthewhole experienceofhowyoushopforfurniture…” TIM COOK, CEO OF APPLE “
  34. 34. • Space 10 (www.space10.io), Innovation lab sponsored by Ikea. • Twnkls (www.twnkls.com), Augmented Reality company located in the Netherlands. • 72 and Sunny (www.72andsunny.com), Global marketing company with offices in Amsterdam. IKEA AR Evolution 44
  35. 35. 45
  36. 36. OUTCOMES 46 HOUZZ LOWE’S TESLA DEMO SHERWIN-WILLIAMS
  37. 37. Photo by Jon McNeal. All images courtesy Snøhetta MIXED REALITY & MAGRITTE SFMOMA
  38. 38. 48
  39. 39. 49 MAGRITTE
  40. 40. 50 MAGRITTE
  41. 41. 51
  42. 42. 52
  43. 43. 53 ShowyourbadgeattheSFMOMAticketingdesk
 $4offGeneralAdmission
  44. 44. FROG IS A COMPANY OF ARICENT © 2018 FROG DESIGN INC. charles.yust@frogdesign.com instagram.com/prandomcakes/
 @charlesyust

×