Project Overview
Problem
Zach needed a better way to showcase his photography work & experience to potential clients. His website was outdated & unorganized. He struggled to keep track of inquiries, bookings, and updating his portfolio. He wanted to secure more bookings this year than his previous years.
Solution
Re-design Zach’s Photography website & app to increase the chances of potential clients booking with him.
My Role
Research
Wireframe
User Flow
User Persona
UX/UI Design
Project Duration
May 2023
“It’s easier to book with someone if they have all the information you need right in your hands”
Persona
Matthew L.
Pronouns: He/Him
Age: 22
Education: Cal State LA
Status: Single
Location: Arcadia
Bio
Matthew is a pre-med student on his last semester of university. He spends a lot of time studying & prepping for his MCAT exam. Him & his parents want to commemorate his time at Cal State LA by getting pictures taken. With his busy schedule, he needs a photographer who can provide all their work upfront, as well as their quotes.
Frustrations
Some websites & portfolios don't show up well on mobile devices
Doesn’t like receiving Google folders of a photographer’s work
“If it’s not appealing, I’m not booking”
Goals
Wants to book with a photographer & not regret it years from now
Book a graduation photoshoot with ease
Know immediately what the photographer offers
User Journey Map
Actions
Task List
Feeling Adjective
Improve
Visit Website
Go to the website on a computer or laptop
Go to the website on a mobile device
Confused about the homepage
Uninterested after visiting the website, therefore exiting
Capture the user’s attention on the homepage
Explore Pages
Browse through the website pages
Look through the portfolio photos
View the rates & services
Curious about inconsistent buttons on the website
Underwhelming amount of photos to view & reference
Make the buttons consistent & add more photos
View Portfolio
Scroll through the portfolio photos
Irritated that the photos are not organized & they are small in comparison to the screen(s)
Provide organization of the type of photos & enlarging them
View Pricing
Scroll through the rates & services page
Interested in the services provided
Satisfied with the quotes & organization
Provide the users with all the information needed
Book a Session
Fill out the form to book a photoshoot session
Relieved that the booking process was smooth
Uneasiness from no immediate confirmation
Able to receive confirmation immediately
Wireframing
Drafted a homepage that would target user’s pain points to allow for a well-suited portfolio website. I prioritized the photographer’s favorite photos, rates, and services, so users can view important content immediately after landing on the website.
Wireframe Sketch Priorities
Logo & hero image sets the tone for the rest of the photography portfolio
Including a easy-to-navigate menu on the top right corner
Emphasizing the photographer’s main information & services
Including a footer with contact information
Digital Wireframe
In the initial design phase, I made sure to focus on making the homepage more appealing than the previous website.
The lack of words & photo examples from the previous website drove me to add more on the homepage.
Low-Fidelity Prototype
The low-fidelity prototype connected the primary user flow of booking a photoshoot session on the website. This prototype is used in a usability study to assess user needs.
View Zach’s Photography low-fidelity prototype here
Usability Study: Findings
I conducted two rounds of usability studies. Findings from the first study guided me to create the high-fidelity prototype from the low-fidelity one. The findings from the second round of usability studies for the high-fidelity prototype revealed what aspects needed refining.
Round 1 findings
Homepage was not intriguing or informational
Buttons & fonts were inconsistent on all pages
Confusing portfolio categories
Round 2 findings
Needs more visual components
Buttons & font are too small on mobile
High-Fidelity Prototype
The final high-fidelity prototype demonstrated cleaner user flows for booking a photoshoot session. It also met user needs by including more visual components & proportioning all buttons & fonts.
View High-Fidelity Prototype here
Mockups
Sitemap
After completing the website designs, I began designing for the responsive app. I created & used this sitemap to guide the organization across each screen device to guarantee a consistent experience.
Highlights
The impacts after the re-launch of Zach’s Photography:
increased average traffic by 433%
decreased bounce rate by 16%
Takeaways
What I’ll Do Next
I’ll continue monitoring website traffic, especially during peak seasons like graduation & holidays. I will conduct another usability study to improve the website & app while considering ways to make it more accessible for everyone.
What I Learned
While designing Zach’s Photography website & app, I learned how to receive criticism from friends & strangers to improve my designs. I came to realize that there’s a lot of work that needs to be put in to create a better website or app. It’s always good to conduct usability studies & make those needed changes.
“I love the new changes to the website! It fits Zach’s editing style. I’ll make sure to book with him for a third time!”
- Julieanne, 25