Greg Miller Photography website

A redesign concept of Greg’s current multi-page website into a single page marketing site to convert visitors into clients with strong calls to action for booking his services and joining his monthly email list.

Project:

Roles:

single page responsive website

user experience designer & prototyping

overview & goal

Greg Miller Photography is a full-service photography services studio in Columbus, Ohio. Greg has a professional studio for portraits and provides on-location commercial photography services.

I ideated this website redesign to better showcase samples of Greg's work on a single page site in order to improve the user experience, eliminating the need to navigate to separate pages to view his photos. The layout is more conducive to quickly viewing photo galleries organized by category to serve the needs of different clients.

roles

This UX design concept was the result of a mentor-led bootcamp through Interaction Design Foundation. I reused current site design elements, wireframed the site structure and built a high-fidelity prototype.

rationale for the project

The majority of Greg Miller’s new business comes from word of mouth and he has an impeccable reputation, but he wants to increase the number of monthly bookings by converting his website visitors to new clients.

His current site was built by his friend's son with limited design experience. While it does highlight samples of Greg's photography, they are divided into six separate pages. The site needs a design refresh in order to cater to the user he hopes to attract and convert them into customers. The site is simply a portfolio site that lacks a marketing focus that will appeal to an array of prospective clients.

Current website

defining the problem

The current website design is not well organized and does not incorporate photo gallery functionality. The site features several pages of photographs that forces users to endlessly scroll through examples of Greg’s work and does not successfully showcase his photography skills.
The current site provides a mailto link to open a user’s email client to contact him for booking his services. This simple link does not capture any information from the prospective client. It has also been indexed by spam bots leading to a lot of spam emails in his inbox.
Greg has no idea how many website visitors he gets because his current site was not set up with Google Analytics tracking tags.
Greg is unable to measure how he attracts new clients, so there is no way to gauge successful KPIs of his website and email marketing efforts.

constraints

Must incorporate his current corporate logo into the design.
Must include a Google map API indicating the location of his studio.

research & insights

My research was based on a website review and content audit that I conducted, as well as insights derived from my background knowledge of Greg Miller including past conversations we've had. During my review, I noticed several opportunities to add functionality and features that would make his site more interactive and help him collect valuable visitor data to grow the email database for his monthly e-newsletter.

In order to solve the problems listed above, I identified several key considerations and narrowed Greg's target audience down to two group profiles to develop detailed personas to represent them.

key considerations

Incorporating more interactive design will provide a more engaging user experience, as opposed to simply viewing photographs as it is currently designed.
A modern layout will appeal to a more technically savvy prospective clientele.
Creation of a simple email form on the single page site (including recaptcha spam bot prevention) that captures basic necessary information from the prospective client such as name and reason for inquiry.
Including a “How did you hear about us?” question with a dropdown menu within the email form design will help to gain insight into marketing efforts.
The site must be built to be responsive so that the desktop design resizes properly on smaller mobile and tablet displays to accommodate different devices.

user personas

Based on my research, I defined two target group profiles to build empathy and prioritize goals according to their needs.

Monique (teacher, 38, wants senior portraits for her daughter)
Arjun (marketing manager, 44, wants product shots for his food service employer)

wireframing a solution

I developed low-fidelity wireframes in Adobe XD to mock up the basic functionality and overall layout of the content sections. I replaced the individual pages of photo thumbnails with sectioned photo galleries. I also added a form below the galleries to capture detailed information of potential clients for Greg to follow up and help close a booking appointment.

Current site's "Things" page of thumbnails

Wireframe of "Things" photo gallery replaces page

new interactive elements

Three "Book Me!" links - two above the fold (a link in the header nav bar and button below the hero image) and the third in the footer bar to serve as strong calls to action that create urgency for site visitors to get on Greg's busy calendar.
Photo galleries organized by categories of photographs that allow the user to hover over right and left arrows to scroll horizontally to view images and click on them to open lightboxes with larger versions to view more details.
A floating sticky "top" button in the right rail that moves with the user while scrolling down the page to give easy access back to the top of the page.
A comprehensive form that gathers the most important information that Greg needs from the user upfront to save him time during the follow up (i.e., gives him the client's desired date for a shoot so he can check his calendar before the follow up, the type of shoot, etc.).
A link to Greg's Instagram page in the header and footer for the visitor to see his most recent photos.

VIEW DETAILS IN WIREFRAME PDF

finding a visual style

Given the constraint of repurposing Greg's original logo which consists of black and grey tones, I decided to repeat this design style in the color palette. I was inspired to use different greyscale shades and good use of white space to focus attention on the colorful photography in the galleries. I also chose a cooler shade of blue than the one currently used sparingly on the site and made it more prominent by using it in the subheading fonts.

moodboard

I developed a moodboard in Photoshop based on monochromatic imagery of clean lines and contemporary architecture to set a sophisticated and elegant setting for the photographs. I chose sans serif typography to extend the minimal design.

building the designs

Since the site will be responsive, I converted my wireframes into two high-fidelity prototypes in Adobe XD to display both the desktop and mobile designs.

VIEW DETAILS IN PROTOTYPE PDF

iterations

In translating the wireframe into a prototype, I made several iterations:

Changed the layout of the strips of content sections to place the About section above all category galleries instead of below them as designed in the wireframe. This also required an update to the list of anchor links in top nav bar.
Decided to remove the sticky back-to-top button to reduce the visual clutter.
Changed the text layout on the contact form from left-justified to centered given all other centered elements on the page.
Unlike the wireframes which did not include a mobile design, I decided to build a hi-fi prototype for mobile devices to illustrate the responsive display of elements.
Changed the footer layout by removing all anchor links except Book Me to quickly take visitors back up to the top of the contact form because I decided the other anchors were not necessary. I also centered the contact info and moved the logo from above the footer to within the footer bar.
Reduced the amount of information listed above the top header bar to be less cluttered and moved the info to the footer.

solving the problem

The redesigned Greg Miller Photography website addresses the stated problems in the following ways:

improves usability

Condensing multiple pages of work samples into easy-to-use photo galleries accessible on the same page reduces the number of clicks to find the information the user needs.
Adding interactive elements encourages user engagement and a simple form promotes contact with Greg.

marketing and client insights

Including a “How did you hear about us?” dropdown menu within the contact form helps Greg determine his best performing marketing platforms (online vs. radio ads).
Inclusion of an email newsletter opt in checkbox will help grow Greg's subscriber count.
The contact form gives Greg valuable client information upfront to reduce the amount of follow up communications.

seo & site security improvements

Adding Google Analytics tracking tags helps gather valuable visitor data like gauging the number of sessions, geography of incoming traffic, bounce rates and other factors to help Greg determine successful conversion funnels.
Use of keywords and the installation of an SSL certificate (current site is not encrypted) will protect server-client communication and improve the site's search engine ranking.
Replacing Greg's posted email address and the form with ReCaptcha verification reduces the amount of spam email.