top of page
Copy of Untitled (1)_edited_edited.jpg

Overview

     The Santa Clarita Artist Association has a problem. Their website hasn’t changed in over a decade, and users can tell. My local non-profit is down members and struggling to keep the ones they have. How can this small organization rebrand to show it can keep up with the times? By updating the face of the organization to feel more professional and show its good asset to local artists. As a new member and the youngest in the entire organization, I felt a duty to help bring a fresh perspective and volunteer to help update the site.

Suggested Site:
Roles and Responsiblities
  • Cognitive Walkthrough

  • Heuristic Evaluation

  • Stakeholder Interviews

  • User Research & Insights

  • SiteMaping

  • User Flow Diagram

  • Prototype Design

  • Usability Testing

  • Stakeholder Presentation

  • Logo Redesign

  • Building Site with Wix (Coming Soon)

Our Goal
     We wanted to revamp the brand, focusing on event registration and creating a functional, user-friendly website that reflects a professional image to attract new members. We aim to simplify the event sign-up process by developing a minimum viable prototype and boosting membership.
iphoto scaa.png

Design Process

During a fully remote 4-week project, I worked closely with a team of 6 user researchers and user interface designers to revamp the website, personally taking charge of evaluations, research, and key stakeholder interviews/presentations.

Research & Discovery

Week 1

     Planned and conducted 10 remote interviews with potential users. All must have experience with a local art event to see their preferences and expectations.

Week 1.png
Product Strategy

Week 2

     We evaluated the existing site for potential flaws and prioritized critical changes for the association’s website. I communicated issues and solutions with the Association’s Board President and other senior members.  

Experience Design

Week 3

We focussed on testing and prototyping two user flows:

  • Signing up for events and Exhibitions

  • Established the onboarding of a new member

Prototype, Test, & Iterate

Week 4

Presentation

     Created an 11-screen interactive prototype using Figma. We conducted remote usability testing, optimizing key parts of the user flow that were problematic for users. We ended the project with a stakeholder presentation.

22[Template] iPhone 13.png

Current Site
Cognitive Walkthrough/
Heuristic Evaluation

  • Fluid Page Layout: Frequent adjustments to the page layout were made due to changing banner images, resulting in multiple flow shifts.

  •  Deviation from Industry Standards: The website lacks large, high-quality images and displays uniform, centered text. It utilizes borrowed, blurry images from Instagram, causing confusion for users. Membership processes involve excessive forms and information.

  • Lack of User-Centric Content: The website's content fails to adapt to user goals, presenting a uniform experience for both new and returning users.

  • Cluttered Minimalism: While aiming for minimalism, the content ends up being cluttered and disorganized, lacking true minimalistic design principles.

  • Priority Misalignment: The website prioritizes the logo and navigation, with little else visible before the fold. The organization's name is redundantly repeated three times.

Main Issues:

     No images of art are visible on the home screen. The site feels dubious and outdated, making new users not trust the organization.

     Users signing up for their first event see that 0 people are attending all of the events because members don’t use the site.

 

iphoto scaa.png

Stakeholder Interviews:

     Personally discussed the state of the organization's site with the board president and senior members.

Key Takeaways

     They described the current site as drab and needing a redesign and modernization. They struggled to find submissions, including applications to join the organization and gallery artwork images. They also wanted to have a new logo that kept some original elements and was readable on a small card from a distance. They mentioned that many of the events had little to no attendance, and many local artists are unaware of the organization. This was our main focus for the project.

User Research

Research Plan

Gain qualitative data using a series of questions with three main objectives in mind:

  • Understand participants' expectations for an art association's website
  • ​Identify pain points to avoid during sign up process

  • Empathize with the motivations involved in participating in local art events

150

Comments

10

Participents

26-62

Ages

15

Questions

“I have a profound interest in art, and it makes me happy being around it.”
“Not knowing enough about an (art) event would prevent me from going.”

Research Insights:

icons.png
icons.png
icons.png
icons.png
Wants
  • See More Local Art

  • A Fun Activity

  • To Support Family, Friends, and Locals

  • To Engage with Community

  • Promote Thier own Artwork

Needs
  • Easy Understand Date / Time of Events

  • Understand the Cost and Benefits of Membership

  • Location and Parking Information

  • Learn of Other Events / Activities

Pains
  • Lack of Information

  • Website Issues

  • Event Cost Confusion

  • Not Knowing Size of Event/ Crowds

  • Lack of trust, due to art scammers

  • If Their Art Quality is Welcomed

Gains
  • Conveniency/ Speed

  • Seeing Featured Artists

  • Learning More About Organizations History

  • Supporting Local Artists

  • Extra Features & Benfits for Membership

  • Easy sign-up process

As a team, we also worked on a Storyboard, User Persona, and Empathy Map to better understand the emotions that would come into play in using the site. Many of the members of the organization are seniors and would have a lack of knowledge of technology standards and need to have clear, visible options.  Many artists deal with scam art organizations and might have a more skeptical awareness of site issues and devalue membership.

 

To ensure success, we did a competitive analysis of both direct and indirect competitors, including SCV Arts, Arts For LA, Artsy, Sfmoma, the New Mexico Museum of Art, and Eventbrite. This established industry conventions and compares the strengths and weaknesses of competitor websites.  We recognized that a minimalist layout helps the artwork to stand out more. 

​

We discovered major confusion between another unrelated nonprofit, Santa Clarita Arts, and our organization, Santa Clarita Artists Association

Site Map

Screen Shot 2023-02-20 at 10.08 1.png

Navigational Changes, Suggestions and Logic

There is a usability issue with too many primary navigation tabs; according to usability rules, the number of tabs should be 5-7 max. 

​

  • About Tab— now contains Newsletter Tab and the Artist 2023 Tab, renamed “Our Artists” to be more evident to new members.  I added a new page, “Board + Bylaws” because Bylaws were hard to find in the original layout, and it provides descriptions of Board Members and advertising volunteering. 

​​

  • Events + Exhibitions Tab— Contains all information about upcoming events, a calendar page, and the SCAA 6th St. Gallery tab. This allows potential new members to quickly see what events to go to and our amazing resource, our gallery.

​​

  • Call to Artist tab— Navigation remains the same.

​​

  • Donate Tab— A new tab that makes it easier for members/nonmembers to see we accept Donations, which was hidden in the About tab before. I moved the Sponsors page and added the new Merch store page link, that wasn't featured in the navigation before. However, because this isn't a donation, there might be potential confusion, and it could be placed under the About tab.

​​

  • Become A Member— Renames the Membership Tab; this rename adds a call to action. It encourages prospective new members to sign up. I added a separate Renew Membership page under this tab, which might be confusing.  However, it does make it easier to advertise volunteering to renewing members and advertising membership to new ones. The Forms page is still under this tab; however, It might be better suited to be divided under specific pages like the gallery page for Solo/Group Show Contract, Expense Voucher, and Gallery Procedures. Bylaws are now under the board members' page. The silent auction form should be under the Art Classic event sign-up page. The last thing is branding asset images, which could also be featured in the "About" section.

Suggested Site Map

User Flow

Our main problem was lack of attendance so our user flow is focused on event sign up. Wanted users to either quickly get to sign up page and to be able to look through specific events like classes or gallery exhibtions, or searching by date.

usabulity test image.png

Usability
Testing

The Feedback

​The six participants tested both mobile and desktop mid-fidelity prototypes. The most consistent comments included:

  • Event Page: No option to purchase multiple tickets

  • Events & Exhibitions Page: The user was confused with event detail texts and info text with picture in the middle

  • Homepage: There was nothing half cut off by the fold, so the user was confused if they could scroll down.

Prototyping

See how we brought our sketches to life, and rapidly prototyped and redesigned them to be usable and funtional.

Screen Shot 2023-01-29 at 1.22.png
Home Page

We featured events front and center and showcased the beautiful mural on their gallery, building familiarity with their community. This Layout remained relatively consistent throughout testing, but we redesigned it so that an event photo would be half cut off to ensure people would know to scroll down.

Screen Shot 2023-01-29 at 1.22-1.png
Screen Shot 2023-01-29 at 1.31.png
Screen Shot 2023-01-29 at 1.36 1.png
Events & Exhibitions Page

Prioritized Filter by date over visitor information, which was moved below the fold. You can scroll down and see events categorized by featured, galleries and exhibitions, and classes. Images were enlarged and allowed for scrolling through multiple events. Some text was changed to be more consistent. 

Screen Shot 2023-01-29 at 1.22-2.png
Screen Shot 2023-01-29 at 1.38 1.png
Screen Shot 2023-01-29 at 1.45 1.png
Events & Exhibitions Page

The cover photo gives you a preview of the event. You can see more details about what you’ll learn and who’s teaching before you press register. The register button was moved due to lack of visibility. Changed the photo gallery to be more consistent with other pages.

A/B Preference Testing

HAMBURGER MENU PLACEMENT

     The menu on the RIGHT GOT 57%, The menu on the LEFT got 43%. While not statistically significant to make a clear decision, the Right spent 44sec deciding while the Left spent 3min 4sec deciding. We ended up with the right. 

First Click Testing

Sign Up for Association Function

     78% of participants successfully clicked on Events and Exhibitions. While overall successful, several of 22% of participants mentioned thinking the page was scrollable and didn't realize they were making a decision. With more resources, we would continue testing.

Screen Shot 2023-01-29 at 5.02 1.png
Screenshot_20230127_093807 1.png

Micro
Interaction Animation

MICRO CHECK BETTER.gif

     After successfully completing event registration, I added a delightful checkmark micro interaction I animated to provide users with a satisfying confirmation experience. These small animations are my favorite part of designing. There is something so satisfying about adding something special to make a basic interaction fun and more enjoyable. However, creating something that is not distracting or takes too long to load can be challenging.

Final Product:

High-Fidelity Prototype

This clickable Figma prototype, updated from usability testing, was presented to stakeholders in a board meeting presentation. They have agreed to the designs, and I am currently assisting and collaborating in redesigning and building our ideas into a functional site. 

​

     In conclusion, delving into the intricacies of this project has not only been professionally rewarding but also personally enriching. Immersing myself in the local art community and learning about the 40-year-old organization has been a genuine pleasure. Despite the challenges, I find immense satisfaction in contributing to the growth and evolution of this creative hub. I have not only pledged my ongoing support but have also become an active member of the community. Looking ahead, I eagerly anticipate showcasing my own art on the organization's website and gallery, further solidifying my commitment to this inspiring journey.

My Personal Takeaways and Future Steps

​

     Embarking on this project proved to be a formidable yet gratifying endeavor. The challenge lay in navigating the limitations imposed by the association's scarce resources and the predominant retirement age of its members. Engaging in persistent discussions about design rationale and advocating for change became a recurring theme. Despite our group's diligent efforts to substantiate the advantages of our proposed design, a faction of board members expressed discontent with the prospect of any alterations. The hurdle of implementation loomed large, exacerbated by the fact that the Web Designer/IT chair had exclusively worked with Weebly. Presently, I am actively shaping and constructing the remaining facets of the website on Wix, playing a pivotal role in bringing our design to life. Moreover, it was truly delightful to connect with the passionate artists and immerse myself in the vibrant community surrounding this project. Meeting individuals driven by creativity and dedication added an enriching dimension to the overall experience.

 

     If I were to embark on this project once more, with extended time and additional resources, my ideal approach would involve conducting in-depth discussions with current members to gather valuable insights. Utilizing their input, I would then proceed to test various designs. Furthermore, accessing application submission rates would enable me to draw meaningful comparisons, examining the impact of my design choices on membership dynamics. 

​

bottom of page