The hub centric rings store vymezovaci-krouzky.cz hadn't seen a redesign in awhile so I was asked to make a new design that would be fresh, user friendly and fun.
Mr. Ring is one of my best creations yet so he deserved to be treated as such. I wanted to improve the overall shopping experience not only by fixing the design, but also by adding a story and presenting users with fun moments from Mr. Ring's life. With WebGL now being supported in all modern browsers, I decided to make the scenes 3D and rendered directly in browser. This allowed us to make some of them interactive. After launch, I recieved a lot of positive feedback for coming up with an unexpected treatment of what otherwise would have been another boring shopping experience.
Mr. Ring is a character I created for a previous version of the website. Everybody loves him so much I just had to continue his story.
The project was on a pretty low budget so I had to be clever about how we invested our time. Finally, I decided to build the scenes with just three primary models. Mr. Ring, Mr. Fox and the Car.
I made these quick sketches to visualize the idea for the client.
Designing the scenes in 3D to be rendered directly in the browser proved to be a quite a challenge. Everything had to have a low polygon count and simple textures to ensure fast load time.
Our main hero. Hub centric rings expert, charmer and, as seen after placing the order, an excellent dancer. In the end, we decided to drop the striped shirt to save some kilobytes.
Best friend and customer. Why would a fox need hub centric rings you ask? Well, you don't know foxes!
Low-poly but can reach the speed of up to 403 km/h. Wow!
I love making 404 pages because you have complete creative freedom. Mr. Ring's journey ends directly at a 404 page which states: "404 km/h. An error or too high a speed without hub centric rings? Mr. Ring reached the end of his journey but he never found the page you're looking for."
The error page leaves us with so many unanswered questions. Such as, is that Mr. Ring's head hanging from the branch? Is he dead? Can he even die since his head is made of plastic?
Making the website in real-time rendered 3D came with lots of pitfalls and challenges, especially when it came to optimizing it for low-end devices.
All 3D models had to have a low polygon count so the scenes get displayed to visitors instantly and with ideal performance. I spent a lot of time on optimization of all assets and code so everything gets loaded quickly and runs smoothly across all devices.
Mr. Ring! We are pretty sure this is an illegal yoga move!
I'm pretty sure that this happened right before the 404 error.
Fortunately I was able to "upcycle" most of the back-end PHP code from the previous version of the site, which saved a ton of time. I was then able to focus our resources on design and front-end development.