Fitproshop Redesign
Table of Contents
Details
- Date Completed:22 March 2007
- Days/hours spent:17 days, 4 hours
- About the company:Fitness Professionals
- Software used:Photoshop CS, TextMate, Flash
- Tag:CSS, Javascript, SWF (Flash 6 Actionscript 1), XHTML
Currently working on…
Lots of freelance and e-commerce projects.
Latest Work
Search Portfolio
I designed and hand coded the XHTML/CSS, JavaScript and SEO for this website as FitPro's Middleweight Web Designer.
1. Introduction
Fitproshop is an online shop which allows FitPro and non FitPro members to buy fitness items at a discounted rate. It was an oppounitunity for FitPro to shift their sells to an online format, which would make things easier to update and maintain. Products like BODYPUMP® kit, DVDs, books, weights could now be brought online.
Nike is one of FitPro's main sponsors (at time of print) and they wanted to sell their clothes on our store to all consumers. They wanted to bring some life the store, as when it was first launched a proper design was not implemented. My task was to redesign the shop from the ground up.
2. Design
In my mind, a redesign might be more difficult or easier depending on techological factors. So I had to consider this factor when designing.
Where to start?
I started by looking at the current design; trying to idenfiy the main areas and how it would be possible to simplify things. As the current website was filled with too much detail. It seemed like an overkill of ideas and details, all trying to fit through the same door.
Topshop, leading class in layouts
My girlfriend loves this store and they recently went from Flash-based to HTML-based website. A good move in my eyes! Now when I visited this site I noticed they changed from 800x600 to 1024x768 real estate, which I thought was a brilliant idea. As it allows for more white space, bigger images, more real estate for products. I've highlighted some of their layout blocks that I thought would benefit the fitproshop.
Topshop home page layout.
- The logo is clearly at the top in its own defined space.
- The top menu also has its own defined space and more importantly there is no "register" link.
- The shopping cart is cleverly placed above the actual content with its own defined space too.
- The breadcumb trail's space and presence is strict, and doesn't move or change anywhere on the site.
- All the categories have sub-categories but these are collapsed until a user clicks on the category.
- A huge promotion panel that will definitely grab the user's attention.
You might think that the topshop layout is just good practice but one would be surprised at the lack of inconsistency across websites. The website's layout has strict and defined spaces for elements that will be of use to the user and while the rest of the content can vary.
Topshop product page layout.
- The breadcumb trail is used as a map of where the user is on the site and where they have come from.
- A large image of the product. (Personally I think its weird that people who design online stores think small images are good?)
- The title of the product with its own space as well as the price and description.
Old layout of the store
Old fitproshop home page layout.
From the picture above you can see the secitons I highlighted.
- The top menu which was used across the all FitPro websites, but now they had to sell items to all consumers. Hence, it would be useless for customers coming from a search engine.
- The logo was in a good place at the top. But I just felt the top part of the website doesn't impact it should. The menu in this seciton could be moved above the logo since menu in section 1 would be got rid of.
- I don't believe this grey menu did anything for the store and a breadcumb would much better.
- The menu is displaying all the categories as well as sub-categories, which I think is too much information for a user to take.
- The right-hand column is taking up vital space with elements smaller and placed else where.
- The promotional banner is placed inside a three-column layout, fighting for attention from the left-hand menu and the free delivery message.
- Too many messages trying to be given to the user. All that needs be is image, title and price. Simple.
New store
Home page
By using what I learnt from the current fitproshop's design faults and the topshop layout I created this first concept of the shop.
Fitproshop redesign first concept.
Using the classic blues of FitPro branding, the design lacked some defination and seemed somewhat cold and empty. But I knew I was heading in the right direction.
Important factors to take note on:
- One price (non-members price) to stop confusing users
- Four products per row instead of two
- No buy or more details link
Fitproshop redesign second concept.
Our Senior Web Designer mentioned about using orange, which is a complementary colour for blue. I planned around with some shades of orange and toned down the light blues of the buttons to darker tones. So they wouldn't stand out so much and lay comfortably on the screen.
Fitproshop redesign third concept.
There was still a missing a visual aspect from the design. We looked over the design and came up with the idea to include important categories onto the home page.
Cateogry page
After we found the direction of the home page. I created a concept for the cateogory page.
Fitproshop redesign category page.
The previous store didn't have banners for each cateogry. However, I thought it would be a good idea; a visual reference, a pointer, a pleasant image to add to the professionalism and trust we give off to the user.
Product page
After finishing the category page, I moved onto creating a concept for a product page.
Fitproshop redesign product page.
Important factors to take note on:
- Images are 250x250 (will hopefully be that size)
- Image gallery on the right (using some kind of JavaScript script)
- Two price guides, clearly using FitPro blue for FitPro members price
- Reviews so that other users can read what other users think of a product
Nike
Since Nike would be joining the fitproshop, it was important to design a concept category page for them.
Fitproshop redesign Nike concept page. Note: this is a concept and does not display any products which might of been/are being sold.
A problem we encountered, was with Nike's method of categorising their products. We wanted to have products displayed male/female and according to what type of product they were (top, bottom, trainers, etc). However, Nike have had their products categorised by what the product was used for. So I need to redesign the page accordingly.
Fitproshop redesign Nike second concept page. Note: this is a concept and does not display any products which might of been/are being sold.
3. XHTML & CSS
I was told the fitproshop website used CFwebstore shell, which consisted of hundreds of files meshed together. Luckily, our Senior Web Designer (who was involved in implementing the first shop launch) had converted all the table pages into proper XHTML. And made my job a lot easier when I was going to have to sliced my Photoshop files up.
XHTML
I wanted to convert to XHTML Strict DOCTYPE but because the website used FCK editor for writing descriptions of products. This editor makes some mistakes writing XHTML and so I decided to use the Transitional DOCTYPE.
CSS
I scraped the CSS already there, as I didn't want to go on a mending mission trying to fix 1,200 lines of CSS code. I also thought it would be a good idea to apply the CMMTV methodology to writing code.
CSS structure using CMMTV methology.
I used this metholodogy right from the beginning which allowed me to write and maintain code which was around 95% compliant (apart from a few fixtures for IE 5 and 5.5) most browsers (IE 5.0 - 7.0, Firefox, Safari, Opera).
IE 5 fixtures
div#gallery img {
border: 1px solid #ccc;
padding: 4px;
float: left;
}
div.curved_bg { width: 630px; }
form#registration_form fieldset, form#change_password fieldset, form.curved_bg fieldset { width: 620px; }
form#registration_form ul#membership { display: none; }
div#column_right { width: 265px; }
You can see that I only had to write 9 lines of code for IE 5 to look exactly like it would with every other browser. The way I could do was by writing CSS specific code (div#id_tag div.class_name), using CMMTV methology (file splitting) and the V-Model (systems model). All this really means is that you must test every change on all browsers while splitting one's CSS into managable pieces.
IE 5.5 fixtures
form#registration_form, form#change_password fieldset, form.curved_bg fieldset { width: 620px; }
div#column_right { width: 265px; }
div.curved_bg { width: 630px; }
IE 5.5 needed only 3 lines of code.
IE 7 fixtures
.clearfix { display: inline-block !important }
form > h2.form_tabs { margin-left: 0px; }
div#sidebar { margin-top: 4px; }
ul#breadcumb li { margin-top: 16px; }
div#banner > object { margin-bottom: 0px; }
IE 6 surprisingly didn't need any fixes but IE 7 did....
4. Prototypes
When I first started creating the HTML for the fitproshop. I decided to copy the HTML already there and work on that separately. I then handed over the HTML prototypes for the developers to integrate into the system. What I think helped the developers the most was commenting sections of the HTML and its purpose.
5. JavaScript
Its all about unobtrusive JavaScript at the moment and I couldn't agree more. The importance of page loading and server-side processing is more important then using JavaScript to build foundemental components of a page. This way, you can use JavaScript to enhance a page and not stop it from working.
jGallery
I had a long search for a decent plugin that worked with the jQuery framework and on most browsers. I got some plugins that worked beautifully but not with Safari and vice-versa. So I decided to write one myself... How hard could it be?
The basics
I started by writing some HTML which wouldn't break if JavaScript wasn't enabled.
<div id="gallery">
<div id="jgallery_holder">
<img src="779.jpg" alt="Aerokidz/Aerojam™ Equipment Pack" />
</div>
<ul id="thumbnails">
<li><a href="fc102.jpg" title="Cones"><img src="sm_fc102.jpg" alt="fc102.jpg" height="50" width="50" /></a></li>
<li><a href="fc015.jpg" title="Diceball junior"><img src="sm_fc015.jpg" alt="fc015.jpg" height="50" width="50" /></a></li>
</ul>
</div>
Now using the array of ID's and sementic XHTML I could use jQuery's power.
The power of jQuery
In about one day development time. I got created the basic shell of the jGallery. Which would find out if the user clicked on a link within the thumbnails list. Then it would preload the image clicked on, create a div, fade out the old image and fade in the new image. If the image was still loading, it would display a loading alert till the image loaded. It would also change the colour of the border of the thumbnail so the user would know what image they clicked on.
Scrolling
The help page had lots of information that would help the user with information about delivery, returns and credit cards accepted. I created some links which would jump to each header that it refered to. Using Interface scroll plugin for jQuery, I applied a scrollto function when the user clicked on any of the those links.
$('a.scrollto').click( function() {
var href = this.href;
href = href.replace(/^http://[wsd./-?=]+#/, '');
$('#'+href).ScrollTo(800);
return false;
});
Some browsers would add the URL of the page you were on if the href of an anchor tag wasn't refering to an actual page. So <a href="#gotoPage">go to page</a>. So I used a regular expression that would remove this data as ScrollTo() function wouldn't work properly otherwise.
6. SEO
Apart from the sementic XHTML, I wanted to apply some kind of SEO optimisation. From my previous project the FitPro Spring Convention 2007, I knew it was possible to use /index.cfm/category/article-name URLs. I didn't understand the CFwebstore as much as the developers, so I applied basic regular expression to the categories, sub-categories and product names.
<cfset formatted_text = replace(nu_text, '&', 'and', 'all')>
<cfset formatted_text = replace(lcase(REreplace(formatted_text, '[^a-zA-Z0-9]', nu_replacement, 'all')), '--', '', 'all')>
This would replace any & with and's and then replace anything in the string which wasn't a letter or number with a dash. The variable formatted_text was then placed inside the link. So a product name as Jazz Fusion DVD, would appear /index.cfm/jazz-fusion-dvd/?fuseaction=product.display&Product_ID=1110 in the HTML.
