Let’s explore the redesign process for improving a photography Contact page. Various small changes add up to a streamlined experience for website visitors wanting to leave a message.
Following the recent in-depth article on building effective Contact pages, photographer Erin Paul Donovan (based in Lincoln, New Hampshire) approached me to work on improving his own site’s Contact page. He had some ideas on how it should look but was also very open to input.
You can view his website here: http://www.scenicnh.com/, and here’s how the Contact page looked before:
After reviewing all the options to improve the page and diagnosing the existing page, we put on our problem-solving hat and settled on the following tasks:
- styling the contact form to make it look more attractive/modern
- re-formatting the contact info section on the right
- improving typography (line-height especially)
- adding the email address there (as a link)
- phone turned into a tel link
- adding social media profile links there too
These would also basically make the entire page more user-friendly and clean.
The outcome
Long story short, here’s how the Contact page looked after the changes:
The contact form labels were replaced with placeholder texts right inside the fields, to save space.
The email and phone number on the right were made more prominent and clearly separated from the address (and they also offer a larger click/tap area).
The text got a larger line-height, and the short message at the end was made more discreet.
The now phone link (using the tel URL scheme) works if the user has Skype (or other audio chat software) installed on the computer…
… or if on a mobile device:
We also wanted to make the page easy to update in the future. Instead of just coding a custom WordPress page template, I elected to build it directly into the WordPress editor (with the help of a columns plugin). This way, Erin still has easy access to the page content without having to see any behind-the-scenes source code.
Another goal for the page was to add a newsletter subscription option to the Contact page. From a user-experience standpoint, it would have been a bad idea to have two separate forms on the same page, they would both have stolen attention one from the other.
Since this site is partly built on WordPress, a great solution was to try to integrate a newsletter opt-in right into the Contact form. This was done with the help of the “MailChimp for WordPress” plugin, since he was using MailChimp as his newsletter engine.
The newsletter subscribe box used to only sit on the blog sidebar and on a separate page on this site. The Contact page is a good place to discreetly ask people to subscribe, without affecting the contact form.
Small enhancement for power-users: using the “tabindex” attribute for form input fields, visitors can press TAB to cycle through the form fields and send the message without using their mouse.
The next step for the site will eventually be to make it fully responsive. But for now, the Contact page improvements were a great step forward.
“Excellent! It looks so much better than before.”
Erin Paul Donovan
This is one of the types of services that ForegroundWeb can offer photographers to improve photography websites. Visit the WORK page to view a list of services, benefits and website examples.
To improve your own Contact page, simply go over the “Building effective photography Contact pages” article and follow the info there to start making changes today. If you need any help, don’t hesitate to contact me.
