Healthcare Nonprofit

Design research|wireframes|project management|ux writing|Information architecture|content strategy

Summary

Client

New Orleans Abortion Fund

Goal

• Improve donation flow to increase donation frequency, amount, and enable recurring donations

• Redesign landing page to drive audience growth and increase access to health information

Role

I led the Design/Content team, which included 7 writers, translators, marketers, visual designers, and UX designers.

We were responsible for delivering:

• Style guide with updated branding that stayed true to their New Orleans roots
• UI redesign
• Sitemap
• User flows
• Revised content hierarchy
• Content strategy
• Donation/e-commerce plugin recommendation
• Bonus: Spanish-language content section

Process

Stakeholder interview

Constraints:

• Our client has little to no development resources, so our design must ready to launch upon hand-off

• Client needs to be able to manage and update content on a regular basis

• Client accepts donations, so any CMS must have an easy-to-use e-commerce/donation plugin

Decision:

We chose to implement our redesign within a plug-and-play content management system (CMS). Given the goals and constraints of this particular project, we chose Squarespace as our CMS.

We chose Squarespace for their following reasons:

• Low cost

• Self-contained: few-to-no dev resources needed

• E-commerce flow enabled

information architecture

We went through several versions of the sitemap.

User Journey Mapping

Based on our stakeholder interviews and research, we constructed a current user journey and compared it to a potential user journey enabled by the site redesign. We intended to make the process as streamlined as possible for the user, while still ensuring the stakeholder's documentation needs could be met.

sketches

We conducted a competitor analysis and researched donation-flow best practices to inform our initial sketches. We sat with our development team to ensure feasibility during the sketching process, and incorporated stakeholder feedback before creating wireframes.

Wireframes

After getting stakeholder feedback on the initial sketches, we created wireframes to help define the elements necessary for our style guide.

Mockups

next steps / implementation

We are working with the client to finalize migration to Squarespace and ensure that the donation/e-commerce flow is ready to go live.

What we learned

• The style guide needs to reflect the voice of the client, not just the vision of the designer

  • We may have the expertise, but it needs to feel right for them

• Frequent check-ins with the client is crucial, even during project sprints

• Outlining content hierarchy for developers early on helps prevent bottlenecks

• Try to ensure tasks are completed before passing off

• Make sure the team takes ownership over projects

• Functionality overrules aesthetic (though it’s nice when they tie in well together)

• Matching work to what excites your team is important to keep motivation high