5 ways I improved The Travelling Souk website

My wife runs an online marketplace for unique and stylish gifts, The Travelling Souk, and for the past few years it has been in desperate need of a tidy up. With one thing or another finding time to do this has always been difficult, but last week I finally stopped making excuses and made a few simple but effective changes.

Page speed

On the whole connections are getting better, but there has been a real trend to create larger and larger web pages with lots of features and bloat. At The Travelling Souk we were guilty of this too and the home page with it’s carousel of big images and tabbed lists of products was weighing in at around 1.3MB – huge by anyone's standards. Simply by reducing the number of assets on the page I was able to half the page weight and with some other optimisations (removing unnecessary code and cruft) the new home page weighs around 360MB loading around 1.2seconds quicker on average. These principles have also been applied to other key templates throughout the site further reducing the initial load time. The work in this area has only just started and there's a lot more to optimise, but I think this is by far one of the most significant improvements made in the past few days.

Version control & deployment

My wife took over the site 2 years ago and sadly it has never had any version control in place. Deployment used to be via FTP and whilst developing, testing new features or fixing bugs it was usually done by ‘going commando’ and possibly making the site worse before it was better. As of last week I introduced GIT and in addition to this set up a staging server. To improve the deployment process I set up Capistrano so that deployment is now quick and simple.

Typography

I find it difficult to blog about design as there is always more I want to do. However, one of the issues the old site faced was extremely small font sizes – this used to the trend, and this is/was an old site. By simply bumping the font size up a few px (yes, we still use px for now) the legibility was instantly improved. I also switched the serif font from Georgia to Kepler from TypeKit. This typeface handles numbers much better as the site uses a serif face throughout for prices. There is a lot more I want to do with the typography on the site, but with limited time these simple tweaks have had a great impact.

Remove distractions, improve calls to action

With any online shop the ultimate goal is to encourage people to checkout, right? The shopping basket used to contain around 40+ links to other products and gift ideas, along with a really tiny link to ‘checkout’. I stripped this away and made the checkout button twice the size so its now easier for people to see what they have in their basket and what to do next. We still keep a few related products on the page but they have been pushed down so that the focus is on what they have already committed too. I also applied the same thinking to the product page so its now much easier for people to actually buy stuff! Its early days but I feel this is going to lead to a much higher conversion rate.

Development workflow

I’ve already mentioned getting the site on to GIT and using Capistrano, but another great improvement this past week has been the introduction of Gulp and most notably SCSS. I’ve been using SCSS for around 2 years now, but having inherited this website (I was never involved in the original design & build) it was kinda funny coming to a project that didn’t use a CSS precompiler. But that’s one of the things I love about SCSS, by simply switching the file names over to ‘.scss’ you can still use the existing code but then introduce the power of SCSS as you start to refactor. I also decided to take this opportunity to check out a new tool, Gulp and followed along from this great tutorial to get it all set up. Ive used CodeKit, Mixture, compiled SCSS from the command line and used the Rails Asset Pipeline before, but there is something very cool about Gulp and I’m hoping to use it more in the future. I never jumped on the Grunt bandwagon, not because I don’t like it, just never had the need until now, and in this instance I thought I’d check out Gulp – so far very impressed. Whilst these changes probably have no direct impact on the front-end (apart from minification, concatenation and image optimisation – hang on that's pretty good!) they have certainly improved the development workflow which will lead to more work getting done and a better site in the long run.

What’s next?

There’s still so much more to do, I have really only scratched the surface with the changes over the past week. Along with main things I mentioned above I have started tweaking the overall design, however we have decided that the next logical step is to go responsive and start from a mobile perspective. Hopefully this time it won’t be another 2 years before I make the next change!