LIFE Community Enrichment

This was my first web design and development project for a client. I was super happy to help this fabulous non-profit, who in turn helped me add to my portfolio.

Project Overview

Life Community Enrichment is a site dedicated to a charity who helps people who’ve fallen through the cracks. I designed this site from the ground up, using the square motif in their existing logo. The client requested a clean site, inclusive site they could use to solicit donations from sponsors.

 

Role

Digital Expert
Content Strategist
UX Design
Website Development

Tasks

Stakeholder Interviews
Wireframes
Design
WordPress site development

Team

Copywriter, Deb Bursley

Observations

I felt it was necessary to tell the story of the charity in the hero. Because LIFE didn’t have the budget for a video or original imagery, I went through several iterations of telling the story. I started off with a gif story in the hero, but the client felt the waiting for the 30 second frames, wouldn’t be effective. Therefore I opted for a static hero, with mild microanimations.

Question

Being a non-profit and not used to any real marketing efforts, the group had trouble articulating what they wanted from the site, only that it meet 501c3 compliance. How would I find a direction without much guidance?

Hypothesis

The initial QA didn’t bring about many answers in terms of a design mode, but they seemed to really love their logo. I theorized that if I built upon the squares in their logo, and used the bright colors, they’d really like that.

Experiment

I offered three initial design comps through high-fidelity XD wireframes. All three had various moods and color themes.

Analysis

Working with clients who aren’t saavy about design language requires a lot of visualization. It’s difficult to articulate direction without showing them what it would look like.

Conclusion

Rather than showcase three different concepts, I would have been better off spending the time on the concept I knew they’d choose, the square theme.

Formula

Responsiveness

Different devices, require different experiences. Even if you’re audience is all boomers, it’s still 100% necessary to build a responsive experience, viewable on all devices. Case in point, the director didn’t think it was necessary to build the site on mobile, but every day, she was viewing the site on mobile.

Library of modules

  1. When I learned that their administrator would be doing the updates and had no prior WordPress experience, I built out a library of components for her to drag and drop in place, making training and implementation a snap.

Process

Here’s the process I took. Because of the quick deadline and the client’s sparse understanding of web development, I focused on mostly visual assets, rather than detailed strategies or wireframes.

  • Discover

    Moving away from the client’s initial thinking

    The client provided a PowerPoint of content and a sitemap...
  • Define

    Site Map & Content Strategy

    I created a sitemap that showcased a version of the...
  • Design

    3 design concepts created

    I created three initial designs for them to choose from....

Site Samples

Included are a few work samples to help showcase project efforts. There were a lot of micro-interactions I built-into the site, so be sure to check it out.

Observations

My learnings from this wonderful project.

01

Patience Required

Being used to working with huge teams and corporations, I learned to slow down and move at the pace of this tiny non-profit.

02

Helping non-profits is my jam

I’ve worked with a couple of really large non-profits before, but never a small one like this. Not only did I love doing work for them, it made me feel good, too.

03

It just needs to work

When working with digitally unsaavy clients, a lot of detailed explanations are necessary. For example, how responsive web design works. And why you can’t use their print cmyk colors and hand-drawn logo font. 

04

Be Personable

After years of working remotely with large teams, it’s easy to get lost in email communication land. If you have an opportunity to stop by and chat with the client, it always works much better.

Start a Project! Get a Free Quote!

4 + 15 =