top of page
research
what is my audience expecting from the website
the niche for photography websites is standardized and there is readily available information on user needs, page structure, effective information architecture, and common pain points to be addressed. i have researched and found these insights:
pain points:
-cluttered screens with too much visual info
-poorly organized photo categories
-the absence of contact/about pages
needs:
-a clean and neat portfolio
-easy-to-navigate design
-information presented in an intuitive manner
how other artists are presenting their work to the digital world
by researching my competition, i was able to identify best practices in the industry and tailor my own website to stand out while still meeting the needs and expectations of my audience.
vhils - www.vhils.com
pros:
-clear and concise navigation
-provides a professional and trustworthy image to potential clients/audience
cons:
-font size too small for some users (12px)
-the homepage is limited to serving as a news page only
felipe pantone - www.felipepantone.com
pros:
-aesthetically pleasing
-easy to navigate
-well organized portfolio
-essential info such as contact and bio is provided
cons:
-slow website loading speed
-font size too small for some users (12px)
-large photo sizes that don't fit on the screen
-no option to quickly return to the top of the page
what can i learn from this
-improved utilization of content space on the homepage
-content, including imagery, must adjust to different screen sizes
-intuitive content organization
-consideration of font size and accessibility for all users
-provide users with a convenient option to return to the top of the page
research
project: design my own photography website
my role: UX designer
tools used: figma+photoshop for design
wix for implementation
the whole process took me about 3 months to complete.
i invite you to read about my first ux design journey, which takes about 10 to 15 minutes to read.
you can navigate easily using the side menu on the left. enjoy!
about
how a do-it-yourself situation turned me into a ux designer
as a professional photographer, i needed a platform other than social media to showcase my photography and printmaking portfolio. i wanted a website where my audience could peacefully enjoy my work.
a personal online presence was the best solution as it gave me the freedom to organize my work without the constraints of social media platforms.
design
design
wireframes
here are the initial paper wireframes that established the foundation of the website's layout and structure.
information architecture
this aspect was of high importance as it determined the structure of the user experience. i aimed to keep the navigation intuitive and organized the website into clear categories, including portfolio, shop, about, and contact.
web version
mobile version
main user flow
the main focus was for visitors to easily view my print portfolio with a simple and direct path.
i aimed to keep the path as short and simple as possible with the least amount of clicks and scrolls.
home
click on
"see portfolio"
portfolio structure
having a clean screen with no visual clutter was of high priority so the user could focus on a single photo.
the sidebar nav menu gives the user the possibility to quickly jump to any category they desire to.
print portfolio
photo portfolio
accessibility
adhering to accessibility guidelines is crucial in delivering a positive user experience. It benefits all users of the product. matters such as typography and color contrast are addressed as part of these guidelines:
typography:
poppins semi bold - 18px and 26px
lulo clean - 10px and 16px
color contrast:
#444444
+
#F7ADBB
=
contrast ratio 5.4:1
#3E3E3E
+
#F9F9F9
=
contrast ratio 10.15:1
ui and final touches
the focus of this situation is the content. photos should be the highlight and be complemented by a minimalist design with a touch of color. main color used: #F7ADBC
homepage:
about and contact page:
.png)
.png)
shop page:
.png)
test
test
what is my audience saying about the experience
i conducted an unmoderated study to evaluate user reactions to the website and identify opportunities for improvement. participants were asked to answer a set of questions after visiting the site. the following are some of the most significant insights gathered from the study.
what do you like about it?
1. i love the typefaces and colours selected.
2. it's uniqueness and organization
3. the unify design, very fun font and colour use.
4. has a vintage look, quite interesting style
what do you not like about it?
1. the information flow. for example, after scrolling down, I see a button for portfolio, and then if I look on the upper bar I see some work categories - it makes me feel that I am looking at different things
2. the greeting has 3 different size fonts. I’m OCD and those things tend bother me a little
3. switching from tabs should take less than a second to load
4. i think you can put your work at the front page and gives some description because it is more eye catchy and people will know what you do at first click into the website
iterate
iterate
what problems need to be adressed and solved
based on the feedback received from users, i organized and prioritized the issues that require attention:
high priority:
information architecture - homepage cta creates confusion in the information architecture
a11y - 3 different font sizes
moderate priority:
written content - insufficient work description on the homepage
low priority:
navigation design - tab switching takes too much time
how i decided to solve these issues
1. information architecture - homepage cta creates confusion in the information architecture
confusion is a major obstacle to user experience. to resolve this issue, i decided to address it first by making it clearer that my work encompasses both photographs and prints. i replaced the confusing "see portfolio" cta with two separate ctas, one for the photo portfolio and the other for the print portfolio, providing a clearer path for users from the homepage.
before:
after:
2. a11y - 3 different font sizes and written content - insufficient work description on the homepage
for a pleasant experience, attention to detail is a crucial factor to consider. the font size has been adjusted and made consistent throughout. the text was also revised to provide more information about my work.
before:
after:
3. navigation design - tab switching takes too much time
compromises were necessary due to limitations in wix. the only option for navigating between categories is through scrolling, which takes a bit more time.
other changes made to the original design
1. the color of the "contact for price" button was changed because it appeared inactive
before:
after:
2. the color of text when clicked was adjusted because it did not meet the webaim contrast guidelines
before:
after:
3. for the about page, both text and photo content were revised to give a deeper understanding of my work
before:
after:
results
results
how this project improved my photo business
building my own website has proven to be a valuable decision as it has increased my clients' respect and trust, resulting in more projects and positive financial outcomes. by utilizing more than just social media to connect with my audience, i have been able to distinguish myself from the competition.
this project has also taught me the significance of providing an enjoyable user experience. a seamless and positive experience makes everyone involved happy and satisfied.
thank you for taking the time to read. if you find yourself in a similar situation and would like to discuss how I can improve your website feel free to reach out, my email is just right there.
bottom of page