Fasanella

Overview

Ralph Fasanella (1914-1997) celebrated the common man and tackled complex issues of postwar America in colorful, socially-minded paintings. Fasanella.org celebrates the 100th anniversary of the artist’s birth and brings together key works from a career spanning fifty-two years.

This project is a conceptual redesign of fasanella.org during my time at Matrix, that never ended up being fully funded to begin development. Fasanella.org still sits in it’s original state, before the redesign you see below.

Skip to Visual Comps

Problems

The project began by indentifying the underlying problems the current site hosts. Through a thorough site analysis and user interviews from students within the College of Art and Design at MSU, we identified the key issues we wanted to tackle:

Main Problems

• Fasanella.org hardly showcases Fasanella’s work / paintings. Paintings are spread out across several pages, and there isn’t one place to see them all, to filter them, or to search through them.
• It's unclear immediately who Ralph Fasanella was and what his mission was. The home page features an essay length of text that doesn’t summarize Ralph’s mission and work properly. Users felt overwhelmed, and left not knowing exactly who Ralph was and what made him important.
• Little to no information on Ralph’s Social justice mission, and no way to help support that mission.
• Little to no information on where to find his work in person. Finding out where a single specific painting is in real life is impossible.
• Site feels too dark and is unreflective of Ralph’s work.

Sub-Problems

• Site navigation is a mess and has too many options at the top level of navigation. Users felt confused about where to go, since multiple options seemed similar, and there were so many of them.
• Old Wordpress site with a theme that doesn’t do Fasanella and his work justice
• Lack of resources specifically geared toward teaching about Fasanella’s art.

Original site, before the redesign. See more at fasanella.org

Goals

Main Goals

• Make it clearer off the bat who Ralph Fasanella was and what his mission was, and make it easier to learn more.
• Make it possible to learn more about Fasanella’s social justice mission, find ways to get involved in the mission, and find other projects that are devoted to the same cause.
• Better showcase Fasanella’s work, bring it more front and center, and bring all of his work together in a single space.
• Make it easier to find out where you could view Fasanella’s works in real life.
• Lighten the site up a bit, add more colors to better reflect Ralph’s work.

Sub-Goals

• Simplify and reorganize the site navigation to make it clearer to get to the main features of the site.
• Rebuild the site from scratch to allow for our own custom design, and our custom code code structure, making it easier to update in the future.
• Lack of resources specifically geared toward teaching about Fasanella’s art.
• Make it clearer and easier to donate to the project.

Future Goals

After the redesign is implemented, we could then focus on some bonus goals we established from user interviews.

• Provide teachers resources and lecture guides to allow them to better teach their students about Ralph and his work’s impact
• Create a forum experience allowing experts to connect and offer a venue for contemporary artists communicating the political events of their time in a compelling, direct, and visceral way.

User Personas & Interviews

This process began by interviewing grad students and a couple of professors within the College of Art & Design at MSU. We asked what goals each may have if they were to use the site to learn more about Fasanella, along with what features may currently be missing. I developed a few anonymous user personas based on these interviews below.

Site Map & Wireframing

During our interviews, we asked willing participants to also complete a card sorting test, which helped us finalize an updated site hierarchy, that made the most sense for our target users.

Wireframes

Wireframes were developed quickly based on the updated site hierarchy. Feedback and iteration between the project stakeholders occurred, as well as additional prototyping and a grad student user test within InVision (when that was a thing). Below are the wireframes in brief.

Visual Comps

The visual redesign lightens up the site with a bright white to allow Fasanella's works to shine and breathe. Ample white spacing between art pieces allows for numerous paintings to be shown on a single page without visual clashing. Information on Fasanella, as well as featured artwork provides users with immediate background on who he was, and why his work is important. From the landing section, it's easy to continue learning more, or to continue browsing his art. There is now a dedicated "Work" link in the navigation, making it clear where to go to see all of Fasanella's works.

Based on feedback during the wireframing phase, it was determined the site should also have two focuses; one to learn about and view Fasanella's work, and another for his Social Justice Initiative - which would include a large number of resources, events and more. Tabs were added above the main navigation to clarify what focus is selected, while remaining unobtrusive.

Measuring Success

To determine the success of the redesign of Fasanella.org, before and after user interviews on various problem tasks would occur. Additionally, studying the before and after analytical data to determine if user’s explore more than just the home page, and actually dive into his works and his mission, as well as if there is an increase in the site’s donations.