Earlier this month I was hired to redesign the website for an online toy company named SpaceRail. Their main product line is a build-it-yourself marble model roller coasters also called SpaceRails. I had a chance to play with one of them for the filming of some video content that would be added to the website and the company’s Youtube channel.
The objective is to build a model roller coaster using the metal and plastic parts in the set. You then roller steel marbles over the tracks. They are a fun and challenging toy, but can also be very educational.
While the the SpaceRail roller coasters are the company’s signature product line, they recently became selling toy drones and quadcopters. These are small, very maneuverable, flying drones that can make flips in mid air. They even have one that’s a flying car.
Because SpaceRail doesn’t have a vast catalog of products, didn’t make sense to design their website like just another online store. Most websites in this market look like online store catalogs. They’ll tend to have a very busy design, with product carousels and promotional banners.
Instead of going this route, I felt SpaceRail had an opportunity to showcase the experience of using their products. I presented the client with a UI design of the proposed site redesign that I had made using Sketch 3. The client liked what they saw, and we agreed on rebuilding the site using Jupiter WordPress theme.
Jupiter uses the page builder plugin Visual Composer. And while I have my reservations about using a potentially resource intensive plugin like a drag and drop page builder, I felt it was appropriate for the clients needs and budget.
Building the Site
When you first go to spacerails.com you’re greeted with a full screen video slide of one of their SpaceRail roller coasters in action. This is a unique toy, and I wanted visitors to the site to see what these marble roller coasters have to offer. The second slide is of the flying car drone in action. Also a very interesting toy; the challenge in this video was to shorten it as much as possible, while still capturing all the cool things this little drone could do.
I needed to edit these videos to be short so that they wouldn’t cause too big of a load time on the website. The drone video, for example, needed to be edited from the original 80+ MB, with 1 minute 30 second runtime, to less then 6 MB, with less then 20 sec runtime.
The rest of the home page was kept fairly simple; with some introductions to the two product line (along with Youtube videos), one featured product carousel, and testimonials from real customer who have bought the roller coasters and drones.
The color scheme was suggested by the client, as it matches the colors of the SpaceRail logo on the product boxes.
From the beginning, the client explained that their biggest problem with their original website was the e-commerce section. Specifically the cost of their shipping was not getting calculated at checkout. Instead they were using a flat rate shipping that wasn’t reflecting the actual shipping costs. This meant the client was incurring loses on many of the orders being sold, especially on international orders.
I was able to find them a shipping plugin that paired perfectly with their current Woocommerce plugin. The shipping plugin calculates domestic and international rates. It even allows products to be grouped according to the shipping box dimensions. This way customers aren’t charged an arm and a leg for large orders.
The new site redesign captures the excitement of playing with a SpaceRail marble roller coaster, and flying a flying car drone. The redesign is clean while still getting the business’ message out through its content and it’s links to social media, including uploads to their previously forgotten Youtube channel. And more importantly to the client’s bottom line is they are no longer incurring losses from shipping costs. So far the client has been quite happy with the re-design.