UI Case Study — Homeless High Foundation

Designing and deploying a website for a small nonprofit

I designed and deployed a landing page for a nonprofit that operates in my hometown called the Homeless High Foundation, which hence will be referred to as HH. They provide homeless high school students with much-needed necessities; and they even go beyond necessities — they give Christmas gifts to kids to show them they’re not forgotten. The whole enterprise is run by one woman, and on a near $0 budget; this constraint would influence a lot of decisions in the project and test my thriftiness.

Problem / Solution

The client wanted a landing page that:

  1. Told John Doe what HH does
  2. Showed him the impact HH has had on the community
  3. Told him how he can use his time to help

The client did not have any major demands beyond this list, so it was up to me to make many of the decisions regarding the user flow and tone of the site. This at first irritated me, but I realized that would allow me to experiment with ideas and practices of effective web design. This was a small project for a small organization, so I did not put any extensive UX research and thinking into the design.

The Design

I started with just a pencil and graph paper marking down ideas — I wanted to focus on the content — along with a mind mapping chart to organize how I wanted the user to flow through the site.

Content and Structure

I immediately decided that the main purpose the the site should be to persuade the user to donate, so I put frequent CTAs to donate throughout the site.

Site header

The site first and foremost needed a header conveying the spirit of the organization; then one sentence to clearly describe what the organization does; finally, a CTA for the user to donate. The background needed to have a picture that invoked empathy for the target clients of HH, but that could be decided later.

Telling our John Doe what Homeless High does

Next, I needed to elaborate on what HH gives to homeless high school students, i.e., clothes, food, and Christmas gifts. I chose a three-card format with a color that contrasts from the background and beckons lots of space to draw attention to the main content.

Who have we impacted?

It’s important to show the impact of the nonprofit, persuading John Doe to donate — HH has helped x homeless kids. Again, a lot of space and color contrast was used to draw attention to the statistic, and specifically the number of people which HH has helped.

The words of those impacted are the most powerful

I got testimonials from the client, and displayed three to show the impact that HH has had on local high school students. Minimal elements and space helped to guide John Doe’s eye towards the words of those HH has impacted.

Visitors always need to know how they can help

The primary intended action of the site was to persuade users to help: share, donate, or volunteer. I used cards to show the user the three simple things they can do to immediately help HH.

The why behind something, and the vision, are what define a charity’s war forward

I wanted to associate the story with the local origin of HH, so I utilized a specific image of a specific bridge form the area that I will explain later as a background.

Site footer

I just wanted a simple footer to show visitors how to contact HH and spread the word. On nonprofit sites the designer has to display that the organization is classified as a 501 (c)(3) for informational purposes. I added a link back to my website as a means to acquire possible clients.

Adding Style & Media

My scribbles matured into a digital wireframe, and now it was time to start designing. I opted for Figma because it was free, and I found it incredibly quick and effective to create eye-popping designs, compared to when I used Photoshop.

Colors

I decided on a color scheme early on, which would change later on because it was atrocious in practice, of a slightly light faded blue, green, and red — like you’d find on a kids birthday card probably. I scraped the whole color scheme and found a well-saturated shade of purple, the color of graduation caps, which is heavily associated with higher education and knowledge.

My original color scheme, which I scraped

Fonts

I decided on a type system early on, Josefin Slab and Lato, whose sizes were also changed when coding started. I chose Josefin because it brings thought to the script on a high school varsity uniform, and Lato because it has a professional and minimalist look that fits with my scenario. If I could go back, I would have made the type system more uniform and test it all in the browser first beforehand.

Media

The header image was the most important since it was going to be what John Doe first saw. It needed to:

  1. Be free
  2. Create a serious and pessimistic tone
  3. Grab John Doe’s attention
  4. Depict a teenager

Finding an image that fit this specific niche was difficult, but luckily Unsplash was able to deliver:

from Unsplash by Andrew Neel

I chose this image because it fits all my requirements:

✔️ it depicts an adolescent

✔️ the photo created a serious mood

✔️ the image can really grab the attention of John Doe and cause him to scan its detail and message

✔️ the absence of a face allows John Doe to focus on his body language and let the site be the center of attention

HH is a local nonprofit only operating in one county (Brevard) in Florida. I wanted to use an image that Floridians in my area would recognize, and that could perpetuate the idea that HH is working to help their citizens in their community. To get to the barrier islands that compose my town there are several causeways that take you from mainland Florida to the various barrier island towns.

Cocoa Causeway in Cocoa, Florida — Public Domain

I used this image as the background for the Our Story section because it plays along well with the several local landmarks and schools referenced in the nonprofit’s story. I added the purple tint to create more contrast with the copy.

Development

Coding

One of the client’s demands was that I give them the option to edit the site in the future from an admin panel. While I deeply lament working with Wordpress, I opted to use it because it was the only free option that would not require me to design my own CMS (which has its own set of problems). For CSS I opted for Tachyons.css, because of its ability to allow you to really customize the style of the site.

I first designed a static version of the website that works exactly the same on the outside, except with no Wordpress backend. Then I took the files and converted it to a custom Wordpress theme with a Homepage template, post template, and page template. I used the Advanced Custom Fields plugin to allow the user to edit page variables then use inline PHP to have the page display them. I finally implemented the WP Cache plugin to create a static, faster version of the page that users would see upon recurring visits.

One area I completely neglected this time was the area of image/site optimization to make the website as fast as possible, which was a terrible and arguably unconscious decision, which probably cost the site ~1–2 seconds in first visit loading times. In the future I will definitely not skip over this.

Live on a Server

The task of pushing the local Wordpress site to a web server was very difficult because I needed to find free hosting that could accommodate a CMS such as Wordpress. I first looked at Atspace.com, but they didn’t allow you to upload .zip files to their server under the free tier. I finally found a site called 000webhosting.com under the company Hostinger which provided all I needed. I made a backup of all the files, moved it to the server, then reinstalled Wordpress.

Reflection

The project allowed me to expand my knowledge of good basic design practice for small business websites. There was a lot to learn from this project, but here are some of the major points:

  1. Time and cost should be accurately be determined before you begin anything. Without a concise way of seeing exactly what needs to be done, you do not have an accurate way to know how much time something is worth, or how much time something could actually take. You may underestimate your quantity of work and be overwhelmed.
  2. Communication is the key to success in any project. In the case where you are redesigning a website, it is key to understand the client’s and the site’s pain points by communicating directly in order to effectively address and solve them. Good and frequent communication always builds trust with a client, and lets them know that things are moving smoothly. Updates on progress every 2–4 days are best for projects of this type, and what I will follow for future projects.

Thank you for reading! I am currently available for hire as landing page designer & developer. My portfolio page is currently under construction, but you can contact me directly at info@emmanuelmark.guru.

Please leave feedback on my design decisions and my writing quality (This is my first “case study”). I want to take feedback and reflect it in later articles. If you liked this a short clap couldn’t hurt…