BMW X-6

The Project

BMW was looking to bring some attention to their X-6 and M-Series product lines by creating an interactive demo showcasing some of the interesting features of the vehicle. They contracted KBSP (now Forman and Bodenfors) to conceptualize and build two sites to accomplish this. I was retained to assist in executing some key interactive features.

Process

After a handle of meetings with BMW to establish project goals, the designs were created to match the experience that they wanted. My part in the process began after the designs were completed and handed off to the development team.

My first task at KBSP was to build the X-6 exploratory interactive site, which highlighted several key features of the vehicle through a test lap concept. The site showed several rooms with an emphasis on specific details, i.e aerodynamic design, brake systems, electronics, etc. The idea was to show several 'researchers' mulling over details and when they were selected, the room they occupied was brought into focus and the information in that section was revealed. The trick was to make sure there were at least 3 scientists in every room and that they didn't overlap. Very fun stuff.

My second task was to build the M-Technology information site to do a deep dive into what made their M-Series vehicles unique. The idea behind this one was to show a rendered version of the car speeding around a track and depending on where one clicked, it would show an exploded animated view of a specific M feature, i.e. body structure, suspension, headlights, etc. This one was a challenge because it consisted of managing a lot of video assets at once so the transitions appeared seamless but it was a blast to work on.

Once these components were built, they were tested and then shown to BMW for final approval.

BMW was so pleased with the results of the project, I was invited to lead front-end development on KBSP's company site.

Tools/Frameworks

The backend was built with PHP to handle data delivery to the front end. An API was built all the frontend to request data from the MySQL datastore and display the results.

The front end was a custom scripted Flash component that handled all video and audio assets.

^{BMW USA index}

^{technology index}

^{BMW X-6 tech lab landing}

^{BMW M-Technology index}