No items found.

Chicago Tiny House

Overview
Ending Homelessness One Tiny House at a Time

Chicago Tiny House, Inc is an incredible grassroots nonprofit seeking to end homelessness in Chicago One Tiny House at a Time. The issue is urgent so they jumped before they were ready and have been slowly building their digital presence as they go. I found their site, connected with their mission, got excited about their solution, and saw a perfect opportunity to use my skills to give back.

The Problem

Chicago Tiny House has a great team, a great mission, and a great plan; however, their website did not communicate this very well. A confusing menu, inconsistent design and layout, and a weird donation experience not only caused them to miss out on donations, it also caused users to lose trust in CTH’s ability to use their donations effectively.

The Solution

With this redesign, we set out to restructure the information architecture, create a consistent design and layout, and optimize the donation experience with the goal of increasing awareness of both the issue and the solution and inspiring action.

Type
Time
2019
Chicago Tiny House
Website Design
Client

01  Discover

Website Audit

Understanding the Current State

We started defining our solution by doing a complete site audit, digging into the current content and structure as well as for analytics. Though our data was fairly limited we were able to get a decent picture of how people interact with the site currently and what the high-value content was.

The website audit revealed a lot of areas of improvement but the top three were the navigation, donation experience, and overall style and design.

Original homepage & website audit

‍

Primary Research

We needed to understand While we didn’t have the ability to conduct interviews, we needed to get some firsthand feedback about how people perceived Chicago Tiny House’s website, as well as some general perceptions and expectations for nonprofit websites in general. We decided to do two different surveys to understand...

  1. Who is Chicago Tiny House's current audience and how they interact with the website
  2. What does a more general donor audience look for in a nonprofit's website
Survey 1: Understanding the current audience

We delivered this survey via a popup on the website as well as to the organization's current newsletter subscribers.

Guiding Questions:

  • How well do you know the organization?
  • How are you involved with the organization (Donor, volunteer, etc.)?
  • What is difficult or frustrating with the website?
Results
  • People who frequently visit the site or are a part of the newsletter don’t donate often but are mostly looking for new events and updates.
  • A surprising result was 33.3% of people who have donated in the past found the process rather difficult and a little hard to find things they were looking for.
  • Another notable result is 33.3% being only somewhat familiar with Chicago Tiny House’s mission statement.

Survey 2: Understand a future audience

This survey was delivered via the team member's individual social media accounts

Guiding Questions:

  • What makes you likely to donate to an organization?
  • Where do you spend your time researching new nonprofits?
  • What content makes you likely to donate to a nonprofit?
Results
  • People who are at least semi active with donating want to donate more.
  • With websites being where most people get their information and 56.3% spending 30 minutes or less, the website needs to build trust quickly.
  • An unsurprising 75% of people don’t feel like they need to receive anything for donating, showing that offering merch for donations shouldn't be the primary donation strategy.

Secondary Research

For our secondary research, we reviewed websites with missions similar to Chicago Tiny House’s as well as some others local to Chicago knowing that local Chicagoans had the highest potential for becoming CTH donors. We also reviewed some best practices when it came to nonprofit websites. Some of our top findings were:

  • Use vibrant imagery & design elements that tell a story
  • Have an immediate and obvious call to action
  • Use a cohesive design and layout

‍

02 Define

Information Architecture

Before we could start imagining what the website would look like we needed to define how it was organized

The old menu had way too many main menu items, had confusing page names, and contained information that should be in the footer.

We planned on highlighting the donate page in the main menu, so we chose to give it its own space in the main menu. The store got its own space as well because it didn't quite fit into any categories with the rest of the pages.

We chose to use projects, about us, and get involved as main categories to align with business goals and address user expectations.

My Account and Cart got their own space above the main menu to be accessible but unintrusive.

And the remaining items were placed in the footer.

03 Ideate

Sketching

After organizing our research and defining our core focus, we began to sketch out some ideas. Each group member took time to sketch out some layout concepts and explore what could be. Then, we came together to share our sketches and merge the different ideas into an optimal layout.

04 Design

Wireframing

With a general layout in mind, we started wireframing. We chose to focus on six pages because what we found were the highest value pages. Focusing on mobile-first, we completed a few iterations of our frames ensuring that all necessary content had a space on the appropriate page.

Style

Injecting the design with the spirit of Chicago

When it came to branding, all Chicago Tiny House had was a logo. This was a great opportunity for us to define the brand in a way that made sense for the UX. The logo is in the colors of the Chicago flag, and since the most likely donor is a local Chicagoan, we wanted to keep with that spirit. The light blue and red look great on the flag, but don’t necessarily work as primary colors for the web design, so we used dark blue as a base and used light blue, red, and yellow as accents.

Imagery that inspires

The imagery was one of the most lacking elements on the original website. We knew we had to bring in some images of homeless individuals, but we wanted to remain respectful of how they were represented. We specifically chose images that would communicate homelessness, but still celebrate the individual. We wanted to represent the souls, not the condition, and help users connect with the people they could be helping.

Iterate. Iterate. Iterate.

As we began to pull the visual inspiration into a functional design, we went through a few iterations before landing on something we were proud to present to the client.

Sometimes the previous design and layout can impact how we imagine what could be. One example, in particular, was the tiny house diagrams. These are incredibly important since they are the only visualization of what they are fundraising for, but it didn't feel like their presentation was right, and we couldn't figure out why. After a couple of iterations, we realized we needed a solutions page. A page that explains how Chicago Tiny House is solving the homeless issue. This provided a natural and logical place for these diagrams to live.

Final Designs

Making the first impression count

We sought out to inspire, empower and engage any user that landed on the site. Everyone is pretty aware of the homeless crisis in American cities and so many people want to help provide relief, but few organizations do this effectively. We wanted to make sure people knew this is an organization they can trust and an avenue to participate in relieving homelessness in Chicago. We refined the information and made it easily scannable so users who Chicago Tiny House is and what they do within moments.

Establishing trust and Confidence

We wanted to ensure that potential donors could find the information they needed to feel confident in donating to this organization. We gave users the option to be very specific about where their donation goes and give the amount they felt comfortable with, but we also gave suggestions to help them understand what would help the organization the most. We also provided funding meters allowing donors to compare funding to progress and hopefully see a direct correlation.

A fresh and clean storefront

Selling merch is a great fundraising & advertising strategy, so we wanted to elevate the shop experience within the site. The new space highlights the products and makes it very clear that all funds go directly towards building homes.

05 Outcome

"Very impressed with your team and I'm proud to have you guys on board! " - Brien Cron, Founder

This was a great project to work on and such a fun way to give back to an organization that is doing great work. Brien, the founder, was incredibly pleased with the outcome of the redesign and eager to see it built out.

Next Steps

I will be working on the build-out, slowly transitioning all pages to the new design. Once complete we plan on getting more user feedback and doing some minor user testing to refine details in the design and function.

Reflections

Leadership:

This was my first experience as a UX lead and I thoroughly enjoyed it. At times it was difficult managing client expectations, timeline, and team collaboration, but in the end we found a system that worked for this team. I plan on getting training in project management to improve on this in the future.

Research:

Looking back, I would have developed a more robust research plan that consisted of interviews along with an improved survey. We got good information from what we had, but it would have been helpful to have more knowledge of users' expectations.

‍