UX/UI Designer
Pornpawee Kessler
Work available
Photonetrose: UX/UI for Photography showcase
Creating a playful, user-friendly portfolio for a local photographer
Tool
Figma
Framer
Design Process
Concept Redesign
Process
Role
UX/UI Designer
Duration
2 months
Overview
Photonetrose is a photographer who focuses on capturing the right moment rather than just the perfect angle or lighting. He believes authentic images convey more emotion and meaning to viewers. He wanted a personal website to showcase not only himself as a photographer but also the body of work he has collected over the past several years. I designed and developed the website with a playful, approachable layout that reflects his personality and makes it easy for visitors—potential clients and photography enthusiasts alike—to explore his portfolio and get in touch.
Research
Since this website was created from scratch, I began by interviewing Photo to understand his goals, expectations, and requirements. He wanted a playful yet simple design, nothing formal or luxurious, and requested brown as the main color along with his existing logo. The site needed to showcase his work while reflecting his personality and making it easy for potential clients to reach out.
Next, I explored other photographer websites to identify common patterns. Most included a homepage, gallery, and contact page, while some featured an “About” page. I decided to include an “About Me” page to give visitors context about the photographer and his work. I also noticed that few sites displayed pricing, which makes sense since session costs vary based on time, travel, location, and equipment. To address this, I added a comment section on the contact page so potential clients could ask questions directly.
Design process
I began by laying out the information architecture to understand the structure of the site and how the content would be organized. Since the website’s main purpose was to showcase the photographer’s work and provide a way for clients to contact him, it did not require extensive information. I established four primary pages: a homepage, an About Me page, a gallery page, and a contact page. This structure ensured that visitors could easily navigate the site, explore the portfolio, and reach out to the photographer without distraction.
I then continued by creating wireframes to establish a clear idea of how each page of the site would look. After completing the wireframes, I met with Photo again, approximately five days after our initial conversation, to review the layout and gather his feedback
Home page
About page
Gallery page
About page
I then developed high-fidelity mockups for the first two pages, the homepage and About Me page. After completing these designs, I met with Photo again to review them. He appreciated the overall playful feel of the site but suggested using brown as the primary color throughout and mentioned that he felt something was missing from the design.
Design process
I began by laying out the information architecture to understand the structure of the site and how the content would be organized. Since the website’s main purpose was to showcase the photographer’s work and provide a way for clients to contact him, it did not require extensive information. I established four primary pages: a homepage, an About Me page, a gallery page, and a contact page. This structure ensured that visitors could easily navigate the site, explore the portfolio, and reach out to the photographer without distraction.
What went wrong?
After further research and reflection on the design, I realized that the site wasn’t missing elements, but rather had too many photos displayed at once, which made it feel cluttered and overwhelming.
The gallery should function like a museum, where the experience is not defined by the number of artworks, but by the journey through each room. Each section should allow visitors to gradually discover and appreciate the photographer’s work, with careful spacing, thoughtful placement, and subtle details guiding them from one piece to the next. Displaying too many photos on the homepage and About Me page disrupted this journey, making it harder for users to explore the site and engage with the work intentionally.
To address this, I reorganized the gallery layout, prioritized featured images, and limited the number of photos per section to create a smooth, focused, and enjoyable browsing experience.
Second Design
Over the next two weeks, I continued gathering insights and conducting research while staying in regular contact with Photo. Based on these findings, I decided to redesign the entire site to better reflect his vision and improve the user experience. I incorporated the shade of brown that he preferred while maintaining a playful feel through typography. I focused on creating a unique layout with subtle, fun interactions that would engage users without distracting them. Most importantly, I carefully curated the number of photos displayed to avoid clutter while still telling the story of the photographer’s work.
Testing & Iteration
After completing the second design iteration, I conducted user testing with both general users who were not actively looking to hire a photographer and a potential client who was interested in booking one. Overall, the feedback was positive, with users noting that the site felt visually engaging and easy to navigate. I also received a few suggestions for improvement, which I took into consideration and addressed through further refinements to the design.
Key Takeaways
This project taught me that designing an effective portfolio website is not just about showcasing as much work as possible, but about creating a thoughtful journey for users. I learned the importance of balancing personality with simplicity, using visual hierarchy to guide attention, and designing a space where content can breathe. Through research, feedback, and iteration, I was able to create a website that not only reflects the photographer’s style but also provides a more intentional and engaging experience for visitors.
UX/UI Designer
Pornpawee Kessler
Work available
Photonetrose: UX/UI for Photography showcase
Creating a playful, user-friendly portfolio for a local photographer
Tool
Figma
Framer
Design Process
From concept to launch
Role
UX/UI Designer
Duration
2 months
Overview
Photonetrose is a photographer who focuses on capturing the right moment rather than just the perfect angle or lighting. He believes authentic images convey more emotion and meaning to viewers. He wanted a personal website to showcase not only himself as a photographer but also the body of work he has collected over the past several years. I designed and developed the website with a playful, approachable layout that reflects his personality and makes it easy for visitors—potential clients and photography enthusiasts alike—to explore his portfolio and get in touch.
Research
Since this website was created from scratch, I began by interviewing Photo to understand his goals, expectations, and requirements. He wanted a playful yet simple design, nothing formal or luxurious, and requested brown as the main color along with his existing logo. The site needed to showcase his work while reflecting his personality and making it easy for potential clients to reach out.
Next, I explored other photographer websites to identify common patterns. Most included a homepage, gallery, and contact page, while some featured an “About” page. I decided to include an “About Me” page to give visitors context about the photographer and his work. I also noticed that few sites displayed pricing, which makes sense since session costs vary based on time, travel, location, and equipment. To address this, I added a comment section on the contact page so potential clients could ask questions directly.
Design process
I began by laying out the information architecture to understand the structure of the site and how the content would be organized. Since the website’s main purpose was to showcase the photographer’s work and provide a way for clients to contact him, it did not require extensive information. I established four primary pages: a homepage, an About Me page, a gallery page, and a contact page. This structure ensured that visitors could easily navigate the site, explore the portfolio, and reach out to the photographer without distraction.
I then continued by creating wireframes to establish a clear idea of how each page of the site would look. After completing the wireframes, I met with Photo again, approximately five days after our initial conversation, to review the layout and gather his feedback
Home page
About page
Gallery page
Contact page
I then developed high-fidelity mockups for the first two pages, the homepage and About Me page. After completing these designs, I met with Photo again to review them. He appreciated the overall playful feel of the site but suggested using brown as the primary color throughout and mentioned that he felt something was missing from the design.
What went wrong?
What
went wrong?
After further research and reflection on the design, I realized that the site wasn’t missing elements, but rather had too many photos displayed at once, which made it feel cluttered and overwhelming.
The gallery should function like a museum, where the experience is not defined by the number of artworks, but by the journey through each room. Each section should allow visitors to gradually discover and appreciate the photographer’s work, with careful spacing, thoughtful placement, and subtle details guiding them from one piece to the next. Displaying too many photos on the homepage and About Me page disrupted this journey, making it harder for users to explore the site and engage with the work intentionally.
To address this, I reorganized the gallery layout, prioritized featured images, and limited the number of photos per section to create a smooth, focused, and enjoyable browsing experience.
Second Design
Over the next two weeks, I continued gathering insights and conducting research while staying in regular contact with Photo. Based on these findings, I decided to redesign the entire site to better reflect his vision and improve the user experience. I incorporated the shade of brown that he preferred while maintaining a playful feel through typography. I focused on creating a unique layout with subtle, fun interactions that would engage users without distracting them. Most importantly, I carefully curated the number of photos displayed to avoid clutter while still telling the story of the photographer’s work.
Testing & Iteration
After completing the second design iteration, I conducted user testing with both general users who were not actively looking to hire a photographer and a potential client who was interested in booking one. Overall, the feedback was positive, with users noting that the site felt visually engaging and easy to navigate. I also received a few suggestions for improvement, which I took into consideration and addressed through further refinements to the design.
Testing
&
Iteration
After completing the second design iteration, I conducted user testing with both general users who were not actively looking to hire a photographer and a potential client who was interested in booking one. Overall, the feedback was positive, with users noting that the site felt visually engaging and easy to navigate. I also received a few suggestions for improvement, which I took into consideration and addressed through further refinements to the design.
Key Takeaways
This project taught me that designing an effective portfolio website is not just about showcasing as much work as possible, but about creating a thoughtful journey for users. I learned the importance of balancing personality with simplicity, using visual hierarchy to guide attention, and designing a space where content can breathe. Through research, feedback, and iteration, I was able to create a website that not only reflects the photographer’s style but also provides a more intentional and engaging experience for visitors.
View the site: Photonetrose