Research

TMI vs. WTF

The founder mentioned that donors were confused about whether they were donating to a business or a non-profit. I suspected that this feedback drove Supply Hope to re-write their website copy, resulting in a vague and confusing landing page.

Competitive Analysis

Who’s Nailing It?

Armed with user insights and business goals, I was ready to take a more critical look at how the site helped or hindered the user’s journey. Three UX issues stood out to me:

1. It was difficult to find information about micro-franchising. Supply Hope mentions micro-franchising on their landing page but doesn’t explain this niche term. There’s an invitation to “learn more” on the landing page, but this link takes you to the Mercado Fresco subpage, not the “Micro-franchising” subpage with the helpful video and definition of the term.

2. The pages were not scrollable. Each page was separate from the other pages under the navigation tab even though they were related by topic. This required the user to scroll back up to the navigation bar to continue reading.

3. There were no calls to action. The website didn’t feel like it was driving the user towards a goal. While there was a donation page and a newsletter signup form, these actions were not prioritized.

Problems Before Solutions

Overall, I didn’t think that the website was taking the user on a clear or engaging journey. I researched other non-profits to get a sense of their storytelling and two themes stood out to me: demonstrating proven impact and clearly describing the problem they’re solving.

Impact

The first thing I noticed was the other non-profits’ focus on data. Competitors made key numbers clear by integrating explanations of their work with results: i.e., how many operations, money raised, growth, etc. Several had a navigation header titled “Impact” or “Our Impact” - my research showed that some (but not all) users care about non-profit’s proven impact. Supply Hope’s website features quantitative data, but it’s not prominently featured - for example, several statistics can be found on a slide deck in a subheading called “Year in Review.”

Problem-solving

I also noticed other non-profits clearly explained the issue their organization addresses on the landing page. For example, New Story Charity delineated the scope of homelessness and how they’re solving the problem. Supply Hope’s landing page has a wordy statement about what they do, but not the problem they’re solving. I remembered an early conversation with the founder, in which she explained that she wants the website to be about hope, not the pain and problems of poverty. I admired this approach, but wondered if it was contributing to the lack of clarity about Supply Hope’s mission.

 Research Conclusions

While stories motivate people to donate, quantitative information helps provide context. Every story has a setting and an inciting incident. In telling the story of Supply Hope, I realized I needed to provide users with the Who, What, When, Where, and Why before I took them on a journey. I wanted to achieve this by incorporating the statistics from the “Year in Review” decks into the landing page.

Then I converted my rough brainstorm into a sitemap. I kept the existing navigation title “What We Do”, but changed “Get Involved” to “Join Us” and “Donate Now” to “Donate” to keep the navigation titles from being too wordy. I removed the “Year in Review” and repurposed the “About Us” category to be a subheading that would explain micro-franchising as a key component of Supply Hope’s mission. I also added the category “Our Impact” to reflect my insight from user and competitive research: that proven impact motivates users, tells a story, and helps achieve business goals.

 After discussing the proposed sitemap with the Project Manager, we made further edits. She reminded me that one of Supply Hope’s goals was to de-emphasize the business side of their organizations, so a subtitle called “Our Businesses” was not going to work. She communicated to me that the founder wanted to keep the “Year in Review” slide decks, so those made a return under “Our Impact.”

We also discussed whether the micro-franchises are a subcategory of “What We Do” or “Our Impact”. We agreed that since they are the core component of Supply Hope’s mission, they should be moved to “What We Do.” This made sense from an information architecture and storytelling standpoint, because “About Us” is also an explanation of micro-franchising. Since the new designs are scrollable, this would serve as an intro to the more detailed information about Supply Hope’s micro-franchises (Mercado Fresco & Fresco Express) below.

Card Tricks

However, as I was sketching the wireframes something didn't feel quite right about the sitemap, so I went back to the drawing board. Ultimately, I was questioning whether the information architecture would be intuitive to someone who knew nothing about Supply Hope or micro-franchising, so I conducted a card sort. I asked 10 participants in our target demographic categorize each page on our website. I chose to do an open card sort to further test the navigation titles.

Key Insights:

1. Most people didn't know how to categorize "Mercado Fresco and Fresco Express" - that makes sense. 

2. Most people separated the cards about the team (“Our Founder,” “Our Team,” “Contact Us”) from the cards about impact (“Where We Work,” “Who We Serve,” “Meet the Families,” “Year in Review).

3. Categories fell into a few common groups: "Who We Are," "Our Mission/What We Do," "Our Impact," and "Get Involved/How to Help"

Conclusions:

The data showed me why my original wireframes weren’t working: I couldn’t figure out how to transition from information about small businesses to a section about the founder. Reflecting the most common card sort groupings, I split up the original “What We Do” category into “Our Mission” and “Who We Are.” I moved the Mercado Fresco & Fresco express page to the Our Mission section.

Sketching a Story

Once I had a clear idea of how I would structure the site’s core content, I had a better understanding of how I wanted the landing page to flow. I designed a digital low-fidelity wireframe that would feature the new copy I had workshopped with the Project Manager. My biggest priorities were:

1. Describing the problem. I hint at the problem (“the cycle of poverty”) in the hero title and provide more detail in the “How It Works” section.

2. Introducing micro-franchising early on without getting too into the weeds. I accomplished this via an explainer video and progressive disclosure (“Learn more”) in the subhero.

3. Integrating statistics. I gathered statistics from Supply Hope’s “Year in Review” slide deck and wove them into sections throughout the landing page.

4. Applying CTAs. I added several “Donate” buttons, a newsletter form, and several secondary CTAs (i.e. “See our impact” and “Join us.”

Scroll through the digital wireframe for the landing page:

Visual Design

Colors of Hope

In addition to content and information architecture upgrades, Supply Hope was looking for a visual refresh. They weren’t interested in changing their brand color or logo, so I worked within their existing color palette. Their brand color - a bold primary red - was meant to evoke aid and service (i.e. The Red Cross). The other most frequently used color on their site was a light green, meant to evoke fresh, nutritious, and healthy food. The project manager noted that she typically uses one or the other because she didn’t think they worked together.

Brand materials from Supply Hope’s website

My goal was to take the energy of these two colors and make them more visually complementary. Since bright red typically signifies something wrong, I wanted to soften the color while still keeping it in the same color family as the brand color. I gave the green more of a blue hue so it wasn’t so oppositional from the red, and rounded out the palette with a deeper green (representing growth) and purple (evoking change).

Putting it all together

I was finally ready to create my high-fidelity prototype. The most impactful design changes ended up being:

1. Content that provides context. The landing page title states the problem clearly and provides an explainer for micro-franchising the first time the term is mentioned.

2. A layout that tells a story. I was intentional about using the principles of storytelling and e-commerce in choosing the sections for the landing page. The order of the landing page is:

   • Introduction - the user becomes aware of the problem Supply Hope is addressing

   • Education - the user understands how Supply Hope works with more detailed information about the problem; their interest is piqued

   • Evaluation - the user sees the impact Supply Hope has on individuals and community; this is achieved through stories and statistics

   • Engagement - the user is presented with opportunities to get involved: donate, become an ambassador, spread the word, etc.

3. Integration. Progressive disclosure, buttons, and CTAs help the user intuitively navigate to important parts of the site without having to use the navigation bar every time. CTAs that drive business goals are prioritized.

Before and After: