arnavlande.com
overview
Background
As a freelancer, I wanted to create a portfolio website to showcase my skills and projects to potential clients. I’ve had several websites in the past, but they each had flaws in the range of work they displayed. The old portfolio sites I had were also limited in their functionality, as they merely displayed content rather than letting users interact more directly with the site.
Goal
I wanted a design that would reflect my creativity and expertise, while also being user-friendly and easy to navigate. I wanted to highlight each of my skills: photography, video, and design, and also have options for clients to contact me and book me directly online.
Role
UX Designer + Prototyper
Research
diving deeper
To begin, I conducted research on other portfolio websites in the photo, video, and UI/UX industries. I noted common design patterns, such as the use of a simple navigation menu and a focus on the developer's projects. I also researched the target audience and their preferences for portfolio websites.
personas
Based on paint points and goals that many of my previous clients and colleagues have brought up in the past.
Joe - music artist
introduction
The first persona was a potential client looking to hire a videographer for an upcoming music video. They were in their early 20s and had experience working with photographers and videographers in the past.
Pain point
Searching for a creator’s past work was time-consuming due to a lack of documentation and accreditation for smaller productions. It is also hard to contact creators and find transparent rates for their work.
Goal
They wanted a website that allowed them to not only easily view a videographer’s work but learn more about their role and creation process. Additionally, they wanted to find the videographer’s rates and multiple contact methods that work best for their needs.
krys - student photographer
introduction
The second persona was a fellow student photographer looking for inspiration and guidance. They were in their early 20s and were interested in learning more about my development process and how to create a successful portfolio.
pain point
Many photographers don’t offer learning resources or further information about the techniques, equipment, and software they use. This can make it hard to reverse engineer how images were taken and require more effort to deduce. It is also hard for fellow student photographers to network and learn from their peers without any accessible information.
goal
They wanted to be able to see more technical information listed on a portfolio website alongside the images, with information like equipment, settings, and tutorials also listed.
design
-
Based on my research and user personas, I created a wireframe for the website. I opted for a simple three-section homepage layout with a navigation menu at the top of the page and a hero image showcasing each category. I included the About Me, Shop, Book Now, and FAQ pages in the header. I also included social media icons in the header and footer to redirect to my social media pages, where I am more active.
-
Afterward, I began working on the visual design of the website. I chose a neutral color palette with a cream accent in certain UI elements to reflect my favorite color scheme. I also utilized typography like “Helvetica” for headers and “Antarctican Mono” for paragraph text to create visual interest and hierarchy.
-
To ensure a seamless user experience, I added hover effects to the navigation menu and portfolio items. The header is also translucent to imitate a more high-quality glass-like finish. I added a scroll progress bar at the top of the website since much of the site is scroll-heavy on gallery pages. Lastly, I added a “scroll to top” button on each page to make it easier to return to the top after scrolling for a while. I also made sure that the website was responsive and would look great on desktop, tablet, and mobile devices.
-
An important consideration for photography portfolios specifically is web optimization. Rendering dozens of images in a gallery can become offputting due to load times on slower internet connections. Something that I personally have learned from experience is that clients won’t wait for images to load, and their attention must be captured in a few seconds or else their interest is lost. That is why I chose to optimize every image on the site by compressing them by a factor of 80%, turning a typical 20 MB image into a few megabytes. This change has greatly improved load speeds and reduced the frustration of waiting for images to load.
testing
making sure it works
Once the design was complete, I conducted usability testing with your user personas. I asked them to complete tasks such as finding a specific video project and contacting me through the form. I also gathered feedback on the design and functionality of the website.
Based on the feedback, I made some minor adjustments to the website. For example, I changed the placement of some of the galleries to make them more intuitive and added more context to the project descriptions.
reflection
what I learned
The final product is a bold and modern portfolio website that effectively showcased my skills and projects. The website is easy to navigate and allowed me to easily update and add new projects. The About Me, Book Now, and FAQ pages made it easy for potential clients to learn more about you and get in touch.
This portfolio website was the first website that I fully conceptualized from start to finish, and I am proud of the final result. The struggles of being able to incorporate all of my skills in one portfolio has been a challenge for many years, but I’ve finally reached a point where I am satisfied with the functionality and aesthetic of my own portfolio. There is still much that can be improved, however, this is always the case as portfolios are constantly evolving projects that reflect one’s own growth as a creative.
Feel free to explore the site in its entirety as I continue to develop and expand it :)