Fitproshop

Challenge

Fitproshop is an online shop which allows FitPro and non FitPro members to buy fitness items at a discounted rate. It was an opportunity 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.

Analysis

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 800×600 to 1024×768 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.

1. The logo is clearly at the top in its own defined space.
2. The top menu also has its own defined space and more importantly there is no “register” link.
3. The shopping cart is cleverly placed above the actual content with its own defined space too.
4. The breadcrumb trail’s space and presence is strict, and doesn’t move or change anywhere on the site.
5. All the categories have sub-categories but these are collapsed until a user clicks on the category.
6. 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.

1. The breadcrumb trail is used as a map of where the user is on the site and where they have come from.
2. A large image of the product. (Personally I think its weird that people who design online stores think small images are good?)
3. The title of the product with its own space as well as the price and description.

Old layout of the store

From the picture above you can see the sections I highlighted.

1. 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.
2. 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.
3. I don’t believe this grey menu did anything for the store and a breadcrumb would much better.
4. The menu is displaying all the categories as well as sub-categories, which I think is too much information for a user to take.
5. The right-hand column is taking up vital space with elements smaller and placed else where.
6. The promotional banner is placed inside a three-column layout, fighting for attention from the left-hand menu and the free delivery message.
7. Too many messages trying to be given to the user. All that needs be is image, title and price. Simple.

Design

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. 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

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.

Product page

Important factors to take note on:

• Images are 250×250 (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

Development

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.

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 V-Model methodology to writing code.

I used this methodology 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).

I only had to write 9 lines of code for IE 5 to look exactly like it would with every other browser, IE 5.5 needed only 3 lines of code. IE 6 surprisingly didn’t need any fixes but IE 7 did (just a couple of lines)….

SEO

Apart from the semantic 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, '&amp;', '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.

This greatly improved the SEO as a search bot (i.e. googlebot) could not only find content within the title, h1 but the URL too.