Non-Profit Website Redesign

Broadway/Theatre Education.

Empowering the next generation of women for careers in backstage entertainment.


Redesign a website that would draw in new donors and 

participants, as well as appeal to current users.


Increase new donor conversion & retention rates by 10%, and increase brand awareness


UX Researcher

Info Architect

Content Strategy



3 months





Adobe XD

Google Suites

Adobe Photoshop

In What Ways Might We... 

  • Develop an Optimal Brand Experience for Open Stage Project's New & Existing Users?

  • Increase Donor Conversion & Retention Rates?

Empty Theater

Open Stage Project (or OSP for short) is a nonprofit that connects young women to backstage theatrical arts.  OSP teaches job readiness through workforce development, focusing on job training and resume building, to close the gender parity gap in the backstage theatre industry.

Frame 467.png
Group 1864.png




Increased Figma skillset

Sometimes you have to make trade-offs

Though I have dabbled in Figma briefly, most of my previous projects have been done using Adobe XD. My teammates expressed a preference for Figma, so it became a tool of choice for this project.

Even though we had plenty of ideas, we had to sometimes step back and consider if they were realistic with the development and the restraints on the organizations' chosen website builder.


Users don't always tell the truth

During the user research phase, our clients wanted to be a part of the Zoom call with users, which we felt, most likely, biased the responses.

The Problem

The platform was originally built by a non-designer, and it did not reflect the current look and feel of the organization.  

Websites can make or break organizations, especially non-profits, and 

  • the website lacked transparency.

  • pages were too text-heavy and felt cramped.

  • the design was outdated.

  • it was not converting well with donors.

The Strategy & Solution

Creating a site that spoke to all of Open Stage Project's customers: current and future students and donors.  

That entailed

  • restructuring of information architecture.

  • increasing relative content (images, videos, etc) for a more friendly, open feel.

  • increasing conversion by updating the donation page to reflect the organization's impact. 



Increase in website subscriptions


Increase of donor conversion

Design Process

Service Design



  • Learn what to prioritize, and identify areas of improvement.

  • Define what drives donors to give to a particular cause.

  • Do Donors feel motivated to donate to OSP? Why and Why not?


  • Student sign up isn't inviting enough, with Site look and feel was too stagnant, and monotonous.

  • Site visitors are overwhelmed by information and text heavy pages, yet site lacks vital information.

  • Donation page is not attracting enough donors.


  • Surveys

  • Interviews

  • Comparative Analysis

  • Site Audit

  • Service Blueprint 


Therein lies the opportunity to zero in on key features some users have identified, and deep dive into how, when, where, and why they will utilize them.

27 broken links

27 broken links, inconsistent design patterns, etc.


The users felt very fatigued having to scroll through several long paragraphs just to find the information they were looking for.


We had an initial round of interviews with Student and Teacher users which revealed a key set of features current users were looking for on the platform.  


UX Inventory & Audits

I wanted to pinpoint less-than-perfect areas of the digital product, revealing which parts of the site may be causing friction for users and stymieing conversions.

What my process looked like:

Business Goals

information architecture icon.png


Usability Review

Info. Architecture

Competitive Analysis

Performance & Responsiveness Testing


Visual Brand & 

Accessibility Assesments


No Call-to-actions

Current Staff Page


Pages were too dark and dated

Little to no negative space

Various inconsistencies

What I found:

How we sloved it:

Some issues found included:​​

  • Pages with accessibility concerns.

  • Pages lacking CTAs, Press page with too many competing CTAs.

  • 14.8-sec page speed.

  • 5 sub-pages not in navigation.

Some solutions included:​

  • General Style guide for consistency.

  • Cutting down on repeating content.

  • Improve Navigation.

  • Implementing prominent Donate CTA in navigation and footer.


To gain a better understanding of how we could effectively address those problems, we conducted a series of user interviews and surveys. Unfortunately, OSP couldn't get any current donors to be interviewed.  The donor pesona was informed by stakeholder interviews and other research.

This was my first time designing a product for more than three user types with varying needs.


OSP's target users are students, partner schools/teachers, mentors, and donors, each wanting different things and having contrasting needs.  We decided to focus on the two main users, defining an experience that would benefit them the most.

Girl's Portrait

Stella the Student

  • Wants a sense of community and connection to the other students.

Attractive Mature Woman

Diane the Donor

  • Wants a cause to donate to that she's passionate about.

  • Doesn't have time to be scrolling through websites to find what she needs.

  • Experiences difficulty accessing mentors on their own.

  • Difficulty finding information about future careers in the field.

Needs a personal, & knowledgable experience

  • Website lacks valuable information

Needs a seamless, enticing, & valuable experience


Comparative Analysis

  • I analyzed over 10 non-profit organizations and foundations.

  • Deep dived into non-profit website best practices and what features/services/offerings give non-profits a competitive edge.

Competitive/Comparative Analysis

competitive analysis.png

6 Non-profit website best practices included:

  1. Your mission statement should be visible upfront and on the home page. 

  2. Keep a consistent "Donate" button within reach.​

  3. Utilize visual storytelling.

  4. Make it easy to keep in touch and stay engaged.

  5. Include other engagement opportunities.

  6. Be transparent.

It became obvious after completing the analysis that OSP's website had lots of areas for improvement.  Overall, the website was suffering from issues with information architecture. There was a lack of a consistent flow that tells the organization's story and allows the user to want to support the cause.

Service Design

We were so concerned with touchpoints in the user journey (what was in front of us) that we didn't consider issues beyond an organizational level, that goes beyond the single product.

The Service Blueprint evaluates the holistic service, paying close attention to all the interactions between the user and the service. 


It was time to start sketching, but with my experience working in the non-profit industry, I still felt like there was more to uncover.  

In furthering my research, I decided it was best to incorporate principles of Service Design.


OSP Donor - Service Blueprint.  Includes Customer Journey/Actions

Using the multidisciplinary approach to organize the people, processes, and infrastructure of the service experience to improve users' outcomes led us to find missed opportunities and greater pain-points in the customer journey.

  • The organization utilized a third party payment system that brought donors out of OSP's website and unto a new tab.

  • The payment process took twice as long if the donor needed to create an account before using the system.

According to non-profit best practices, the payment process should be smooth and seamless; anything less results in donor dropoff.



When done well, service design improves the customer experience, increases brand awareness and loyalty, and improves operational performance and efficiency. Now came time to implement this in our design.

Lo-fi Prototypes

Donate/Impact Page


About Us Page

About Us.png

Individual About Us Page

Staff page.jpg
Style Guide and Accessibility

Our client wanted to stick with her original brand colors, black (#00000), white (#FFFFFF), and highlighter pink (#ED1566) and the original typography, Poppins, and Helvetica, in the new design.  

I conducted an accessibility audit, the results proved what we had suspected, the website would not be truly accessible, but changing those elements was a hard no for the client.

We adjusted the font size, weight where necessary.

OSP Style Guide

Style Guide
Design Solutions - Contact Page

One of the hardest-working but most underrated pages of any nonprofit website is the "Contact" page.

Current Contact Page

Contact Us.png
  1. Keep a consistent Donate button in reach - Donors should easily access donate button & page.

  2. Include any alternate contact numbers - Specific contact links, making it easy to keep in touch with through the right channels.

Recommended Contact Page

OSP 6.png
Screen Shot 2020-10-09 at 11.16.25 AM.pn
Design Solutions - About Us Page

Staff pages are all about conveying a human touch; people give to people.  Staff pages give people a glimpse into a nonprofit’s culture and values, fostering a deeper connection and relatability.

Current About Us Page

Screen Shot 2020-10-11 at 9.07.19 AM.png
Untitled 4.jpg

Recommended Individual

About Us Page


Recommended About Us Page

Screen Shot 2020-10-11 at 9.05.57 AM.png
Screen Shot 2020-10-11 at 9.11.59 AM.png
  1. Clear page headings - Embracing simplicity in the navigation and above the fold.

  2. Minimize page-layout - By keeping it simple with white space for balance, also consistent image sizes.

  3. Incorporate interaction and animation - On hover, the name and role of the staff member appears.

  4. Individual staff pages - Allows for a closer connection between staff and users.

  5. Clear header of staff name and role.

  6. Make it easy for users to get in touch and stay engaged - Ways to connect with staff members, include social media handles, direct business contact info.

  7. Including links to staff content, e.g., blog posts, new mentions, etc.

Design Solutions - Combination Donate & Impact Page

It helps demonstrate how donations are put to work, and it can inspire supporters to stay involved and spread the word.  Combining the two pages would essentially increase donor conversion rate.

The format for the page - PROBLEM, SOLUTION, IMPACT, ensures the site is donor-friendly.  By combining two pertinent pages - the Impact page & Donate page, makes the donation process as painless as possible for maximum impact.   

Current Donate Page

Donor Page.png
  1. Communicate impact with real numbers - Let visitors know exactly why & how their gift will be used; show numbers, provide statistics. Show organization’s solution to the problem they're trying to solve.

  2. Use visual storytelling - Incorporate photos and videos that visualize the work the nonprofit does. These elements contribute to the overall human voice of the organization and are far more impactful.

  3. Prominently feature donation button - Although there is information on other ways to donate, the focus remains on donating here and now, via CTA's.

  4. Consider Donor Diversity - Not all donors are the same; providing alternative links for donating or volunteering allows other engagement opportunities.

Recommended Donate/Impact Page

Donation/Impact page header
Screen Shot 2020-10-11 at 6.24.26 PM.png
Screen Shot 2020-10-11 at 6.24.49 PM.png
Screen Shot 2020-10-11 at 6.25.31 PM.png
Screen Shot 2020-10-11 at 6.25.10 PM.png
Screen Shot 2020-10-11 at 6.05.52 PM.png

Key Takeaways

 1. The new site has been instrumental in collecting new subscribers/emails - a 70% increase. To be frank, we placed little emphasis on the subscription form, an oversight on our part, but we're extremely happy for the uptick in subscribers.

2. An iterative approach to designing enabled us to:

  • Incorporate research into every phase of the process.

  • Explore and test many different design options to create user perfect layout and visuals.

3. I realized how much more I loved the entire process & being apart of the 'whole' product from start to launch and everything else in between, delighting users and bringing value to the business.

Next Steps

The site was handed-off to the stakeholders and is currently live.  Our next steps would be to:

Implement a single page, embedded Donate Transaction Form my team-mate designed.  Benefits include:

  • Not requiring visitors to set up an account to donate for smooth transactions.

  • Other than information required to process credit cards or e-check, the page doesn't require any other information. 

Optimize the site for mobile. Our Stakeholders wanted to focus on the Website, but by optimizing, the nonprofit will provide supporters with a better browsing experience on every device.

Transparency Is Important, especially financial transparency.  Having a link to the annual report provides even more financial transparency.  It establishes credibility and more trust.

"The heart of Open Stage is building relationships that last a lifetime."

~ Elsa Ward, Founder of OSP

Tropical Leaves
Tropical Leaves