The newest launch I did for DC has been the DC Mike Mo shoe experience. This one was cool because I worked closely with the design team to come up with an experience that just felt good, and in line with the video marketing. It all started off with the idea to “blend” a video and single page experience. We decided that we would intro the video and then fade in the website when the video was done. It had to be seamless where the user could not tell. We also decided that the transitions should be the same style as the video, where there is like a fade/swipe transition.
Hmm… the transition… This was the tricky part, especially doing it via code. You couldn’t just play a video of the transitions because then you would have to create videos for every possible combination (slide 1->slide 2, slide 1-> slide 3, etc…). You also never knew what the next slide the user was going to click on. What I decided to do was to use masking for the transitions.
But webkit and gecko have different masking ways, so I had to do both.
Firefox uses SVG Masking. Chrome/Safari use webkit masking. And for all other shitty browsers, they get a simple fade in/fade out.
In order to not have users leave our Mike Mo Experience, we decided to custom build a Mike Mo “Express Shop” overlay that would allow the user to add products to their cart. I built this before as plugin so I could use it anywhere, and it helped out tremendously. I also built it in a way where I could theme it, so making this have a custom black skin, etc.. was easy! The express shop runs off of a custom GSI REST Service.
Coming from DC, theres GOT to be videos. So this has 2, and they are both really cool. You should check em out!
Some gripes I had with this project is with GSI. GSI (our e-commerce platform) is especially tricky because it does not allow you to put in <svg, <video , <link , nor <style tags, which is basically essential to any front end experience. So we have to inject via JS which I’m not particularly happy about but it’s all we can do (I mean c’mon, we can’t even load CSS??)
This project was fun and I liked it a lot, see it for yourself.
At the time of writing, I got over 23,000 facebook likes on it 🙂
Local Copy
http://jameskusachi.com/code/dc13_mike_mo/