My company has a TV shopping brand and a few years ago they asked me to put together a site to showcase the videos of the brand so that interested user would be able to view the videos.
The site has gone through 2 major overhauls since it’s creations. The first was moving from a flash site with FLV to a WordPress site with youtube videos and the latest overhaul was just over a year ago (June 2013).
In this case study I will be discussing this latest modification because its had a substantial upgrade and I set up very clear objectives of what I wanted to achieve with UX/UI being a strong focus. I was asked to add a feature and I took the opportunity to rework the site fully.
- Increase sales online and offline
- Increase visitors
- Increase mobile visitors
- Optimize SEO and speed
- Update design
- Button to product page on online store (The feature I was asked to add)
I took into account our client’s feedback received through our client service center.
I researched what our competitors might be doing as well the latest trends for video sites.
I collected the data from our Google Analytics and Youtube channel accounts.
We ran various tests on our site to verify its performance and SEO scores.
Tools: Google Analytics | Youtube | Google Speed Test | Alexa | Google page rank
Analysis showed that although clients were generally happy with our product, we could better our results in sales by connecting the online store and the video site.
Speed and ranking tests were below par with best practices and the site should be responsive to reach a wider audience.
Mockups: I usually like to layout my designs on paper using sketchsheets from Sneekpeekit. I sketch the layout in pencil to be easy to edit and then move onto ink pen when I’m happy with the general structure.
In this case I decided to give the videos more room to breath and become the major focal point of the page and reduced the amount of information presented on the page.
I tried to simplify the general design and look for a more FLAT UI with focus on call-to-actions and started from a mobile first concept to keep content to a minimum.
I usually present the various options in static images: Desktop, Mobile and interactions.
The colour scheme and fonts were chosen based on logo colors and complementary colors/fonts.
I Used colour to create contrasts and division of contact.
For all intents and purposes the site would be ready to go live however it would be too complex and painstaking to update and maintain.
Tools: Paper mockups | Pencil | Pen | Photoshop | Font Squirrel | Dreamweaver | HTML | CSS | Jquery
Theme packaged and readied for upload.
I first uploaded the new theme to the server using FTP (Filezilla) and then imported the database with the new configurations and regenerated the thumbnails to cater to new image measurements.
The site was down for only 1 hour during this update.
Tools: Wampserver | Dreamweaver | WordPress | PHP | YUI Compressor | Winzip | Filezilla
Speed and SEO
In order to further speed up the site GZIP compression was added to the server as well as the WP-DBManager.
Tools: WP-DBManager | Addthis | Yoast WordPress SEO | Google Webmaster tools
141% increase in online sales
47% increase in visitors
156% increase in mobile visitors
Google speed test (mobile) – 38/100 to 79/100 (+41)
Google speed test (desktop) – 75/100 to 89/100 (+14)
Google Page Rank – 4/10 to 5/10 (+1)
Alexa Rank – 12.381.328 to 2.152.549 (+10.228.779)
Youtube subscribers – 25 to 78 (+53)