Jon Marquez Photography: Studio Portrait Photography Website
The Challenge
Marquez wants a clean, but elegant website to highlight his mission and work, and assure those who are daunted about trying the service. Most importantly, he wants an easy way for customers to schedule consultations and sessions with him without having to email back and forth.
My Solution
The responsive website that shows off featured shots on the homepage and organizes work by category. It provides info on the portrait process, his mission, FAQ’s, prices and allows customers select a date/time for consultations and sessions directly on the site.
Timeline
January 2021
Role
UX & UI / Prototyping / Branding / Research / Testing
EMPATHIZE
Research the market and target user
To see what the competition in the portraiture market is offering and what people would look for in such a niche service, we conducted three kinds of research — market research, competitive analysis and user interviews. The resulting insights produced a core user persona to create the website for.
Expectations from service and experience
METHOD: Market Research + Competitor Analysis
I learned about the portraiture market and his competitors, taking notes on general practices — from services included to expectations on the experience — and identified the strengths and weakness of competing photographer sites based on topic, focus or location.
Expectations from portraiture services include:
more comfortable, flexible photoshoot
variety of portrait styles
styling, access to a changing room, and privacy — an experience
a gift, celebration of milestone, a “treat”
User Interviews
Next, I interviewed five different kinds of participants who have interest in taking studio portraits, but may or may not have booked one before (as seen below):
Common themes found among our participants were:
Goals/Motivations
Commemorate a life event
For work or personal brand
To feel good about themselves
Save memento of that point in time
Needs
Transparent pricing
Easy-to-navigate portfolio
To know what is included in the experience
Session feels like a safe space (supportive environment + COVID precautions)
Frustrations
Lack of visible scheduling availability
Information buried too deep in the site
Inability to view galleries at own pace
Doesn’t know what to expect
User Persona
The research findings produced Lucia Neumadre — a proud new mom who knows the kind of portraits she wants hanging in the house, but has not booked or done a studio portrait service before:
DEFINE
Determine the information architecture
To pinpoint what the site needed in order to meet Lucia’s goals and needs while avoiding her frustrations, I created a feature roadmap. With this, I defined where these features fit into the organization of pages by making the sitemap and sketching preliminary sketches of each page layout.
Feature Roadmap
Defining everything from the Experience Stage to the Customer Level for each feature helped ensure that all necessary functions were included and the needs of customers at both levels — potential and post-consultation — were being met.
Sitemap
Choosing to create a dropdown menu for the Galleries Link for navigation efficiency (in line with user interview findings), I grouped all the galleries under primary navigation.
Page Sketches
IDEATE
Creating the flow & brand image
Next, I created a detailed user flow to map out the potential journey of the visitor from homepage —> browsing photos —> finding additional information —> scheduling consultation —> scheduling session and payment. Keeping every crossroad the user would encounter, consciously and unconsciously, in mind as they moved through the site to find the answers to their questions provided insight to what actions needed to be addressed during their journey.
After discussing with Marquez what he wants from the feel/look and color scheme of his brand, I developed JMP’s first logo and brand style as seen in the stylescape. Then, I created mid-fidelity wireframes in Figma, following the structure of my sitemap and user flow.
Click to see the full-size user flow.
Brand stylescape
The client, Jon, was very adamant about using his full name in his logo. He wanted something that looked regal and was very drawn to the color gold, which I noticed he also used in many of his self-painted backdrops. For the brand colors and site’s overall look, he wanted darker colors to offset his bright images while still being easy on the eyes.
Taking his wishes into account, I put together a color palette of darker shades of gold, gray and black against white and a mix of serif and san-serif fonts to draw attention to headings.
Mid-Fidelity Wireframes
Creating the wireframes with the brand style, typography and color palette made it easier to visualize how the final design would look. It was especially helpful to see the Vogue font within the design, as its heavy presence takes more attention and space than the more subtle partner font, Proxima Nova.
PROTOTYPE
Designs come to life
Then, a mid-fidelity prototype was designed in Figma for first round of usability testing — most interactions were accounted for, including navigation bar dropdown and scheduling for both consultations and sessions. During and after the first testing, the UI kit was created with its working elements.
First Version Prototype
Finally, adding Jon’s photographs breathed life into the mid-fidelity prototype.
Brand UI Kit
As this is the client’s first website, it was important to make a design system that can be continuously used and updated for future changes or additions to the site after launch.
TESTING & SOLUTION
Getting feedback
Finally, moderated remote usability testing was done with three participants with the mid-fidelity prototype. The goal was to check the navigation of the site, the affordance of the navigation bar, and determine any pain points with the scheduling feature. To more visually consolidate the responses into findings, I put together an affinity map with common observations and wishes.
From the common patterns in feedback gathered, the participants:
Did not expect to see anything other than info about the photographer in the About page — 3/3 participants.
The Experience page explaining the studio process is too important to hide away in a closed menu — 3/3 participants.
The instructions in the Calendar by the personal code form field need to be more visible to avoid confusion about scheduling — 2/3 participants.
There should be links to other pages at the bottom of all pages — 2/3 participants.
Iterations
With these findings, I revised the website so that:
The Experience page is separate from the About page.
All screens have easy links to other parts of the site at the bottom of the page.
The copy about how to use the personal code is larger and closer to the form field.
The more important sections and actions/CTA’s are closer to the top of the page.
Explore most recent version here.
Next steps
Design consultation and session confirmation pages for post-scheduling verification.
Conduct specific usability testing on the CTA in the navigation bar to figure out effective verbiage.
Do second, third, etc. rounds of usability testing with updated prototype to continue to improve navigation.
Adding the client’s necessary information and photos as we continue to work towards launching the website.