OSPmockup.png

OPEN STAGE PROJECT

Non-Profit Web/Mobile Redesign

Broadway/Theatre Education.

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

CHALLENGE

Redesign a website that would draw in new donors and 

participants, as well as appeal to current users.

BUSINESS GOALS

  1.  Increase new donor conversion & retention rates

  2.  Increase brand visibility

MY ROLE

UX Researcher, Info Architect, Content Strategy, Designer

TIMELINE

100+ hours

TOOLS

Figma

Adobe XD

Miro

Google Suites

Wix

Adobe Photoshop

In What Ways Might We... 

  • Develop an Optimal Brand Experience for OSP'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, with a focus on job training and resume building, to close the gender parity gap in the backstage theatre industry.

Learnings

01/

Increased Figma skillset

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.

02/

Always consider the website platform

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.

03/

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.

04/

Who can say SCOPE CREEP!?

We had major scope creep in this project coming to the end of our 100 hours.  We created a 'Goodbye Packets' AKA Client hand-off documents, ensuring a streamlined off-boarding.

05/

For the love of Product.

I realized how much more I loved the entire process, & being apart of the 'whole' product from start to launch, and everything else inbetween.

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 donation page to reflect organization's impact. 

Design Process

Research

Goals

  • 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?

Assumptions

  • 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.

Results

  • The site audit immediately revealed a clunky, impersonal experience, 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 research with Student and Teacher users which revealed a key set of features current users were looking for on the platform.  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.

Methods

  • Surveys

  • Interviews

  • Comparative Analysis

  • Site Audit

  • Service Blueprint 

 

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

Analytics

Usability Review

Info. Architecture

Competitive Analysis

Performance & Responsiveness Testing

Visual Brand & 

Accessibility Assesments

Recommendations

No Call-to-actions

Pages were too dark and dated

Little to no negative space

Various inconsistencies

Current Staff Page

What I found:

Some issues found included:​

  • 27 Broken external links

  • Inconsistences in visual design & typography 

  • 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

How we sloved it:

Some solutions included:

  • Use white space to give adequate breathing room between elements on your page to keep visitors from becoming overwhelmed

  • 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.

Personas

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.

Stella the Student

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

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 infomation

Needs a seamless, enticing, & valuable experience

Competitive/

Comparative Analysis

competitive analysis.png

Competitive/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.

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

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 came across the Service Design process.

 

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.

OSP_DonorServiceBlueprint.png

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.

 

Design

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

Individual About Us Page

Design Solutions - Contact Page

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

Current Contact Page

  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

1
2
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

2
3

Recommended Individual

About Us Page

4
5
6

Recommended About Us Page

7
1
  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

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.  It helps demonstrate how you’ve put donations to work, and it can inspire your supporters to stay involved and spread the word.  Also, combining it with the donation page would essentially increase donor conversion rate.  

Current Donate Page

  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
1
2
3
4

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.

Key Takeaways

An iterative approach to designing enabled us to:

  • Incorporate research in every phase of the process.

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

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

~ Elsa Ward, Founder of OSP

Tropical Leaves
Tropical Leaves

Please, don't hesitate to contact me to discuss a possible project, critique my site, or learn more about my work (or me).

BROOKLYN, NY
917-474-4384
SADE@CALLMESADE.COM

© 2020 BY CALLMESADÉ

Tropical Leaves
image: Clear page headings