Web Design Before and After: 5 Common Web Problems and the Solutions to Fix Them

Katrina is one of my friends and colleagues over at the DreamTribe, so when she posted a note on Facebook asking if anyone could help her redesign her website I jumped at the chance. The reason: her website was outdated and difficult to maneuver, and I was having a hard time keeping my mouth shut about it!

Turns out, Katrina was well aware of her site design limitations. She knew she needed a change and thought about doing it herself, but web creation is a lot of work, even for an experienced web designer like Katrina, and she just didn’t have the time.

Thus began our redesign journey. 

How to turn an outdated and difficult to use website

into a work of art that attract clients

Before we jumped into redesign, Katrina and I took a peak at her current set up. She had an outdated html website she designed ages ago using one of her rose photographs as a banner. The blog was a separate site, hosted on blogspot.

The old site’s home page looked like this:

When you clicked a link, assuming you could tell the list of words was an actual menu, it took you to a page that looked like this:

The blog looked like this

Problem 1: Outdated and unbranded web design

Katrina’s site design did little to make her stand out of the crowd. Although the cream colored rose photo she chose for her banner is lovely, it didn’t capture the essence of Katrina’s creative muse.

As I see her, Katrina is colorful, fun, expressive and multi-faceted. The white rose is a classic image. Classic isn’t a word I’d used to describe Katrina. She’s too unique in the best way imaginable to be called classic. I wanted a photo that would capture her depth and wisdom while celebrating her creativity. I also wanted a color scheme and image that would attract her ideal client. With this in mind I started investigating Katrina’s photography portfolio.

Solution 1: Creating a design that makes a statement (and appeals to your ideal client, too.)

Katrina is a remarkable photographer. She portrays images in a way few people do. The vibrant combination of color and composition make her photographs exceptional. It only seemed natural to use one for her web banner.

Choosing the right color palette

I knew one of Katrina’s favorite family of colors was in the lavender/purple hue, and I also knew her favorite flower was lilac. Luckily, these colors and images work perfectly for her brand, so I decided to incorporate them into the design.

After experimenting a bit, I decided on a large lilac photo, created a mock-up for Katrina and showed it to her. She liked it, but something wasn’t quite right. She couldn’t say what, exactly, so I had a bit of a challenge figuring it out (this is very common in web design).  All she knew was that it wasn’t right and that it had to do with the photo.

Symbolism doesn’t always translate to a great brand

Katrina discussed her site ideas with a friend who suggested she use a different photograph as inspiration. It was an ocean and beach scene, but very subdued. Katraina talked about how it was perfectly symbolic because it captured how she works in the depths of the unconscious with dreamwork.

I was not convinced. The photo, although lovely, was ubiquitous and uninteresting as a brand, even clichéd. I gave Katrina my honest opinion and she agreed, so I revisited her lilac photos and chose a different one.

The perfect design works for you and your ideal client

This time I chose a lilac photo with more depth. It had a dark background and smaller petals. I did some photoshop magic, making it appear as though one petal popped out over the graphic that held her name and tagline, and voila! Katrina loved it. (I love it when it’s that easy!)

The color palette and imagery work perfectly for who Katrina is now and for the work she intends to grow in the future. The imagery is earthy, fun, deep and playful, all at the same time. Just like Katrina.

As an aside, it isn’t always a great idea for a website to reflect the owner so completely. Fortunately for Katrina, the colors and imagery that best represent her also work perfectly for her ideal client and message.

Problem 2: Difficult menu placement

One of the biggest problems with Katrina’s original site was that the menu was at the bottom of all of her pages, except the home page. But many web visitors don’t scroll, so with Katrina’s old site a lot of people would never have found her menu.

Solution 2: Top horizontal or vertical sidebar menus

All of your important information needs to be easily accessible “above the fold”, a newspaper term which translates into “before the bottom of a monitor” in web design. Unfortunately, all monitors are not created equally so we have to adjust for the lowest common denominator (or close to the last).

The best place for a menu is at the top of the website, just above or below the banner, or down one of the sidebars.  This is where people expect to find the menu, and since they are only likely to click a menu item if they can see is, this placement is important.

Problem 3: No contact page

Another problem with Katrina’s old site was that she didn’t have a contact page. Her email address was buried at the bottom of each page, but since people look for a “contact” link on the menu, and since most don’t scroll, visitors were unlikely to find her email address.

It’s also a common mistake to bury the contact information by placing it as a sub-menu item under “About Us.” Don’t do that.

Solution 3: Button / link on main menu that says “Contact”

If you want people to contact you, make sure the contact information can be easily accessed by a “contact” button or link that is part of your main menu system.

Problem 4: Too many items on the main menu equals chaos and confusion

Next we had to figure out the navigation system. She had way too many menu items and no obvious offer. A visitor would be confused trying to figure out what Katrina was all about.

Solution 4: Umbrella words for the main menu with a submenu for services

After creating the obvious pages:

• Home (Katrina’s blog)
• About
• Contact

We were left a long list of words from her old menu

• Art
• Photos
• Intuitive
• Dreamer
• Speaker
• Teacher
• Writer
• Events

Phew. That’s a lot of stuff on one menu.

After a bit of discussion and reflection we eliminated:

• Art
• Photos
• Events

Instead, we added a sample of her photography throughout her site and blog, and added her events to the other pages.

We divided the remaining pages:

• Intuitive
• Dreamer
• Speaker
• Teacher
• Writer

into two categories with submenus

• Need help? (Which could also say “services”)
  • Dreamwork
  • Intuitive help
• Hire Me
  • Speaking
  • Teaching
  • Writing

The first category is for one-on-one services. The second category is for public gigs like speaking engagements and guest blogging. This menu system helps simplify the website, making it easier for the reader to connect with what’s most important first instead of being bombarded by everything at once.

Problem 5: One blog + One website = too much work!

One of Katrina’s main goals was to have a combined website and blog, a potent combination that will help her attract web traffic. (That is a topic for another month.) It’s a safe bet that Katrina created her old website in the olden days when blogs were separate systems from websites. (Yes, I know. Trends move very quickly in web world.)

Solution 5: Creating a combined blog and website for simplicity

If you want to have a blog or articles, using a system like WordPress is an easy solution because you can integrate both into one spot, enhancing visibility and search engine results in Google.

Summary

Katrina finally has an integrated blog and website, one of her immediate goals. It’s a system that works well today, but will easily grow when the time is right. When she returns from her trip, Katrina and I will delve back into her brand, creating service packages and a tagline that portray her lifework path.

This project took about 4 weeks from start to finish, truly one of the easiest websites I’ve ever designed and also one of my favorites!

Website Worksheet

Down load this web worksheet to assess your own website so you can make necessary changes to help you grow somewhere greater!