Redesign project for pifmusic.org
Goal: Redesign a non-profit arts website with responsive design, Team Project
TIMEFRAME
Two Weeks
MY ROLE
UX Researcher
UI Designer
Presenter
MY TOOLS
Miro
Figma
User Research
Proto Persona 1
For this project, my team and I decided it would be useful to have two proto-personas for two different user journies. The first proto-persona would be the user seeking an instrument from Play it Forward.
Proto Persona 2
The second proto-person would be the user wishing to donate a used instrument to Play it Forward. Having two proto-personas helped us empathize with two user journeys and visualize two user flows.
Interviews & Surveys
User Interviews
Our interview participants indeed recognize the importance for nonprofits like Play it Forward.
“I would donate an instrument to a kid in need. I would most likely buy a new one to give away.”
“Music moves the spirit and the body.”
“Music helps teach kids basics (i.e ABCs) and makes it fun!”
Survey
Close to 70% of our users surveyed replied that if they had an instrument they could or likely could afford musical instruction for their child, highlighting the relevance of the ability for users to request an instrument from Play it Forward.
In addition, almost 40% of our users surveyed reported that they had an instrument in their home they may be interested in donating to a child who is interested in learning to play music. 21% replied they were indeed interested in donating an instrument. This data confirms that the instrument donation process is an important feature on the Play it Forward site.
User Insight
Play It Forward (Snowman Foundation) was designed to give children access to music through instruments and instruction due to lack of funds in schools. We have observed that the platform needed to continue these efforts isn’t shedding enough light on the importance of donating instruments, & money, which in return lessens the impact Play It Forward can make on children’s lives.
We believe that creating a stronger and a more streamlined platform for Play It Forward will achieve a greater interest and return on people who are willing to donate instruments, money, and time to students impacted by the lack of funds needed to learn a musical instrument in school.
Problem Statement
How might we improve the platform so that more people would be willing to donate to children wanting to learn music?
Problem Statement in place, my team and I had a clearer goal for this project.
Competitor Analysis
Here are some competitive advantages we identified in some direct competitors:
Hungry for Music
- Community newsletter for program updates.
- Music bus tour that expands their reach to communities.
- Compelling personal testimonials.
Charity Music
- Clean design with an interactive website.
Spirit of Harmony Foundation
- Merchandise for sale to expand opportunity.
- Long term commitments.
- Strong local partnerships within the music community.
User Experience Design
Heuristic Analysis
We took a look at the original website and analyzed the user interface design. Some notes we made include:
- Make the button states more clear
- Determine the purpose of the home page and the about page.
- Some text was hard to read on the background colors, improve accessible design
- Improve design hierarchy
User Journey Map 1
We had two user journey maps to represent both of our user personas. The opportunities for the first persona include:
- Inform user on the progress of the instrument request form.
- Inform user what will be required for the instrument request form.
User Journey Map 2
Our second user journey map centers on the user persona interested in donating an instrument. The original process for doing so is quite lengthy. Some opportunities are:
- Inform user at the beginning of what will be required for filling out the form
- Break the form up into steps to make it easier to digest
- Give examples of what to look for when considering donating
Brainstorm
After creating an Affinity Diagram, my team and I brainstormed using an I like, I wish, What if… activity followed by dot voting and placing the winning features in a prioritization matrix.
Clearly the donation form had plenty of opportunity for streamlining usability. We also noticed other features that were open to opportunities such as highlighting the stories of children receiving the gift of music.
User Interface Design
Style Guide
In designing this site, we created a style guide focused on the uplifting and youthful spirit of the purpose behind Play it Forward.
Information Architecture: Site Map
After my team performed a card sorting activity we reorganized the site map.
Wireframes
We created a clickable wireframe prototype in Figma for desktop and mobile.
Design Ideas
Here are a few visual design ideas we considered.
Prototype
For our high fidelity design we went with the lighter color scheme, included an interactive piano on the home page and cleaned up the donation process to make it easier to understand and delightful to use.
Key Takeaways/Future Goals
- Future goal of adding sound elements
- Add an upcoming events calendar feature
- Include a form to sign up as a volunteer