Designing the FPL Website

FPL and Associates, Inc. is a Civil Traffic design firm that has operated out of Orange County, CA for 25 years. Last year, they purchased a website, and it looked something like this.
The Previous FPL Website

I do like the very simple appeal of their original site. In an instant, you can tell that they’re a small business, which is a boon and a bane depending on the vertical (market/industry) that the business is in. Some people like knowing that the people they’re working with a local and small business because they don’t want to work with big business.

However, in the case of FPL and Associates, Inc., it’s a good idea to update the website to let their clients know that they are doing well in a difficult industry and a difficult economic time.

FPL and Associates, Inc. told me to design something, so I drafted this for them with boilerplate information and stock photos.

A Draft I Designed of the FPL Website

A few considerations I had when I designed my original draft:

  • space for SEO
  • a more modern website
  • the grey and orange from their logo as their color scheme
  • less webpages for easier navigation – what you see is what you get.
  • usability work on mobile devices.

Even though the client was not too worried about being 100% mobile ready, I wanted to make it partially usable.

To make it mobile friendly, I used a slider that’s jquerymobile friendly (Camera by Pixedelic), allowing users to transition between slides with a swipe. I also removed dropdown menus because they are not easy to navigate and difficult to work on mobile without jquerymobile. I did not make their site responsive because that was not a concern they had.

In the design I created, I had the mobile ready slider with captions, a mid-section for additional information and SEO, and a footer for additional information. From there, I worked with FPL and Associates, Inc.’s team to create something that was more them.

FPL Website - LiveThe final product looks similar but has a lighter grey tone rather than the dark one I originally designed. It also removed the mid section, which lowers the chances of it being ranked with SEO.

But something to consider for each client and project is whether or not a certain type of marketing has a good ROI. It’s good to be honest in business because it’s about relationships, and in the case of FPL & Associates, Inc., SEO and SEM are not needed in their industry. Their marketing is based on networking, references, previous project successes, and proposals to get projects from their clients.

In the final site, they added additional pages to their website as well as had me flatten their logo. In my original design, I had only 7 webpages to keep it very clean without dropdown menus:

  • Home
  • Civil
  • Traffic
  • Projects
  • Clients
  • About Us
  • Contact

When they wanted more pages under each section, I opted to go with submenus on each page rather than a dropdown. This tactic provides a system that guides the site-user through their site rather than being inundated with additional options from a dropdown menu. For example, when a user clicks Traffic, they are taken to a new page that has the additional options of: Caltrans, Design-Build, and Municipal.

This tactic makes it easier for the site-user to navigate without the crippling feeling of choosing which of 20 pages to navigate to first when they only have 6 options.

FPL Project WebpageThe Projects page uses a filtering system that allows for easier navigation. Additionally, when they hover over the image, it brings up the project name. This works on mobile, although not perfectly. Hover functionality (including  dropdown menus) is something that’s still not ready for mobile without adding in javascript.

FPL Clients WebpageClients has currently an empty space to the right for projects based on each client. If you click each client, the selected name changes color and its respective projects would appear on the right. FPL wanted to set the website live before they finalize the projects for each client as that will take time. This will be updated in the future.

The Contact Us Page

The Contact Us page has an embedded Google Maps, which allows clients to find the quickest access without having to navigate to the google maps page. By clicking the marker, they open up more options to find directions.

The Contact Us page can be reached under About Us or in the footer. There is contact info in the header for quick contact.

One last consideration the client had was to make the website usable via Internet Explorer 8. This started because one FPL team member was not viewing the website as everyone else did. He sent me some screenshots, and from there, I saw that he was on an XP computer using Internet Explorer. I went through my code and edited much of it to make it IE8 compatible. The website does not render the same between IE8 and every other browser, but that’s because the FPL team did not believe it was important.

The problem with IE8 compatibility is that the only way to see how it works is to try it on an XP computer. The compatibility view in Internet Explorer 9 does not fully emulate how Internet Explorer 8 renders HTML, CSS, and Javascript. Luckily, I have a Windows XP laptop, although I firmly believe that we should not continue support for Internet Explorer 8.

The website went live over the weekend, and FPL and Associates, Inc. is happy with their new website.



One thought on “Designing the FPL Website”

Comments are closed.