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.
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.
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.
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.
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...
We delivered this survey via a popup on the website as well as to the organization's current newsletter subscribers.
This survey was delivered via the team member's individual social media accounts
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:
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.
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.
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.
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.
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.
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.
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.
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.
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.
"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.
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.
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.
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.