The LeBron James Innovation Center at Nike

Responses by Troy Lachance, chief creative officer, Bluecadet.

Background: This site takes visitors inside Nike’s new LeBron James Innovation Center, a facility that helps enable the progressive, athletic performance–focused engineering of Nike’s Advanced Innovation team. Containing video content, photos, 3-D renderings, sketches and architectural plans, the digital experience showcases Nike’s investment in sports science and innovation. It simultaneously highlights the architecture and artwork within the building, along with storytelling about the building’s iconic namesake. The site aims to inspire visitors into action, providing them with the opportunity to sign up for research studies that will help inform the future of sport and products.

Design core: The website utilizes an extensive library of photo and video content. Visitors who take the time to explore can go pretty deep. For example, they can click over photographers to learn more details contained within hotspots. Or they can hear from people like Nike’s chief executive officer John Donahoe or LeBron James himself about what innovation means to them. Other bespoke features enable visitors to experience some of the technology utilized by the Advanced Innovation team, such as environmental chambers that test how athletes perform in different climates. Adjust the temperature on the website’s digital environmental chamber, and new content is surfaced.

Challenges: Work on the LeBron James Innovation Center website mirrored Nike’s innovation process: prototype, test and iterate—all on a short timeline. The timeline required that the content be developed in parallel with the design through to the end of development. Many strong ideas were left on the cutting room floor, which speaks to Nike’s comfort and willingness to have fun, experiment and learn.

Navigation structure: The top-level navigation feels like a map, but it’s not a one-to-one representation of the actual LeBron James Innovation Center. Although the website is based on a real-world physical space, we got to abstract it a bit. That’s because the virtual “tour” is more about the building’s features and capabilities than its layout. The opportunity is that we got to group components of the building by the themes of innovation, exploration and inspiration, which speak to the measurable value this facility provides.

Technology: We knew we were combining a 3-D isometric environment with UI for displaying photo and video content, so we settled on a combination of three.js and React, with React Three Fiber being the bridge between the two. React-spring handled the animations, and we authored custom GLSL shaders for some of the more interactive animations on the site. To achieve the panning and bouncy border around the environment, we custom-built 3-D camera controls, which we also used within the 360-degree detail views.


Browse Projects

Click on an image to view more from each project

Source link

Leave a Reply

Your email address will not be published. Required fields are marked *