Sara Sabatino’s Website
Redesign a music photographer’s portfolio
The project included a redesign of Sara Sabatino’s website, a photographer specializing in music, commercial and entertainment industry with the goal of improving its usability and and attracting a more targeted clientele in the artistic industry.
The process has included:
Competitive analysis of Sara's direct competitors
Research on the usability of artistic websites
OVERVIEW
Product Designer, UX Researcher, Branding
ROLE
Figma, Notion, Dovetail
TOOLS
TIME
2 weeks
Entertainment
INDUSTRY
B2C
The Problem
Sara's current website lacks a clear definition of personality and offers confusing navigation through her works.
So, how might we help Sara design an intuitive and easy to navigate website that attracts clients in the music and entertainment industry?
01
Research
Research Summary
To start the research off, I needed to identify Sara's direct competitors and determine how she could stand out with her uniqueness.
After this analysis, I realized that many of these sites prioritized aesthetics over usability. Despite rarely exceeding three layers of navigation, they often lacked clarity in guiding the user.
I also understood that when working on Sara’s website information architecture, I should prioritize the field she wants to approach more closely.
Based on this preliminary research, I conducted interviews with individuals from two key groups:
People around 30 y/o who are passionate about photography
Potential clients of Sara
And with the help of Dovetail I identified these key findings:
🖼️ Most interviewees pays attention to how photographs are displayed in a space, whether physical or digital.
📷 Most interviewees want to know more about a photographer
📱 Social media are a tool very much used to discover new photographers
Additionally, I included an interview with Sara herself to ensure I was aligned with her regarding the type of clients she wants to attract with her work. She provided examples of record labels and production companies, confirming that she would like to work as much as possible in the music industry.
This data allowed me to carefully work on a affinity mapping and gave me insight into the types of users that would be using Sara’s website
02
Define
After collecting and organizing the data from my research, I asked myself three fundamental questions:
🎵 How can I help Sara make her website appealing to those working in the music industry?
👀 How can I showcase Sara's personality through the layout of her work on her website?
🎨 How can I preserve the artistry of Sara's website without sacrificing its usability?
Based on these three questions, I was able to define the project goals in more detail.
03
Ideate
In finding solutions, I had to consider the constraint of the website builder that Sara asked me to use, Squarespace, to ensure she could maintain her site on her own over time in case she wanted to add or replace photos.
This led me to explore the Squarespace’s templates and determine which one would be best to customize for Sara. After reviewing a few, I presented them to her, and she chose one.
Regarding the sections and features that the website should have, I identified:
✅ A section dedicated to Sara's work with specific pages divided into: Music, Covers, Still Photography, and Commercial.
✅ About page to provide more information about Sara
✅ Contact page to give users the option to reach out to Sara via email or Instagram
Branding
When it came to branding, Sara wanted an elegant logo that used typography.
In this context, I took inspiration from the book Thinking with Type by Ellen Lupton and made some suggestions to Sara on which typefaces I thought would be best for her brand to communicate the values of creativity, professionalism, elegance, artistry, and storytelling.
In the end, Sara chose the Proxima Nova typeface, which fits perfectly with the aforementioned brand values.
04
Design
Interaction Design
After outlining the features, I began working on the task and user flows to illustrate how they would be integrated and used in Signal.
Task Flows
User Flows
Wireframes
Having a clear understanding of the features that Sara’s website should include, I started designing the low fidelity wireframes to start getting a clearer idea of how to manage the elements on the screen.
LO-FI WIREFRAMES
Desktop
Mobile
The mid-fidelity wireframes helped me clarify the information architecture and understand how to manage it in relation to the layouts of the different pages that presented different work from Sara.
MID-FI WIREFRAMES
Desktop
Mobile
The high-fidelity wireframes have finally provided greater refinement and could finally be presented to the users and I could iterate on them.
HI-FI WIREFRAMES
Homepage
Click on “Work”
Music page
Covers page
Still Photography page
Commercial page
About page
Contact page
Tap on hamburger menu
Tap on “Work”
Tap on “Music”
Music page
Covers page
Still Photography page
Commercial page
About page
Contact page
05
Test
All the participants found Sara's website easy to navigate both on desktop and on mobile
The participants immediately identified the division of Sara's works into sections
The end page navigation was appreciated
Everyone understood that Sara’s specialty is music photography, but they better grasped her sensibility by seeing more works in different fields
Two out of five participants described the site’s aesthetic as somewhat 'flat,' but acknowledged that it was elegant and that the photos added a lot of color.
Time to complete tasks:
< 35s
Time to find important info:
< 30s
Frequency of errors:
< 3
Error recovery speed:
< 7s
Final Design
Conclusions
➡️ What didn't go as planned and why?
Working with a website builder comes with many constraints. I’ve learned that when a client requests the use of a website builder, it’s crucial to help them understand from the very beginning that, while they may think they’re saving money by not hiring a developer, they will likely have to make compromises on design solutions that may not fully meet their expectations.
➡️ What could have I done better?
To me, working on a website with artistic material is always challenging because it involves embedding one language within another. The design of Sara's site needed to showcase and make her work accessible while also reflecting her personality, and this is a rather complex balance to achieve.
➡️ What did I learn?
I’ve learned to view my design as just an option rather than the solution. In having to use a website builder, I learned not to get attached to initial ideas but to achieve the set goals with the solutions available.
