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.
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.
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.
In 2009, the two brothers sold the business to a fellow scooter lover. Immediately, there was a desire to redesign the site.
After 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:
- 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.
The design would evolve through three phases:
- Logo Design
- Masthead Design
- Page 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.
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.
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.
One 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.
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.