Gene Lu

Role
CSS, HTML, RTML (Yahoo!'s ecommerce solution), Strategy

Design Objective
Best Buy Baby, an ecommerce site that has been around for over 5 years selling baby products, needed a site overhaul, both aesthetically and structurally. I worked with web designer, Susie Lee on creating a solution that would: increase sales by upselling related products, SEO optimizing the site for search results, empower users to quickly find what they are looking for, and to create a sense of credibility with a more refined design.

Strategy
Prior to going straight to design and build, we first reworked the structure of the site. Originally, all the categories were placed in a left hand column in no particular order. There was an apparent way to group the navigation elements to help make finding things easier. After spending a few days going through over a thousand products, with the help of post it notes, and some research, we came up with 7 categories, each with their own subcategories.

Before: Organizing Site Structure and Content

After: Organized Site Structure and Content

The resulting main navigation

After our clients approved the navigation, we moved to information design. Based on site analytics, over 60% of the site's traffic came from search engines, while 17% were from referrals, leaving only a small percentage entering directly through the home page. With the assumption that this small percentage coming through the home page were people browsing the site, we opted for a horizontal navigation. This allowed all navigation elements to appear above the fold for easier scannability.

For the rest of the site's traffic (the searchers), navigation beyond the home page took on a vertical format. This helped to open up the content well to display as much relevant information as possible.

Horizontal Nav on the Home Page

Vertical Nav on the Category Page

Build
Before taking on this project, I had no clue as to what RTML, Yahoo!'s proprietary ecommerce platform, was all about. I spent about a month going through the manual and understanding as to how everything worked. I also had to make sure that I understood how our clients interfaced with the CMS so that their population process would not be affected with the site's redesign.

On the product pages, there were a couple of scenarios that had to be accounted for; what happens when there are no related products?, what happens when there is no "more information", etc. All these questions were addressed when I built out the site via RTML, HTML, and CSS.

Other functionalities included switching the product image based on the item selected via drop down menu on the product page. This was done with javascript and a bit of RTML manipulation on the backend. This additional feature enabled visitors to go through the colors of the product without having to scroll down the page. It also kept the "Add to Cart" button above the fold allowing for quick conversions.

Switching colors of the product via drop down menu

One last major point addressed during the build of this site was the optimizing of the code on the backend. Like some archaeic CMS' out on the market, Yahoo's ecommerce platform outputted a lot of poor code (<table>, inline <font> tags, etc), creating an SEO nightmare for search engines. As a result, I had to rebuild all the templates using proper HTML along with CSS that was compatible across most broswers including Internet Explorer 6.

Post Launch
So far, sales numbers have been going up and page views have been dropping. This is a direct result of an optimized navigation along with the integration of a "related items" section. I'll have better numbers within the coming year as more information is gathered with the new site.