complex monthly newsletter

The nice thing about being your own client is that you have total flexibility in designing your collateral! My priorities for the monthly email, as with most monthly emails, were: brand compatibility, readability, and clear call-to-actions.

You can see above that integrating my logo as a header was key, as was matching the color palette. The tone of the welcome text matches the language I use across channels. For artists and other brands based on personal connection, a digital and marketing voice that matches your actual voice can be a huge help. People are buying YOU when they buy your products and services, so show yourself to them!

Here’s the entire content of the email laid out:

On the left, is the tail end of the welcome paragraph and the first “story” about how UX can help my clients. In the middle is an overview of my new Patreon page. On the left is a behind-the-scenes about designing a fanny pack, plus the footer of the email.

In my experience, the key is visual distinction. The first story is the most technical with the least intuitive image. Rather than force something there, I used the fact that the purple text box pops to anchor that content. It contains a LOT of links to break apart the text and a clear button call-to-action that’s free.

I knew the third story was going to be one image, so for the Patreon story, I used four images that capture the four levels one can give to on Patreon. These images do double duty talking about how I’d use the funds if they chose to contribute.

Finally, the most art-centric element gets image on white treatment so it pops. I got multiple asks about it!

simple monthly email

Blondes vs Brunettes DC is a charity organization that puts on a big annual football game and other events throughout the fall to raise money for Alzheimer’s Disease research and care support. I’ve been a part of the organization for five seasons and last year, as a chair and as the head of the marketing committee.

Last year, my primary initiative was to launch a newsletter to former players and fans. The design was constrained a bit by brand style restrictions — the header font, logo, and colors — but you can see some layout elements below.

I find the alternating images layout particularly effective for a series of short action items and reminders. Folks generally know if they’re a player, a sponsor, or a donor, so the goal is to get folks to their content quickly. You can check out an example of a newsletter requiring more detail here.

concept redesign

In one of my UX courses this Spring, we performed a review of the Housing Authority Baltimore City website. This process involved six user tests, with eye tracking software. Based on the results of the study, which you can find here. I’ve created wireframes and a basic mock-ups for a redesigned home page and more intuitive breakdown of the two housing programs they offer.

A caveat: because this was a concept project based on an academic exercise, I didn’t purchase and plugins or assets for my mock-up. There are elements you’ll notice — like the in the footer, for example — that would not be present in a true client project and I haven’t build out some layout and navigability functions.

Wireframe Sketches

I developed these sketches based on feedback from users. You can see all of the feedback in our presentation slide deck, but I’ll outline some of the changes I made and why in these layout mock-ups I made.

Visual Mock-ups

Home Page, Above the Fold

The current home page (left) has these big beautiful images right off the bat. They display one of four values, which are randomized as they load. I love that we’re seeing both a representation of the user and a declaration of value, but there are two issues at play here. The first is that there’s no immediate information; you have to scroll down for that. The second is that you get one value displayed prominently and then a list of three more words. You wouldn’t know that all four are a value and a priority unless you visit the page many times.

The changes I’m recommending (right) keep the things that are good, but give a clear set of next steps and equal weight to each of the four values. In a live, paid site, the carousel of images would be automatically rotating and provide a tip-point pop-up explaining each value, when clicked.

Home Page, Below the Fold

The next item on the original homepage (left) is a large news item. It’s a basic update that does not require an image and takes up a great deal of prime real estate, so I added a news room banner (right), that can be used to link to stories that require more detail.

Immediately below the news story, the current site (bottom left) has a set of eight blocks, followed by a by-the-numbers style info graphic. In the blocks, the four colored blocks pop the most. All of the blocks with colors contain background information, which is important, but folks coming to this site looking for quick action aren’t going to find what they’re looking for hidden amongst these blocks.

My recommendations (right) take advantage of the vivid colors, but use them to focus folks toward immediate services. This gets folks to action items immediately, and gets folks curious about the Housing Authority to more information quicker.

In addition to getting to the by-the-numbers section faster, my recommended layout gets the up coming events to the top of the page without sacrificing the placement of top level background.

Topic Pages

Currently, folks navigate to the two primary pages — public housing and housing vouchers —from the menu bar at the top, but there’s no explanation about which is which. Folks also have to know what HCVP means off the bat. Those pages ( public housing, left) provides an explanation of public housing, but the eye is drawn to the map of properties — certainly not a first step in the process of learning about and applying for housing — and then four other programs. Subsequently, is the public housing applicants guide. This link takes you to a PDF document that outlines quite a lot of helpful information, but is hard to read and is not searchable.

Those concerns are addressed, but my main concern is that there’s no way to know what the differences are between the two programs or what you should be researching further.

My recommendation (right) is a landing page. It acknowledges that there are two programs, provides a clear link to next steps for each and, after a scroll down, provides and explanation for each program. A frequent concern outlined in the slide deck is that it’s not initially obvious that the voucher program and its waitlist are currently closed (or why). I used the news bar I added to announce that the program is closed and I added an explanation in the section about public housing (below right).

You can see the full mock-up on these two live mock-ups.

Like I said, the sites are for illustrative purposes only and are missing major elements like navigation, headers, and footers — but take a look at the flow! Here’s the original homepage and the mock-up of my recommendations and here’s the original topic page and the mock-up of my recommended landing page.

ux evaluation

The below slideshow represents a team analysis of the Housing Authority of Baltimore City (HABC) Website. We performed six user tests with eye-tracking software to come to these conclusions. I completed the recommendation section of the presentation.