Case study:

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.


  1. Increase sales online and offline
  2. Increase visitors
  3. Increase mobile visitors
  4. Optimize SEO and speed
  5. Update design
  6. Button to product page on online store (The feature I was asked to add)


researchI sat down with the stakeholder to understand what other new features might be worth implementing that weren’t thought of initially.

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.

mockupHigh Fidelity mockups: To make selling the concept better I usually have to jump directly to High Fidelity mockups in order to present the look and layout in as realistic a manner as possible.

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.

codeFrontend Development: At this point I go onto the initial breaking up of the design into sprites, images etc. and proceed to create a fully functional prototype in HTML, CSS and Jquery.

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


implementationUpon final approval I adapted the code for WordPress implementation using WP PHP tags on a local installation (WampServer). All the Javascript and CSS were minified for better performance with care to not remove media-queries. (YUI compressor)

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.

For better SEO I added Yoast’s WordPress SEO plugin, the AddThis Social bookmarking widget plugin as well as registered the site on Google Webmaster Tools.

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)


hugofroes Written by:

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *