WEBSITE REDESIGN
THE ART ROOM
PROJECT SUMMARY
The Art Room is a non-profit organization based in Denton, Texas, designed to create a safe and supportive studio environment for adults with mental health issues.
We wanted to create a more streamlined donation process in order to make it easier for users to contribute to the Art Room. By making the site more interactive and visually pleasing, we hoped to motivate the user to return to the site and donate, continually supporting the ArtRoom non-profit organization.
Product Designer
User Research, Visual Design, Prototyping & Testing
Timeline
~3 Weeks
Year
January 2021
THE DESIGN PROCESS
I collaborated with two other team members, Emma Robertson and Rachel McCoy, to complete this project.
We worked together to complete user testing and analysis. Based on our research, we found that potential donors would like to know how their donation is being used so they can see the direct impact they are creating within the nonprofit organization. We brainstormed how we could improve The Art Room's donation page to reassure its donors of how their contributions have been utilized and the impact they have made? We worked together during the definition and ideation phase to find the best solution for the problem.
I was tasked to head the visual design and layout of the re-design and prototyping. I applied the selected style guide, designed the home page and donation page to the high fidelity layout, and wireframe the site.
RESEARCH
50%
USERS
PREFER TO INTERACT WITH NON–PROFITS BY DONATING EITHER MONEY OR SUPPLIES
64%
USERS
WANT TO SEE EXACTLY WHERE THEIR DONATED FUNDS OR SUPPLIES ARE UTILIZED
85%
USERS
WOULD LIKE TO SEE ARTWORK CREATED WITH DONATED SUPPLIES
Following our competitor analysis, we did a total of six interviews. We grouped their responses into an affinity diagram with main categories of supported nonprofit organizations, motivations to support, pain points, preferred payment methods, and likes. From our feature prioritization matrix, these were the three main categories we wanted to focus on incorporating in our redesign. Based on the data, we discovered users were more likely to donate if there was a personal connection, had multiple secure payment options, and if the organization highlighted how the donations were being spent.
DEFINITION
To understand the user and prioritize key features that would improve the user experience.
AFFINITY MAP
After collected our interview responses and identifying our typical donor’s pain points and motivations. We created an Affinity Diagram and Empathy Map.
USER PERSONA
Using our Affinity Diagram, we identifying our typical donor’s pain points and motivations and created our user persona. Meet Melody - she is an artist herself who has a personal connection to mental health awareness. She wants to support a local community of artists and share the same opportunity to experience the joy of creating and healing through art. Her biggest pain point is not knowing how her contributions are being specifically used.
IDEATION
To generate ideas and solutions for the redesign
By creating 'I Like, I Wish and What if' Diagram and Features Prioritization matrix. We discussed and discerned what features would improve the user experience.
FEATURE PRIORITIZATION
We prioritize the main three features to streamline donating supplies and visualize donations because it would make the most impact.
Multiple Payment Options
Users can make donations through multiple payment options, i.e. Venmo, Apple Pay, PayPal, etc.
Interactive
Wishlist
Users can see which items are needed on the supply list and interact with each to see their function.
Interactive
Fundraiser
Making the donation more interactive and show donors the impact they are making with a progress tracker.
INFORMATION ANALYSIS
CARD SORT
After reviewing the current website, we completed a card sort to organize the site better.
The Art Room
Redesign Site Map
SITE MAP
From our structure column of our card sort, we proceeded to make a sitemap that outlined the flow and setup of our navigation.
During this process, we noticed how repetitive some sections were. When we restructured, we consolidated a few subsections. On the original design, there were three different pages for donating. From there, we grouped them all into one page.
LO-FI PROTOTYPE
LO-FI Wireframes
LO-FI WIREFRAMES
We initially all created our own separate low-fidelity wireframes in Figma and InVision to brainstorm the layout and features, but then once we regrouped, we further iterated the designs into a singular low-fidelity wireframe.
By having more samples and ideas and really thinking throughout our own thought processes individually, we could pick and choose which ones would be the best for our redesign when we regrouped. We were really focused on hierarchy and navigation.
Homepage
Donation Page
USABILITY TESTING
To identify any usability problem, collect data, and determine user satisfaction with the product
The original website has multiple pages for the user to donate. So in our usability testing, we wanted to focus on the user navigating from the homepage to the donation page when testing our lo-fi fidelity prototype. Each task resulted in high success rates.
TASK 1
Can the user navigate to the donation page?
TASK 2
Can the user select an item from the wishlist?
TASK 3
Can user pay through quick check out feature?
Usability Testing
Results
100%
50%
0%
TASK 1
TASK 2
TASK 3
CONCLUSION
NEXT STEPS
SHARE WITH THE
ART ROOM
We want to share our high-fidelity prototype with the Art Room organization as the board was actively trying to update their website when we contacted them.
SHARE CURRENT ARTWORK
Another area we would like to expand upon would be to allow donors to stay up to date with current artwork made possible due to their donations, either through social media or email campaigns.
TOKEN OF APPRECIATION
Donors can opt to receive a token of appreciation like a piece of artwork created by an artist from the Art Room as a reminder of their contribution and motivate them to donate again in the future.
HI-FI PROTOTYPE
Since the Art Room is an art therapy non-profit organization, we want to choose a bold and colorful palette that would pop against the black logo and express creativity and fun. So we went with bright pinks, teals, yellows, and purples.
HI-FI Wireframes
Donation page
Home Page
