Background
The client is a painting and drywall contractor who needs a website to show prospective customers. They describe their clientele as mainly affluent, liberal, and often artistic. They also do quite a bit of commercial work as well. The client wants a look that is "far out, joyful and memorable". The challenge is how to make something simultaneously far out and trustworthy. Trust is important because the client says, "People invite us into their homes, sometimes for several days."
Above The Fold
Version 1
After interviewing the client and two customers I had a list of 8 things to communicate so that customers would understand who they are and what makes them unique:
After interviewing the client and two customers I had a list of 8 things to communicate so that customers would understand who they are and what makes them unique:
- Who: Reach Higher Painting & Drywall
- Where: Twin Cities Metro
- What they do: Painting, enamel, and drywall
- For over 15 years
- Fully insured LLC
- Free estimates
- Owner operated
- Slogan "Projects with Style"
Version 1
Version 2
I removed the black icons and found it made the illustration stand out better. Then I changed some of the copy. "Over 15 years Owner Operated" was reduced to "Owner Operated" so that it would match the other two word bullet points nearby. "Serving the Twin Cities Metro Area" was changed to "Serving the Twin Cities Metro since 2002". This was done so that the owner wouldn't have to go in each year and increase the number, or I didn't have to write some code that would increase the number of years they've been in service. These changes gave me room to enlarge the text, increasing readability. Readability is really important to me. I want to be able to glance and something and accurately get the gist of it.
I removed the black icons and found it made the illustration stand out better. Then I changed some of the copy. "Over 15 years Owner Operated" was reduced to "Owner Operated" so that it would match the other two word bullet points nearby. "Serving the Twin Cities Metro Area" was changed to "Serving the Twin Cities Metro since 2002". This was done so that the owner wouldn't have to go in each year and increase the number, or I didn't have to write some code that would increase the number of years they've been in service. These changes gave me room to enlarge the text, increasing readability. Readability is really important to me. I want to be able to glance and something and accurately get the gist of it.
Version 2
Version 3
A couple hours later something didn't feel right about the two buttons. It didn't look balanced. I kept thinking "what does this site want me to do?". So I changed it to a single button with the call to action, "get a free estimate".
A couple hours later something didn't feel right about the two buttons. It didn't look balanced. I kept thinking "what does this site want me to do?". So I changed it to a single button with the call to action, "get a free estimate".
Version 3
Version 4
The client contacted me and said that he likes the clean design, but would like if we could feature the dinosaur logo more prominently. I thought about incorporating the dinosaur into the background image it mostly works. There is interplay with the "Projects with Style" logo and a stylish dinosaur. It could be even better if we were to replace "projects" with a better word, something that would universally apply to skateboarding and house painting. Let's shelve that for now. Then I fixed the mobile spacing problem by using one solid block of text and removed the "Free Estimates" bullet since it was also stated in the button.
The client contacted me and said that he likes the clean design, but would like if we could feature the dinosaur logo more prominently. I thought about incorporating the dinosaur into the background image it mostly works. There is interplay with the "Projects with Style" logo and a stylish dinosaur. It could be even better if we were to replace "projects" with a better word, something that would universally apply to skateboarding and house painting. Let's shelve that for now. Then I fixed the mobile spacing problem by using one solid block of text and removed the "Free Estimates" bullet since it was also stated in the button.
Version 4
Mobile View 1&2:
Satisfied with the desktop view, I opened my phone and went to the site. When I tested it in mobile view I was disappointed with two things: 1. Losing the house made the landing page functional but boring. 2. Too much unbalanced negative space. Using Weebly I don't have a lot of direct control with the mobile view, but I can tweak it with CSS. To fix the background I'd need to monkey around with the CSS. Before jumping in I searched Google and found lots of people with a similar problem. One solution was to us CSS to replace the image with a solid color for mobile. Another method was to make the image slightly smaller so that Weebly wouldn't automatically crop it, but would replace any empty space with a black background. I went with this solution and found that the dino photo helped line the text up with the black. I should note that this solution is not elegant. I can read and write HTML and CSS at an okay level, I mostly playing around until something works.
Satisfied with the desktop view, I opened my phone and went to the site. When I tested it in mobile view I was disappointed with two things: 1. Losing the house made the landing page functional but boring. 2. Too much unbalanced negative space. Using Weebly I don't have a lot of direct control with the mobile view, but I can tweak it with CSS. To fix the background I'd need to monkey around with the CSS. Before jumping in I searched Google and found lots of people with a similar problem. One solution was to us CSS to replace the image with a solid color for mobile. Another method was to make the image slightly smaller so that Weebly wouldn't automatically crop it, but would replace any empty space with a black background. I went with this solution and found that the dino photo helped line the text up with the black. I should note that this solution is not elegant. I can read and write HTML and CSS at an okay level, I mostly playing around until something works.
Mobile View 1
|
Mobile View 2
|
Illustrations
The clients picked me because they wanted their website to have a have a hand-drawn feeling. Their customers highly value individuality. I created these illustrations after meeting with the client and determining the main categories their clients search for.
Honestly, I don't know why the commercial drawing is a beautiful Victorian. It should be a coffee shop or a Walgreens. If I have time I'll go back and draw one.
Honestly, I don't know why the commercial drawing is a beautiful Victorian. It should be a coffee shop or a Walgreens. If I have time I'll go back and draw one.
Logo
The client wanted a logo that was far out, fun, memorable, and joyful. These would be made into work shirts their customers would see every day. They had seen a previous drawing I'd done of a flower morphing into an Eiffel tower and really liked it. So I made a shirt from the Eiffel tower design and created a another one of a dinosaur jumping over a rainbow with a skateboard.
The Gallery
Instead of placing the gallery on a separate page, I choose to put the gallery on the first page so guests can get an idea of their work immediately and to gain trust. So they can get the gist as soon as possible. Commercial work was placed first because the user's I interviewed said that seeing someone paint a Walgreens makes them feel like they can trust the company. After that, I didn't really put much thought into the order except for saving the family photos for last. It seemed like a happy way to end the page.
Right now I am using Weebly's basic photo gallery. In the future, I could see using something more modern. I checked out the competition and particularly like the gallery used by Home Drywall and Painting because you don't have to scroll around and the animations are a nice touch. I don't know what is more burdensome, scrolling back and forth versus clicking. For right now I think this is good enough and will wait to see if issues come up during user testing.
Right now I am using Weebly's basic photo gallery. In the future, I could see using something more modern. I checked out the competition and particularly like the gallery used by Home Drywall and Painting because you don't have to scroll around and the animations are a nice touch. I don't know what is more burdensome, scrolling back and forth versus clicking. For right now I think this is good enough and will wait to see if issues come up during user testing.
Moving Forward
- Test with customers.
- Make the site more harmonious by tweaking colors, buttons and other UI elements.
- Illustrate a simplified dinosaur logo for print and business cards.
