UX Design Learnings: Outlining the Structure of a Photography Website

In this project, I’ve simply broken down the content structure and its functionality of my own photography website Parinun Photography — applying the learnings of UX design; Information Architecture, Wireframing, and Prototyping!

UX has been one of the daily learnings for the past couple of months.
My first UX case study was published on Medium lately, which most of the focus is on applying design thinking and user research methods & skillsets to propose a practical solution to users.

Though the site itself was first created in 2016 to present the beauty of art and its conceptual meaning through photography, it’s still nice to know how the content is structured and how it is presented to visitors when they interact on a website.

The three main deliverables used in this project are as follows; Information Architecture, Wireframe, and Prototype.

Information Architecture

This is an overall organization of information that outlines each individual screen to illustrate the hierarchy of content across the website.

IA Diagram of Parinun Photography Website

Wireframe

Below I’ve put down the layouts of the drawn-by-hand wireframe and the digital wireframe. Both low-fidelity digital wireframe demonstrates the key interface elements existing on each webpage.

• The Sketching Wireframe

Quick Sketch of The Low-Fidelity Wireframes

• The Digital Wireframe

The Digital Wireframes (Low-Fidelity) created in Figma

Prototype

In this part, I also made the digital wireframes as a prototype is to simulate the sample version of the digital product. There’s a link below to try it out.

Link: Low-Fidelity Prototype (Figma)

Low-Fidelity Prototype of each Web Page

And…. it’s a WRAP for Part 1!

Learnings

…the main reason to start this small project is to be able to quickly apply the knowledge & skillsets from UX design learnings through deliverables and try them on the existing digital product.

Such things as IA, Wireframe, and Prototype are crucial for designing/redesigning the website to align with a user-centered design approach.

The new idea that popped up while working on this project was to consider making an ongoing project (Part 2) — conducting usability testing, user research, and such in order to redesign the website for further optimization.

The more I keep learning about UX the more my horizons keep expanding!

Please feel free to share feedback on this project : )
…and thank you so much again for visiting this blog post!