WHAT WAS THE PROJECT?

Website redesign for educational nonprofit focused on forming ethical and morally courageous leaders

Image is of The Dietrich Bonhoeffer Institute's Hero Image: a blue tinted close-up image of Dietrich Bonhoeffer.

Client: The Dietrich Bonhoeffer Institute

Project Summary

Redesigned the nonprofit’s site to match their new brand identity and show off their capabilities.

The Strategy

Lead with mission, bolster with services, support with facts. Showcase how they are achieving their mission front-and-center.

Results

Streamlined Content Design. Site now matches new brand identity and has eliminated redundancies.

  • Content Audit

  • Copywriting

  • Information Architecture

  • Experience Design

Responsibilities

MY ROLE IN THE CREATION OF TDBI SITE REDESIGN

User Research

Developed product strategy and conducted simple user research with executive leadership.

Experience Design

Designed interface, developed prototype, and iterated issues identified by the accessibility audit.

Image is of pencil

Content Design

Created and developed streamlined content design.

COMPANY OVERVIEW

The Dietrich Bonhoeffer Institute (TDBI) forms, supports, and encourages ethical and morally courageous leaders to address the social crises of their time.

TDBI strives to create a world where ethical reflection is part of the process of religious, civic, and political engagement and is informed by the life and thoughts of Dietrich Bonhoeffer.

TDBI does this through:

  • Gun Violence Prevention

  • You Welcomed Me

  • The Virago Collective

Image is of laptop with an image of Dietrich Bonhoeffer on the right side of the screen and heading with the words Dietrich Bonhoeffer on left side of screen.

COMPANY OVERVIEW

The Dietrich Bonhoeffer Institute’s key programs are designed to provide direction for concrete action to turn ethical challenges into solutions.

Image is of two bullet cartridges.

Gun Violence Prevention

TDBI sees gun access, gun ownership, gun use, and gun violence as moral subjects in need of religious and ethical examination and action. 

Image is of the backs of four women huddled in a semi-circle, with their hands on the shoulder of central female figure.

Virago Leadership Collective

Program’s purpose is to build a national coalition of women of faith with effective skills to support civic engagement for the betterment of women and their communities.

Image is of yellow and blue background of an outcropping with the words You Welcomed Me: A Seven Part Conversation.

You Welcomed Me

A series of in-depth recorded conversations with top Christian leaders on topics pertaining to immigrants and refugees.

PROJECT SUMMARY

The Dietrich Bonhoeffer Institute saw an opportunity to simplify and modernize their outdated website and improve user engagement through a website redesign… and it worked!

Key Success Metrics Since Redesign

67%

reduction in webpages

organic visits within one month of website redesign

330+

max. increase in traffic in a single month

55%

THE DESIGN PROCESS

I collaborated closely with a UX Designer, Web Developer, and Project Manager from research & discovery through launch of new site.

Image shows our design process for The Dietrich Bonhoeffer Institute's website redesign.

RESEARCH & DISCOVERY

We planned and conducted multiple remote interviews with TDBI executive director to understand who their users are and how they typically use their website.

Image is a list of TDBI's Needs, as outlined by the Executive Director Rev. Hope.

RESEARCH & DISCOVERY

We conducted a Jobs-To-Be-Done task to understand TDBI’s core problems and needs and strategize ways to solve their main need – site  simplification and clarity – as best as possible.

Image is of the jobs-to-be-done task we created to best understand TDBI's core problems and needs.

PRODUCT STRATEGY

The individual interviews and Jobs-To-Be-Done revealed design opportunities for TDBI.

TDBI's Design Opportunities
Redundant content is a seemingly harmless mistake to make… but over time, it saps your site’s SEO potential and gives your readers a poorer user experience.
— Jeffrey Kranz, Overthink Group

PRODUCT STRATEGY

We also created a  sitemap to help visualize The Dietrich Bonhoeffer Institute’s site structure and understand more clearly how users would navigate through the simplified site.

The complication we experienced here was separating what was essential, what was redundant, and what would potentially be nice to include as they continue to develop.

EXPERIENCE DESIGN

Reverend Tobias is a religious leader who has heard about The Dietrich Bonhoeffer Institute from colleagues and wants to learn more about who Dietrich Bonhoeffer is and why he should follow his moral and theological lessons.

Image is an illustration of a bearded man who is a tdbi sample user.
Image is a laptop showing where users can learn more about Dietrich Bonhoeffer or learn about his ongoing influence in Schenck Talks Bonhoeffer.

EXPERIENCE DESIGN

Reverend Tobias is a religious leader who has heard about The Dietrich Bonhoeffer Institute from colleagues and wants to learn more about who Dietrich Bonhoeffer is and why he should follow his moral and theological lessons.

Image is a laptop showing an article about Why Dietrich Bonhoeffer.

EXPERIENCE DESIGN

Reverend Tobias is inspired by what he learns about Dietrich Bonhoeffer and wants to support TDBI after learning more about their work and resources.

Image is of a laptop showing an image of TDBI's 3 core programs: Gun Violence Prevention, Immigration/You Welcomed Me, and Leadership Formation.

EXPERIENCE DESIGN

Reverend Tobias is inspired by what he learns about Dietrich Bonhoeffer and wants to support TDBI after learning more about their work and resources.

Image is of a laptop showing where users are directed to when they decide want to donate to TDBI.

CONTENT & INTERFACE DESIGN

Prior to our website redesign, TDBI had 8 pages listed in their navigation menu, 24 total pages, an excessively long footer, and an outdated design that no longer fit with their rebranding efforts.

Image is screenshots of TDBI's old versus new homepage design.

CONTENT & INTERFACE DESIGN

We focused on communicating TDBI’s moral, ethical, and educational story with simplicity and with heart.

Here are the design changes we implemented: a parallax Hero Image with CTA inviting users to explore TDBI’s programs and resources, a drop-down hamburger navigation menu, a sticky Give Today button, and a hoverable (clickable on mobile) section on the Mission and Vision.

Image is of three laptops showing different parts of TDBI's homepage, including the Hero Image and Navigation menu, Mission, and Vision.

CONTENT & INTERFACE DESIGN

Redesigned Gun Violence Prevention, Immigration/You Welcomed Me, and Leadership Formation pages all provide clear context of what the program does and supplies users with helpful resources.

Here are the design changes we implemented: all program-specific resources are included in one centralized location and TDBI’s stance on such issues stated plainly.

Image is of three laptops focused in on different parts of TDBI's Gun Violence Prevention program page, Immigration/You Welcomed Me page, and the Leadership Formation page.

PROTOTYPE, TEST, & ITERATE

Due to the limited timeframe we had to complete the website redesign for The Dietrich Bonhoeffer Institute, we opted to conduct an accessibility audit and directly fixed key design issues that were discovered.

Image is of key issues outlined during accessibility audit that were fixed directly.

OUTCOMES & LESSONS

The Dietrich Bonhoeffer Institute’s redesigned website proved to be an organic source of new users, with a high of 367 organic visits in a single month.

Key Success Metrics Since Redesign

67%

reduction in webpages

organic visits within one month of website redesign

330+

maximum increase in traffic in a single month

55%

OUTCOMES & LESSONS

The Dietrich Bonhoeffer Institute’s chic Bauhaus-inspired website and streamlined content design has delighted new users and encouraged burgeoning ethical and moral courageous leaders to address social, moral, and ethical crises.

Key Outcomes & Results

  • 237 Referring Domains from other websites, over 50% of which are from other religious organizations or social justice organizations.

  • 112 Organic Keywords to attract organic, free traffic through Search Engine Optimization.

  • Over 1.3k Backlinks, illustrating strong organizational legitimacy.

Positive Takeaways

  • The Dietrich Bonhoeffer’s redesigned website is a hit with the client and with new users.

  • Simplified navigational user experience of the website makes it more accessible to its target demographic of religious leaders between the ages of mid-20s to mid-60s.

Previous
Previous

Star Lores: A Disney+ added feature that provides viewers with enhanced MCU viewing experiences.

Next
Next

Families Strengthening Families: Website redesign for nonprofit focused on service-learning programs