What is Recipe for Success?

Recipe for Success is a Houston non-profit founded in 2005 that is combating childhood obesity and pushing for better food/nutrition education for children. They offer multiple programs from in-school hands-on classes to farming.

The client has sister sites that are updated but the main R4S site has not gotten a refresh yet. After discussing with the client what they wanted I was given the freedom to completely redesign the site. They did give one key constraint - the redesign needs to be something that can be easily implemented by someone with little developer experience using a typical web builder.

Problems

Responsiveness: The main site is not responsive and has not had a major refresh in a few years. The content is still being updated regularly but the overall design and navigation are outdated.
Navigation: Currently the navigation has many options and leads to +40 individual pages. Many can be removed or consolidated.

Project Goals

Fully redesign Recipe for Success’s website to increase usability
Restructure and streamline their navigation

Evaluating the Current Design

What users see when they land on R4S’s home page now

The First step

Overall the site is dated and will benefit from multiple corrections to make it more visually appealing and usable. The current version feels very cluttered and doesn’t direct users where they should be going to. Many links are also lost within the general navigation text.

Main Usability Issues

No clear visual hierarchy or direction.
Not mobile friendly.
Lack of white space and feels cluttered.
Nonuniformed images that look randomly placed.
Multiple mismatched navigations.
Small, easy-to-miss floating donation button.
Inconsistent padding and border styles.

How Do Users Interact with R4S Now?

To see how users navigate the current version of the site, I watched them as they performed two tasks

Navigating to the news page.
Proceed through the navigation page.

Original Site Observations

All users initially couldn’t find the news section. They were clicking through various pages with no real direction.
Users commented on how the titles in the header didn’t clearly say what each page was.
Some users were able to immediately see the donation button on the top of the page but others could not. They scrolled down on first loading the page - hiding the purple button. They would eventually find the other donation link located in the secondary navbar.

Users incorrectly navigated to Press as it was more clearly labeled than News [The Dish]

The two options users have to direct them to Donate on the current site

Fixing the Navigation: So many pages…

One of the first things I noticed when evaluating the current design was the navigation and number of pages. There is the main navigation on the top and the side navigation on the left of the page. Clicking any of the links leads to another page with a new branch of options in the navigation. All in, there are +40 separate pages. To make it easier for users to browse and find what they need this needed to be trimmed down.

Site Maps

To help organize and see the whole picture I mapped out the original size and looked for any red flags. I also played the role of a user and explored the site’s various pages. Some immediate things I noticed included;

Findings

Different tabs leading to the same page
There are pages that are near identical that can be consolidated (ex. the contact page is broken into separate pages that all lead to the same contact form)
Links leading to empty pages
Duplicate pages (ex. two separate ‘Get Involved’ tabs)

What currently greets users on mobile

Card Sort

To help figure out how to reorganize the navigation, I sent out a card sorting exercise to see how others would group the various pages together. I gave them 20 of the current page titles and asked them to group them into parent groups. There were varying results but four key groups stood out: About, News, Resources, and Get Involved. Some participants also made smaller groups such as ‘What We Do’ or a dedicated group for sponsors/partners but I decided to focus on those main groupings.

Updated Navigation

With those findings I began to take apart the navigations, removing redundant pages and consolidating where possible. In the end, the total number of pages was cut in half (and then some) without losing any valuable content!

A much more streamlined site map

Content is King

Starting Fresh

With the current version of the site, the best option was to start completely fresh. I had to keep in mind the main constraint while designing the site - it needed to be easy to implement for someone with limited web development experience and can be created easily on a web builder such as Squarespace.

Content Needed Priority

Going off that main constraint I went for a few iterations of standard layouts and ended up with the below. A large component of this site is the content (news, events, resources, etc.) so I also spent time coming up with an organized news page where users can easily find any article they’re looking for. The current version of the site has the content split under different pages and sections - the proposed version will include it all on the main new page with a subnav directing users to specific types of content.

Make a donation for Tomatoes

To iron out possible usability issues I reached out to a few users to run through the revised site. I asked them to complete the same tasks I had users do on the current version.

Navigate to the featured article - Hope Farms and its 40 Tomato Varietals. (Did you know there are more than 10,000 tomato varieties out there?)
Navigate to and make a donation on the Donation Page

Redesigned Site Observations

Users brought up the issue with labeling (The Dish) on the navbar again
All users identified the Donation button in the header quickly while one user used the CTA on the home page to get to the page

Results

The aim of the test was to see if the slim-down navigation worked and if users were able to quickly find what they needed. To that end, it was a success. The labeling issue is something I would need to address with the client but would be a quick name change fix. Although the naming confused users, two pointed out that ‘The Dish’ was more obvious on the revised header since the other options were obviously not news related (About, Get Involved, and Shop). With testing complete, all that was left was polishing.

Now Mobile Friendly!

Not Responsive

In addition to the navigation, a major issue that needed correcting was the mobile version of the site. The live version of the site does not take into account other devices so when users visit R4S on their mobile devices, the site is identical to the desktop version and not responsive at all. While I was developing the wireframes I kept that issue in mind to avoid having the same issues.

All the pages I developed are fully responsive and can be viewed clearly on any device or screen size.

What currently greets users on mobile

What users will now see

Final Designs

I continued iterating the screens and made slight tweaks to image placement and text size. The news section received the most revisions after user feedback.

Final Thoughts

I feel the final results are a big improvement both in terms of design and usability. The overall design was purposely made standard with the main constraint from the client that they could implement the design themselves with little developer experience. It also has the benefit of now being responsive which will help users view the content clearly regardless of device.

By decreasing the number of pages by more than half and streamlining the navigation users will be able to quickly navigate the site and find the information they’re looking for easily.

View Prototype

Recipe for Success

Improving navigation and usability for a Houston nonprofit.

Overview