<- Back to UX Cases
Steff Fotografien Web
UX Study case | UX/ UI Design
Why this study case?
This short study case aims to show the process behind the re-design of a photographer's website.

The Problem
Steff's long scrolling-down website experience doesn't showcase his artwork accordingly and doesn’t offer a calm moment of observing single photos. Explore the projects turns out boresome and there is not enough descriptive information about the projects

Actual Website - Steff Naegeli 2024
Website Proposal

The Challenge

How to showcase Steff’s artwork not in a ‘blog-entry’ style so that visitors can carefully explore his work and comprehend every single one of his projects?

Analysis

I wanted to understand the website experience and the significance of having one single page website

Single Navigation Experience

The website experience offers limited options to explore the photographer's artwork. All photos are placed all at once in different sizes along the page.

The navigation bar links to different sections within the same page
The Navigation menu disappears when the user scrolls down, and the website logo changes to white, making it difficult to be visible always.

Visual Hierarchy Between Sections

The portfolio works section has a short distance between projects. It could be confusing to the user with where exactly the projects finish. It is important to provide the user the opportunity to experience every project alone.

Visual Hierarchy of Titles and Subtitles

The center alignment of the titles lacks a clear hierarchy. It has multiple typography sizes that could confuse the user, and have a negative impact in the overall experience.

Website Center Aligment

The website content is center-aligned, except for the first introduction paragraph. This layout decision impact negatively in the user experience since it increases the cognitive load in the user because it is harder to follow a text when is not starting on the left side. (west cultures, that read from right to left)

Forcing this behavior could lead users to abandon the website early or not feeling engaging enough to explore further Steff's works.

Analysis Summary

Based on the elements analyzed, Steff website would need an improvement on the following items:
  • Visual hierarchy: Simplify design elements to make content easier to follow and understand.
  • Photo placement: Increase the prominence of photos to better highlight Steff’s work. Adjusting the visual layout of the results page.
  • Alignment: Shift from central to left alignment for improved readability and visual hierarchy.

Design

The website aims to tackle the flaws found in the analysis stage and improve the overall experience.

Offer More Room To Showcase The Photos

Provide The User With A Project Overview

Better Visual Hierarchy in The Project Section

The Landing Page

  1. This version welcomes users with an immersive photo slideshow that puts them center stage.
  2. A warm welcome text follows, conveying Steff's heartfelt connection with visitors
  3. Finally, a mesmerizing photo carousel scrolls gently from right to left, resembling a curated art exhibit with diverse-sized photographs. This dynamic display also serves as a gateway to the "Work" section

Photos Portfolio Overview

Mirroring the overall structure, the "Work" section divides the photographer's portfolio into clear categories like architecture, people, and others. This user-friendly approach replaces the extensive vertical scroll of the previous website, reducing cognitive load and allowing efficient exploration of different project types.

Project Overview

Strategic element placement
Unlike the previous website's cluttered layout, elements on the new pages are carefully positioned to promote effortless readability and visual scanning. This intentional arrangement invites a smoother exploration of content.

Visual consistency
The consistent positioning of titles, descriptions, and photos across pages creates a familiar rhythm, enhancing visual clarity and aiding navigation.

Balanced grid foundation
Underpinning this visual harmony is a twelve-grid layout, ensuring a cohesive and balanced structure that elegantly guides the visitor's eye through the content.

Conclusion

Steff's website began as an update project for an existing site. However, during the analysis, it became evident that the overall user experience needed significant improvement to better showcase the artwork and differentiate the various sections.

The proposal addresses the website's primary weaknesses, including excessive vertical scrolling and inconsistent visual hierarchy across pages. This translates to reduced cognitive load for users exploring Steff's work, achieved through the introduction of categorized artwork sections for improved identification and exploration.

Each website section was meticulously designed to harmonize with the new visual style. The revised proposal effectively communicates Steff's artwork while maintaining a balance between simplicity and meticulous attention to detail.
With additional time and resources, real A/B testing could have been implemented for key website sections to validate the effectiveness of proposed ideas. Likewise, conducting usability testing would have provided valuable insights into how first-time visitors interact with the website.

Beyond enhancing Steff's website, this project sharpened my design instincts. I honed decision-making skills, learned ruthless prioritization, and developed a meticulous eye for detail. Now, confident in my design choices, I create websites that captivate both visually and functionally.
Please take a look to the interactive prototype
Go to Figma Prototype ->
Next Project -->

Leo Online Dictionary

UX Design

Button to go to the top of the website