Introduction
The Charles River Wind Ensemble (CRWE) is a nonprofit musical group with over 26 years of history, serving musicians, board members, audiences, donors, and prospective members. Their website was outdated, difficult to navigate, and did not clearly communicate key information or calls to action.
As lead UX/UI designer, I worked with stakeholders and site users to identify pain points and redesign the site to improve usability, clarity, and responsiveness across devices. The project utilized user interviews, competitive analysis, tree testing, and usability testing, with design iterations from lo-fi wireframes to hi-fi prototypes in Figma.
Research
Methods:
Competitive analysis of similar ensembles and platforms
Contextual interviews with ensemble and audience members over Zoom (6 participants)
Tree testing to evaluate navigation
Interview Focus:
Participants were asked to:
Navigate to specific past concert information
Explore the donation process
Investigate how to become a member
Access member resources
Open-ended questions captured their experience, frustrations, and suggestions.
Key Insights:
Outdated visuals reduce user trust and engagement
Mobile usability is poor despite notable mobile traffic
Donation pathways are clunky, causing abandonment
“Join Us” lacks intuitive forms, deterring sign-ups
Define
Problems:
1. Donation Experience: The donation process is confusing and difficult to navigate, with buried calls to action and a text-heavy layout that discourages users from completing donations, risking lost funding opportunities.
Member Recruitment: Prospective ensemble members find the “Join Us” page overwhelming and unintuitive, due to its heavy reliance on text and an off-site email-based sign-up process, which reduces engagement and increases friction.
First-Time Visitor Experience: New visitors to the site struggle to quickly understand what CRWE is, the ensemble’s purpose, upcoming events, and how to support or engage with the group. The homepage is cluttered and lacks clear, accessible calls to action that guide users toward key goals like attending concerts, joining, or donating.
Design
Sitemap
Using interview insights and tree testing, I created a simplified sitemap to improve navigation and content clarity. Key areas like donations, concerts, and joining the ensemble were reorganized to reduce clutter and make important actions easier to find, especially on mobile.
User Flows
I designed user flows focused on core tasks:
Donation Flow: Simplified to reduce scrolling and highlight clear donation options with easy-to-use Venmo and PayPal buttons.
Join Ensemble Flow: Made more straightforward by replacing email drafts with an intuitive on-site form.
Concert Info Flow: Organized upcoming and past performances into easy-to-navigate sections with dropdown menus for mobile users.
User Flows
SiteMap
Main screens:
Home page
Donation (Support Us) Page
Prospective members (Join Us) Page
Concerts Page
Desktop-first, then responsively for different viewports.
Branding
The original CRWE website used over 11 inconsistent typefaces and a traditional navy and gold color scheme with moving background that felt dated, as well as visually inaccessible. The redesign maintains the brand’s mature, professional identity by updating the colors to a deeper blue and a brighter yellow, while establishing a consistent typographic hierarchy. This balance brings a modern, cleaner, and more inviting feel without losing the ensemble’s legacy and seriousness.
Test
Methodology:
Unmoderated prototype testing was conducted with 7 participants—3 testing mobile viewports and 4 testing desktop viewports. Users were asked to complete key tasks independently using interactive prototypes to simulate real-world site interactions.
What Was Tested:
Core user flows across devices, including:
Donating to the ensemble (Venmo on mobile, credit card via PayPal on desktop)
Completing the audition interest form (“Join Us” page)
Finding upcoming and past concert information
Why:
These tasks represent primary user goals critical to engagement, including supporting the ensemble, joining as a member, and accessing event details.
Success Metrics:
At least 80% task completion
Task completion within 4 minutes
Fewer than 4 errors or misclicks per task
User ease-of-use ratings mostly 4 or 5 out of 5
Results:
All participants successfully completed tasks with minimal friction.
Mobile users found donation and join flows efficient but requested clearer cues for horizontal swiping on the donation page.
Desktop users generally navigated well but noted some confusion with menu dropdowns and donation labeling.
Overall, users perceived the redesign as a significant improvement in clarity and usability compared to the current website.
Next Steps:
Add clearer visual cues for horizontal swiping on mobile donation methods.
Finalize dropdown menus in desktop navigation for past concerts.
Clarify donation method labels to enhance user confidence.
Revisions:
I finalized the viewing past programs on mobile screens, and added dropdown menu on concerts navigation.
I added pagination for those who don't recognize the peeking card as a cue to horizontal scroll on the donation page.
I finalized the viewing past programs on mobile screens, and added dropdown menu on concerts navigation.
Fixed the mobile navigation with protyped dropdown options for concerts.
Ensured consistent copy across viewports for Audition Interest form.
Conclusion
This project successfully addressed key usability and engagement challenges on the Charles River Wind Ensemble’s website by focusing on clear calls to action, streamlined donation and membership flows, and improved mobile responsiveness. User research and testing confirmed that the redesigned site significantly enhances the user experience, making it easier for visitors to find concert information, donate, and join the ensemble. The overall feedback was positive, showing the design effectively meets the needs of diverse user groups.
The handoff to CRWE was carefully prepared with annotated screenshots and organized Figma files to ensure smooth implementation of responsive layouts and interaction behaviors. This step was critical to allowing the organization to translate my design decisions into a functional, polished website that meets both user needs and stakeholder expectations.
This project reinforced the importance of user-centered design and iterative testing, especially within a nonprofit context where stakeholder input can be limited and user needs vary widely across the site. Moving forward, continuing to refine mobile interactions and expanding content consistency will further strengthen the site’s role as a vital communication tool for CRWE. This work not only improved the ensemble’s digital presence but also enhanced my skills in research-driven design, responsive UI, and collaboration with volunteer organizations.
