Redesign project for pifmusic.org
Goal: Redesign a non-profit arts website with responsive design, Team Project
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
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.
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.
- 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
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
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
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.
We created a clickable wireframe prototype in Figma for desktop and mobile.
Here are a few visual design ideas we considered.
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