One of the key limitations of this project was cost. The small company needed a website, but they also didn't have a lot of money to spend on it, which meant that I had to compress my process but still provide value. This site was built on a CMS that is responsive. The CMS had already defined widgets that are popular with marketing websites. Knowing the capabilities and restrictions of the CMS, I was able to identify what pages the website would require. I wanted to have a primary and a secondary navigation. The primary navigation would drive users to the correct place for their own needs (commercial, industrial, and residential). The secondary navigation would drive users to information about the company, how to contact them, testimonials, and incentives.
I wanted to highlight the three buckets of expertise so I put them front and center in the user experience. They are part of the header on every page so that users can quickly find what they need. The slider acts as an additional entry point for users. It is important for the business to have its Better Business Bureau rating on the home page because it is a small business trying to attract new customers.
Sub page wireframe
The widgets on the right side of the page can be repositioned so that if the company wants to highlight a testimonial or feature the photo gallery, they can raise that box to the top. Making sure that the client could easily manage their own website was also an important step. I built in some time to teach them how to manage their own website, and we recorded the session for them to reference later.
In tandem with the wireframes, I also developed a mood board and style guide for the website. This gave the clients a preview of what the site would look like and assured them that they would like the final product.
UI, testing, and final product
I conducted a few quick tests with users to see if they understood the main navigation and if there was a way to make it more clear. I did an A/B test with buttons that were colorful and included icons and then buttons with just text. The big, colorful buttons that included the icons were the favored version. The website was on time and on budget, and has proven to be a valuable resource to Nelson Electric and their clients.