Developing a new website for Motionworks

Posted by & filed under Websites.

motionworks-header

John’s story was a typical one. He had created a website in WordPress, because it’s simple and geared perfectly to the type of content he was producing. Unfortunately, the website went through a few different developers and, as a result, didn’t really have a cohesive vision or approach to the development of it. Consequently, it ended up taking John hours to load simple products to his site.

When John first asked me to take a look at making some updates to his existing website, I could see the pain and frustration that he was going through. It just wasn’t logical or efficient. The underlying code was messy and suffered from that very common problem of ‘being added to and added to without any underlying strategy around it’ (there’s probably a simple word to describe that but I can’t think what it is).

So come 2014 we got together over Skype and made some plans to reinvent his website and perform a complete ground up rebuild of Motionworks.net.

Planning the web development project

All too often, the first thing people do is start on a design – they open up Photoshop / Fireworks / Sketch and they start pushing pixels around without really understanding what they are trying to achieve.

As tempting as it may be to do this … don’t.

Instead, simply start by thinking about what the site needs to accomplish. What are it’s goals. What needs to be easy to do from both the admin side and the client side? What sort of content are we presenting? What features do we require to accomplish our goals? Do we even want to stick with the wordpress platform? And how much time and money do we have to spend on development?

Because John and I were working remotely (Sydney Australia and Tauranga New Zealand), we found the easiest way to do this was to open up a joint document inside google and start collaboratively writing  down everything that we needed to address. We could make checklists to work through and this helped to ensure that we didn’t skip over things. We could easily group tasks into priorities and we could easily capture new ideas or thoughts at the bottom of the document – and because we were working on a live google document there was none of that archaic ‘passing a word document around’ rubbish. We used our google doc as single source of truth and whenever we bounced ideas to each other via email, skype or twitter, we made sure to capture them into that google doc.

Wireframes

I usually like to start developing wire frames. Wireframes are low fi sketches that help you decide where crucial information goes and what a process flow might be for a given interaction. Where you are handing off to other services and what you’ll need to be building yourself.

Wireframes are fast to create and fast to iterate on – and thats really important. They also help in keeping the project running to a budget.

Design

For the new Motionworks.net web site, John really wanted to go for a super clean look. The site had to work well on various screen sizes and devices and present Motionworks in a clean, professional and visual manner.

We decided on a very simple grid system to and used wordpress feature images to visually showcase all his amazing content. We created ’tiles’ in the grid which predominantly displayed feature images and just enough text to let people know what the tile represented. Over time we added little touches to the grid tiles so that we could pull through any tags that may be associated with the content as well as creating nice fluid css animations for various states of the tiles.

In mobile versions of the tile, where there are no hover states, the tiles simply expand to reveal all of their content. A super simple solution which works really nicely.

Along with creating our own version of a slider, seen in the ‘shop’ page, we also created something we called ‘the nutshell’. The nutshell is a group of 5 differing size tiles which John can control very easily from inside of wordpress.

I was really fortunate to be working with John on the design of his site – you see – he’s a designer too … so we’d often take design concepts and create our own variations of them. We’d thrash out a simple concept for the header or footer and pass that around each other a few times with each of us making iterations or variations of the design. That way we managed to come up with something that we could be sure would not only look good – but stick within the budget.

It all too often happens that an external design agency spends a large chunk of client money on a design without realising the amount of additional development work that is required to implement it .. either blowing out the budget or disappointing the client. So managing these sorts of things is crucial.

Easy Content Management

After we reviewed our options in the planning stages, we decided to stick with wordpress as the underlying platform. It just seemed the best way to handle this style of content. I extended wordpress to allow it to be more like a traditional Content Management System rather than just a fabulous blogging platform and paid special attention to making things as easy as I could for John so that he could get new content, stories, products, etc all up and published very quickly.

We could reuse all of the existing text based content but due to the new visual nature of the presentation, John had the unenviable task of recreating many feature images for his content so that we could use them in the various tiles – but it was worth it for the presentation of the site.

In the administration area, any additional fields that John completes while loading content all come with descriptions and suggestions for best use and it has made a huge difference to the amount of time he has to spend getting new content out to his sizeable audience.

E-commerce

A big part of Motionworks.net is the shop. John had pretty much created a one-stop shop for a huge range of motion graphics related products and we needed to come up with an e-commerce solution that worked easily. We looked at a number of options from self hosted e-commerce solutions to solutions integrated with WordPress and decided to go with WooCommerce.

WooCommerce is integrated with WordPress and, for the most part, works very well. John purchased a few WooCommerce add-ons to help make his specific instance work a little more efficiently and I made sure that we integrated the look and feel of WooCommerce into the new Motionworks theme.

Overall we’re quite happy with it and because it’s maintained and developed separately it’s one less thing we have to worry about.

Development environments and hosting

I developed Motionworks locally on my iMac and would periodically push updates out to a development site in my hosting network where John could review and make suggestions.

For the technical folk, the css for the site is compiled with the LESS css preprocessor and the marvellous Codekit app which handles all the compiling and browser refreshing – saving a great deal of time.

When it came time to launch the site, we attempted to run it at Johns existing hosting provider … but there were issues that we were encountering with peculiarities in that environment as well as ongoing headaches and performance issues that John had been having and were carrying over to the new site. So we made the call to move hosting providers and create an environment where we have more control.

I enlisted the help of a good friend of mine, Tim Philips, from rndgroup.co.nz and he created two hosting environments for us with digitalocean.com. One for the live website and a smaller one for our staging site. This way, I could run a local copy of the site, push new features and changes up to the staging site – and then push them from there into the live website.

One of the additional benefits having a dedicated staging server is that we can deploy and test new functionality and ideas for the site = as well as test out any new wordpress or woocommerce upgrades.

What’s next?

We’ve got quite a few things planned for Motionworks.net. We’re working to create a great community of information sharing, starting with some rethinking of the ‘Experiments’ section right through to creating various spin-off websites.

If you’re an After Effects or Cinema 4D user then you’re going to want to keep an eye on Motionworks.net over the coming months.

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>