CHALLENGE
Redesign a website that would draw in new donors and
participants, as well as appeal to current users.
BUSINESS GOALS
-
Increase new donor conversion & retention rates
-
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?
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.
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/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:
-
Your mission statement should be visible upfront and on the home page.
-
Keep a consistent "Donate" button within reach.
-
Utilize visual storytelling.
-
Make it easy to keep in touch and stay engaged.
-
Include other engagement opportunities.
-
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 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.
Design Solutions - Contact Page
One of the hardest-working but most underrated pages of any nonprofit website is the "Contact" page.
Current Contact Page
-
Keep a consistent Donate button in reach - Donors should easily access donate button & page.
-
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
-
Clear page headings - Embracing simplicity in the navigation and above the fold.
-
Minimize page-layout - By keeping it simple with white space for balance, also consistent image sizes.
-
Incorporate interaction and animation - On hover, the name and role of the staff member appears.
-
Individual staff pages - Allows for a closer connection between staff and users.
-
Clear header of staff name and role.
-
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.
-
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
-
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.
-
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.
-
Prominently feature donation button - Although there is information on other ways to donate, the focus remains on donating here and now, via CTA's.
-
Consider Donor Diversity - Not all donors are the same; providing alternative links for donating or volunteering allows other engagement opportunities.
Recommended Donate/Impact Page
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
