Redesign Project: Second City Scooters

I recently had the opportunity to work on a fun project; the redesign of a small business site that sells motor scooters. The most rewarding part is hearing of customers praising the website. That’s way kool.

Former site

To understand the old website, you had to understand the history, short as it was, of the business.

Two brothers, while visiting Italy on vacation, fell in love with motor scooters and the lifestyle. When they returned, looking for scooters, they were shocked at the prices. So they started Second City Scooters, selling motor scooters for around half the price of more well-known brands, like Vespa. They opened a storefront business and created a website.

Second City Scooters (iheartscooters.com) circa 2008.The site, hosted on Go Daddy’s Website Tonight platform, leveraged a template that offered limited customizations. The selected template had a grunge feel, with ornate embellishments. It was customized with an image of a scooter in a graphical window at the top of the page. It was a nice, but limiting design. That’s where the endearing qualities ended though. The content seemed to be placed randomly on the page, with no apparent organization, all of it centered. The most noticeable issue was the level of informal tone used with the textual content. In my opinion, either you loved it or hated it; there was no chance of converting someone on the cusp.

Redesign

In 2009, the two brothers sold the business to a fellow scooter lover. Immediately, there was a desire to redesign the site.

Original LogoAfter contacting my partner, Linda Ryder of Ryder Web Design, we met to discuss the goals for the business and web site redesign. A previously unused logo was selected for the new business. The client also had a color scheme in mind, dominated by dark red brick and golden yellow colors.

Walking away from that initial client meeting, several points drove our primary design decisions:

  • The logo, with a retro, curvy feel, was to drive the overall website design. The logo also had to be colorized to stand up to the bold color scheme suggested by the client.
  • There were two elements of the old design we all liked, the ornate frame around the scooter, and the sunrays. The latter would fit into the new design.
  • The tone of the site would be fun, yet business professional. And throughout, we would push scooter love.

The initial idea was to use the following IA:

  • Scooters
  • Accessories
  • Service
  • FAQs
  • About Second City Scooters
  • Contact Us

With scooters, due to the initial need to have the site up & running in two weeks, we felt that a simple listing page of all the scooters grouped by power level would be sufficient for the first phase. However, after the goal date was extended, I decided that a listing / detail page approach would better overall, not only for search engine optimization, but the user experience on the scooter detail page itself.

Design Approach

The design would evolve through three phases:

  • Logo Design
  • Masthead Design
  • Page Design

Logo Design

Not so much logo design, than logo customization. Besides coloring the logo, the client requested a “heart” to be used with the scooter. After attempts to place the scooter inside a large heart, we agreed upon placing a heart on the scooter itself. We spent double the planned amount of time on the logo design, with many iterations. The final logo was selected by the client and is also used at the brick & mortar store.

Masthead Design

scs_masthead
As the most prominent portion of the design would be the top center masthead area, we broke the masthead out as a separate design phase. The Scooter was to be at the forefront of the masthead. Through discussions between my partner and the client, there was a desire for sunrays like on the old design, and a city skyline to be incorporated into the masthead design.

Shortly after those discussions, my partner Linda Ryder sent me a concept for the masthead, which was perfect for the design. We submitted the masthead design to the client, who immediately approved it.

Page Design

With the masthead design finalized, we could finally begin to design the page around the masthead & logo. The red border that started with the masthead to emphasize the curved landscape of the skyline was carried on to separate the content area from the page background.

A design like this can easily become boxy in nature, even with the curves. As an example, the initial concept for the homepage presented five blocks of content. We ended up using other graphical touches to separate and divide the content, rather than box them in.

scs-detailOne of the more interesting page designs was the scooter detail page. Besides a description and scooter specifications, we wanted to show images for the scooter; different views as well as color options. We used a script that degrades well, while providing the desired experience for fairly recent browsers.

Summary

The final site is web standards compliant, using tableless CSS methods for layout. It is optimized for search engine ranking as well as persuasiveness for humans. A lot of hard work in a short amount of time resulted in a website that exceeded the expectations of the client, pleases customers enough to mention the website at the brick & mortar store, and drives an increasing amount of traffic on a daily basis.

Thanks goes to Linda Ryder at Ryder Web Design for a great partnership and George, Donna & Emily at Second City Scooters for being a great client.

scs_after

Advertisements

2 Comments

Filed under Case Studies

2 responses to “Redesign Project: Second City Scooters

  1. Geraldine Lally

    Love the site. Great work.

  2. Dennis Deacon

    Thanks! I really enjoyed working on this project.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s