Responsive Portfolio Website for artist, Debbie Bloom
BloomingArt.com
Background
Debbie Bloom is a budding artist based in Sweden. With a past as unique as her artwork, she has a growing local following, yet no online presence. As her popularity grows, she needs a digital platform to showcase her portfolio and connect with art enthusiasts.
The Challenges
Debbie’s lack of an online presence is restricting her ability to promote her work and secure bookings with prominent local galleries and venues. This hinders the growth of her artistic career and limits her engagement within the art community.
The Goals
Create an online presence that showcases Debbie's art portfolio.
Help Debbie foster direct communication with galleries & patrons - bridging the gap between artist and her growing audience.
Project Scope
Client: Artist Debbie Bloom My role: UX Research, Writing, Design Timeframe: Q1 2024
RESEARCH
Anticipated Challenges
Post-client interview, I there were some unique challenges for this project:
As an American living in Sweden, she wants the site designed for both her English AND Swedish-speaking audience.
Debbie wants to promote her work, but she doesn’t feel ready for e-commerce on her website - yet. She needs a scalable foundation that will expand as she grows.
She has no online presence, no existing written content such as a bio, or any video footage to speak of.
Debbie would like to have the website design completed within 8 weeks.
Client Interview Highlights Constraints
For this project, meeting with the client was pivotal to understand her unique needs, vision, and the specific goals she hoped to achieve. We discussed her artistic journey, audience expectations, scope and overall project goals.
The initial meeting had another valuable outcome. It provided the opportunity to foster a strong client-designer relationship, which enhanced collaboration and instilled a sense of trust in my abilities.
Market Trends and Benchmarking: Insights For Shaping a Superior Artist Portfolio
To get a clear idea of how other artist’s present their portfolios online, I visited numerous gallery websites and art portfolios. I researched artists located in the USA and Sweden (where the artist currently resides) and throughout Europe to get an overview of current market trends. I canvassed the websites of the artists whom Debbie told me she admired and scanned several printed art publications.
My Takeaways: Successful digital portfolios & galleries often shared things in common, which were:
A compelling, well written artist statement
Social media links and integration
Newsletter signup
Clear contact information
Engaging multimedia
Responsive website design
Intuitive navigation
Clean, minimalist layouts
High-resolution images
Distinct sections
Generative Research with User Interviews
Knowing that it would be paramount to speak to likely users, I sought out people who described themselves as art enthusiasts. I conducted (6) interviews, three were conducted remotely via Zoom and Google Meet, while the other three were conducted in-person at a local art gallery.
Interview Insights: Uncovering Art Enthusiasts' Desires and the Role of Social Media in Artist Success
My primary objective of conducting user interviews was to better understand the mindset of art website visitors. By doing so, I gained a deeper understanding of their motivations, expectations, and preferences, all of which would inform the design and development of the website. My interviews revealed some common trends amongst art lovers.
DEFINE
Defining Design Goals
IDEATE
Exploring Information Architecture: Seamless Navigation with Key Pages and an Innovative Patronage Approach
My primary goal was to ensure the site's ease of navigation while using clear titles for each page and section. Based on my research, especially the interviews, it became evident that essential pages like 'Contact' and 'About' were necessary components of an artist's website.
I also decided to create a unique 'Patronage' page, inspired by the crowdfunding success of platforms like Patreon. This page allows users to connect with and support the artist in unconventional and innovative ways.
Sketching Low-fidelity Wireframes
Once I knew which pages I would be designing, I began to sketch possible layouts. I started with the Homepage since this would be many users’ first impression of Debbie and her brand - I wanted a well organized screen with ample whitespace to accentuate the artwork and artist. I extended my sketching efforts to encompass both mobile and desktop screen dimensions, ensuring a responsive layout that catered to various device sizes. These were helpful when meeting with Debbie, giving her a rough visualization of the website screens.
Home options in mobile viewHome options in desktop viewCopy Creation: Writing is Design
Based on insights gained from interviews, I knew users sought to understand the stories behind the artwork. With no pre-existing content, I felt unsure how much space to allot in my designs to accommodate this information. I engaged in detailed discussions with Debbie, to uncover the stories behind each piece and write accurate descriptions for each. Recognizing the importance of the 'About' page, I also gathered insights into Debbie's life. This allowed us to collaboratively write a biography that truly captured her essence.
By incorporating real content early in the design process, I streamlined layout planning, eliminating the need for post-design revisions. This integration of genuine copy not only facilitated the planning of the content layout but also set the stage for a cohesive design.
DESIGN
Branding Direction Is Simple, For a Modern, Contemporary Look
Shaping Responsive Mid-Fidelity Wireframes Around Authentic Content in Figma
Next, it was time to begin designing screens in Figma. At the start, I began crafting my mid-fidelity wireframes in a more traditional manner. However, it became evident that, much like my approach to copy, incorporating authentic content would be essential. I didn’t want to fit content into the design later, I wanted to design to accommodate the content.
The artist's diverse collections of artwork, in various shapes & sizes, posed a unique challenge. While arranging rows of rectangular boxes might have worked in a other mid-fidelity designs, I saw clear advantages of designing with the actual imagery. This decision provided a more direct path to the final product.
Wireframes Become High-Fidelity Screens
Because I had used real content early in the design process, my hi-fidelity screens came together very quickly. The vibrant artwork took center stage and allowed the intent of the artist to shine.
For simplicity and a modern contemporary look, I chose to use only two fonts, Raleway & Open Sans. Both fonts come in a variety of weights & styles, for versatility. The simplicity of the Open Sans made it a good choice for the site’s long form content.
By using less color within the website design, it would allow the artist’s paintings to take center stage without distraction. I sampled a vivid Cerulean blue from one of her paintings. I used this as an accent color throughout the site as well as for her wordmark logo.
TEST
Exploring User Insights: A Deep Dive into Moderated Usability Testing
For the testing phase, my focus was on evaluating the overall user experience, including aspects of flow, content organization, and presentation. I enlisted a total of 11 test participants. Four testers were acquainted with Debbie and could provide insights into the site's representation of the artist. The remaining testers had no prior knowledge of the artist and were evaluating their experience with the website independently.
Participants were not asked to perform specific tasks, but were instead asked to navigate the website freely and provide feedback aloud as they explored the aesthetics, structure, and general user experience. Their insights and opinions served as a foundation for design improvements.
Analyzing Findings: From Streamlining Breadcrumb Navigation to Amplifying Artwork Visibility. The Key 'Must-Have' Fixes Identified Through Thorough Analysis of User Feedback, Prioritized for Maximum Impact
I collected all feedback, pain points and suggestions received during testing placed it onto individual sticky notes in FigJam. I input the notes into a Impact/Effort matrix to better visualize the possible impact and the effort required for each suggestion.
From there, I clustered similar feedback from testers and prioritized them all into a MoSCoW analysis chart, defining my "must-haves", "should-haves", "could-haves", and "won't haves".
Revisions To Be Made
Now, thanks to user feedback, I had a list of the top changes that needed to be made. These changes were aimed to enhance visual appeal, navigation and user engagement.
Introducing BloomingArt.com
Takeaways
What Worked Well
Streamlining with Early Content Integration: I found it was extremely helpful to design for the content rather than trying to fit the content into the design. By incorporating genuine content early, I streamlined layout planning. This saved me time, and who doesn’t love that?
What I Would Do Differently
Because I felt confident in my writing abilities, at the start, I agreed to take on the initial challenge of helping Debbie craft all of her written content, such as her bio and the descriptive text throughout the site. This, coupled with tight time constraints, proved to be much more challenging than I had anticipated. When we started the project, I anticipated a project timeline of only 4-5 weeks. However due to the larger scope of the project, I pushed the deadline to 6 weeks time. If I was able to do this over, I would suggest expanding the team to include a writer to handle the written content.
Next Steps
Having secured the client's final approval of my design, discussions with a developer were in progress at the time of writing this case study. Looking ahead, I foresee ongoing collaboration and a smooth handoff with the developer as the project advances.
Thank you for reading!