I thought it might be interesting to write a short post about what I learnt from re-designing Graphic Tide’s website, but with the focus from a web developer’s point of view. You probably already know my role here at Graphic Tide from our about page, but for those who don’t, I’m the lead developer here and I love it!
The re-design was a big project but everyone here embraced it and we’re very pleased with the result. I want to describe why we’ve added stuff and taken other things away and how we accomplished a cleaner, consistence user friendly design.
When launching Graphic Tide we started with our first version of the site which we spent many hours putting together, tweaking and tweaking it again. It was a very clean and easy to use, which looking back pretty much did the job. We’re an ever growing company and with all our business coming through our website, the website itself should also reflect changes and trends in the industry too.
With that in mind we felt a fresh new design was needed with a focus on branding, website consistence and page loading times. Our first major task and most impressive change was our homepage.
Bigger, Better First Impression
We found that there was a lack of functionality on the homepage and not that just that, a lack of textual SEO friendly content. We decided to pull the slideshow because it didn’t really aid the user’s experience mainly because it was just a bunch of images, which was too much to take in on first visit.
Instead we’ve replace it with larger textual banner and now immediately allows new visitors instant feedback, explaining what we are and do. Removing the slideshow also improved the page loading speed and general response timings (especially if your using a low performance PC or have too many tabs open!). Removing the slideshow also left room for improved page semantics, mainly making use of HTML heading tags correctly throughout the site.
Next we added a large section underneath the homepage banner explaining how it all works, making use of short to the point sentences, clear call to actions and visually inviting graphics. Finally we added a t-shirt carousel, similar to the slideshow but with much improved JavaScript backend and one doesn’t automatically change unless the user clicks the navigation arrows. This means there’s no changes in the DOM without user interaction.
Power of Ajax
One of the pages that gets a lot of traffic is the submit t-shirt designs page. This page (and the code behind it) couldn’t keep up with the heavy traffic, mainly because of the various large image files that are being uploaded everyday, not to mention sapping server resources processing the images.
So to help improve the user’s experience we removed nearly half of the form’s unnecessary fields and changed how the images were uploaded to the site. We got rid of the old clunky uploader which gave no visual feedback to the user and instead replaced it with a smooth Ajax style uploader complete with a progress bar and better error handing and messages. Now you can start uploading your design whilst continuing to fill out the rest of the form.
Even when users submit the form and an error is found (maybe missed a field) the artwork doesn’t need to be uploaded again, unlike before. With the Ajax progress uploader, less fields to fill out and general improvements to the user interface, we’ve already seen a spike in submissions!
Super Sonic Product Pages
Website page loading times has been one of the main focuses with the re-design. Coupling this with cleaner, user friendly design was a challenge but I don’t think we disappointed. The first challenge was to identify the page performance issue and for that we used the trusted Firebug net panel.
We found the Facebook comments plug-in dragged on page load time and although loaded last and didn’t block anything else loading, it was enough to justify its removal. Not only that, we felt that that comment system should use third-party software. Unlike the blog where we do use similar commenting software (Disqus), commenting on t-shirts within Graphic Tide needed it’s own system.
So that’s just what we did. Now there’s no need to sign into Facebook and your Graphic Tide account to contribute, just use your Graphic Tide account and you’ll have access to all the features! To help this we’ve also upgraded our server so we’re able to handle more traffic, meaning we don’t have to rely on any third-party software to achieve tasks what we couldn’t do before on our older server from 2009!
Final Re-design Thoughts
The re-design has really opened our eyes that small changes can make such a big impact. Improving page loading times has seen reductions in bounces rates and longer engaging visitors. You would find it hard to imagine shaving 0.3 – 0.4 seconds off a loading page would make much difference, but it really does.
Re-designing has brought forward our brand to become friendlier, welcoming and stronger. Our overall design now keeps to a consistent theme and style as well as being reflected throughout other mediums like our email newsletters. It’s given us the drive to add even more features, build stronger existing functionality and provide an overall better experience for all our Graphic Tide fans! We well appreciate everyone who’s contribution so far and together we can continue to push art and design forward whilst helping each other along the way.
Hope you enjoyed reading this insight into the behind the scenes look at what we did to improve the overall user website experience for all our amazing t-shirt and art lovers out there. I would love to hear your thought so be sure to leave a comment below, we try and comment back on everything left, so ask away! Be sure to follow us on the usual social media networks Twitter, Facebook and Tumblr, it will be great to see you on there. Thanks again, and have a great day & keep designing!
