Design Process for WW2 Quartermaster

If you’re thinking about getting a website for the first time or considering a redesign or update yet aren’t entirely familiar with the process, this post should give you an insight into the steps involved. If you’re already familiar with the process, hopefully, you will see something a little bit different.

WW2 Quartermaster hired me to create a website which primarily helps people locate and visit their store and also serves as an eCommerce outlet for their business.

Discovery and Research

I think this is probably my favourite part of the job. The discovery and research not only involved finding what features and functionality the client wants, mood-boards and delving into the genre but more importantly meeting Angela and Carl and finding out what makes them tick.

We also looked into which eCommerce would be most suited to their needs. After going through a couple of ‘traditional’ packages which were fairly cluttered with quite complicated admin areas we decided on Shopify. Easy to use, no complicated installation process and probably my favourite eCommerce system to design for.

Wire-Framing

WW2Quartermaster Wireframes - Home Page WW2Quartermaster Wireframes - Find Us
WW2Quartermaster Wireframes - CategoriesWW2Quartermaster Wireframes - Product Page

With the requirements set, I went away to come up with the wireframes for the basic layout for the key areas, home page, the important “Find Us” page, category and product views and finally the shopping cart. These were quickly approved by Angela and Carl.

This important step gives a clear visualisation of hierarchy and layout without distracting visuals such as colours, typefaces and imagery. This helps both myself and my clients to focus on the layout without getting caught up in details too early in the process.

Design Mock-Up

WW2Quartermaster Visuals - HomeWW2Quartermaster Visuals - Find UsWW2Quartermaster Visuals - CategoryWW2Quartermaster Visuals - Product

With the wireframes approved, it’s time to create something a bit more visually stimulating. These flat comps are still a guide at this point with plenty of room to tweak elements either at this stage or during coding. They also don’t provide much indication of how the site will react to interaction as they are only flat “paintings”.

I’ve been experimenting slightly with this part of the process on other projects, including skipping it altogether and producing comps straight in HTML allowing the interaction side to be seen at this stage. I still feel more comfortable creating these visuals first as I find it quicker to do it this way then code out the HTML afterwards.

Coding, Set-Up, Content and Testing

I take back what I said earlier. This is my favourite part. This is where the work really starts to ‘come to life’ and shows exactly how it will really work for the end user.

For this project the content was provided at a really early stage which was great for everyone as it allowed us to see how it would work even at the wire-framing stage. At this stage the content was formatted and given its hierarchy as decided earlier on. This is where the interactive elements were really introduced, luckily matching the expectations of the clients first time round!

Once Angela and Carl were satisfied with the way the site looked and worked, it was time to test. Mock products and categories were to check they appeared and behaved as they should. The PayPal account was configured and checked and a few test orders processed.

Hand-Over and Continued Development

With functional testing complete and everything working nicely, it’s time to hand over to the client for them to add their products and categories as they see fit. Before leaving them to it I made sure they were happy and comfortable with this process.

This is still not the end of the project by any means. User behaviours have to be monitored through Google Analytics to ensure the website is really working for the right people. Abandoned carts need to be followed up to find out why they were abandoned and to fix the issue if needed. I have always believed the best method of user testing is to let users actually use it themselves in their own environment without really knowing they’re being watched. It’s human nature to do things differently or ‘as expected’ when we know we’re being monitored. This skews feedback and will never really get things fixed.

Unfortunately, although I’ve finished my side of the project, the website isn’t quite ready yet but as soon as it is, I’ll post, tweet and probably Facebook about it, so keep checking those feeds.

The Shameless Plug…

If you’ve got this far through the post you must have found the design process quite interesting! Why not get in touch with me and find out first hand how it feels to get the website you really want.

  • http://www.destinsol.com/ Janice Crocker

    Great tip! I will add this site to my bookmarks.

    Custom website Design