The Art Experience
User Experience and Web Designer (Pro-Bono)
The Art Experience (TAE) is a non-profit, 501c3 community art studio based in the Detroit metropolitan area. The studio offers art therapy for a range of needs, art classes, community art labs (bringing the arts back into public schools), and group art parties. As a UX and Web Designer, I was tasked with creating a ground-up design, information architecture, and implementation strategy for The Art Experience’s new website.
The subsequent sections will walk through our process, core considerations in the redesign, and the final site designs.
1. Research & Requirements Gathering
Our process began with research. I met regularly with the TAE leaders to understand the organization's core business functions, goals, and positioning in the non-profit art sector. The TAE team and I collaborated to understand who the core users of their site had been historically, who the new site ideally would serve, and how we might create in service to those future guests. In addition to knowledge sharing, a heuristic analysis was performed on the old site during our research and requirements phase. This helped us understand what desired content and flows were missing, as well as, what could be eliminated from the new site structure.
The Art Experience's Core Users:
Parents & Students
Parents, guardians, and students are the main users of The Art Experience's website. They visit the website to learn more about the organization, check out programming options, review the schedule, and get directions to the studio. Sometimes they visit the site to find out more about special events that The Art Experience is hosting. Parents, guardians, and students all need to be able to reserve spots in classes, pay for classes, and get more info about the instructors who are teaching the classes.
Because The Art Experience offers special Art Therapy programs for individuals with an array of needs and exceptionalities, many parents and guardians are interested in learning more about the experience of The Art Experience's staff. They use the site to get information which makes them feel comfortable about leaving their children in the capable hands of The Art Experience team.
Students at TAE are quite prolific. As such, many students appreciate having a dedicated space to sell their work. TAE offers an online store where students can sell their work and share the profits with the studio. While students don't directly interact with this feature on the site, they are happy to know it exists as an option for them to share and sell their work.
Instructors & Staff
The Art Experience staff is an experienced, creative, nurturing group of individuals. They use the site to update their bio information, share projects on the blog, and check out class registration numbers.
Donors are major contributors to The Art Experience's funding. Regular donors attend The Art Experience's fundraising & special events to stay in-tune with what is going on in the organization and the art community.
With the redesign of the website, we saw an opportunity to treat every site visitor as a potential donor. And, with the emergence of ubiquitous computing, we believed many of the site visitors would feel increasingly comfortable with making payments on the web. Donors who contribute via the website want to know how they can help The Art Experience. They want to know what kinds of donations are accepted, where the donations go, and what they mean for the organization. They also want a frictionless way to donate, so their good deed doesn't feel like a hassle!
Board of Directors Members
The Board of Directors are occasional site users. They use documentation (like the 501(c)(3) information) and the overall site to illustrate what the organization does, to third parties. They also visit the site to understand current programming and what's new in the studio.
Old Site Design
Our Heuristic analysis of the old site revealed opportunities to reduce navigation complexity, create an improved visual hierarchy on the page, create clear calls to action, modernize the aesthetic, and enable customers to access the site from their mobile device.
2. Site Architecture Design
As a non-profit business, The Art Experience's website must serve as a means for transacting, as well as, evangelizing. Core users of the site range on the transactional side from Parents and Guardians of adult and youth participants to Adult participants, themselves. On the evangelical side, users include influential friends and members of the Board of Directors, as well as, schools and potential donors.
The content structure of The Art Experience's website was fairly complex in their prior site experience. With the new website, the team was hoping to preserve much of the existing content. We worked together to reorganize it to facilitate discoverability, usability, and SEO.
Old Site Navigation
Final Site Architecture
Final Site Navigation
3. Concept Ideation
I was so lucky to have the opportunity to work with artistically inclined, creative clients on this project. In addition to developing requirements for the project, as part of our kickoff process, we brainstormed possible visual directions for the site. We used Invision Boards to create a mood board to assess potential directions. Because of the non-profit nature of the organization, we wanted to use open source and royalty free images and fonts for the site. Ultimately, we used Google Fonts and some fabulous graphics which we customized from Freepik.com.
Below are some of the initial moodboards we created for the project. About halfway through the ideation process, the TAE team had a great idea- why not crowd-source a logo from a local art school and provide some students with an opportunity to create real, commercial work? After all, supporting art in the local, Detroit community is what The Art Experience is all about. The Art Experience team ultimately selected a beautiful, crisp and modern logo featuring three core colors- a sunshine yellow, a light turquoise, and a vibrant magenta. We reworked the style guide for the site and used the magenta color as a text accent and the turquoise as the link and CTA color.
Moodboards & Creative Ideation
Final Site Color Palette, Styling & Direction
4. Site Design & Implementation
We ultimately landed a site aesthetic that felt sophisticated, playful, and trustworthy. And so it was time to design the final pages and build the site!
We began by mapping our user goals to key features, functions, and content that would need to appear on the site. We then designed each page with those goals in mind. Below are some detailed explanations of several of our core goals, as well as, the design and implementation solutions we landed.
Create a Means for Parents and Students to Register for Class Online & Enable Easy Back-End Updates for TAE Staff
Much of The Art Experience's registration process used to be manual. But, with the new website, the team at TAE was hoping to automate some of this process through an online booking, registration, and payment system. For the site implementation, we ultimately selected Wordpress for the platform as the plugins available eliminated the need for costly, custom implementation. We implemented a design which allows parent/guardians and participants to buy now or book now online, and reserve their spot in class ahead of time. For TAE, this also helped reduce some of the unknowns associated with holding classes- like the number of attendees. As such, this design solution also serves to improve staffing related decisions for each event.
Design an Frictionless Path to Enable Online Donations
A great deal of funding for The Art Experience comes from the generous donations of local businesses and individuals in the community. A key goal of the new site was to facilitate and encourage donation behaviors from visitors. My clients and I strategized a page that is wholly dedicated to ways potential donors can help- including an overview of the types of donations that best serve The Art Experience. We created custom PayPal buttons with digestible pre-determined amounts to enable donors to easily contribute to The Art Experience's financing. We also educated site visitors around ways they can donate to The Art Experience passively, using such programs as Amazon Smile.
Create an On-Site Shop for TAE Artists to Sell Their Work
The Art Experience offers an amazing Artist in Residency program. Their resident artists have a designated work station in the studio and have unlimited access to The Art Experience's supplies and studio hours. To help fund the program and provide a source of income to the artists, one of our goals with the new site was to create an online shop which featured inventory from TAE's Etsy store. Using the Etsy API, we implemented an Etsy mini story on the TAE website.