Food & Consumer Products Web Design

March 30, 2020    Reading Time: 4 Minutes

Product page focus web page

We work in a variety of industries. With each industry, we learn new ideas and concepts that we can also apply across other industries.

An industry that I’d like to focus on in this post, is the food and consumer-products industry.

A place where you can see our work, is the web design for Nielsen-Massey.

We designed and developed this website a couple of years ago and make improvements to it almost daily. We designed and developed everything that you see on this website (we did not take any of the photos or write the content).

I’d like to spend time giving you an overview of the quality of the web design work that we can provide by showing you this example.

Before we go further, look at what their website was like before and after:

Before:

Nielsen-Massey old website

After:

Nielsen-Massey Homepage Design

The below process is going to give you a high-level overview of how we helped create the website that you see today.

Like all our custom website projects, we started with many brainstorming sessions and conceptualizing with the customer. In this case, our customer was a marketing agency that hired us to create the website.

After we were all on the same page as far as functionality, site map, and goals for the website, we started wire framing.

Wireframe Nielsen-Massey web design

A wireframe is a basic building block for page design. In the wire framing stage, we are putting basic building blocks together to conceptualize the page. We are not selecting fonts, or colors. We are simply visualizing everything that we in the customer have discussed up until this point. For instance, where are we going to have the logo? Where is the best place to position the primary and secondary navigation?

Wireframe consumer product website

This is a great chance to continue brainstorming and bouncing ideas around. It’s easy to make changes and it’s fun because you get to stop talking and start creating.

Wireframe web design

During this stage we also talk about functionality. We explain all our thoughts and recommendations in video. Unless something needs to be documented, hardly ever do we write more than a few sentences when communicating with our customers. Everything we do is visual and that needs to be explained visually. Not to mention, a lot of what we do is technical. Plus, most of our customers are not local. Most are 2000 miles away, so in-person meetings aren’t realistic. Communication is a top priority for us. We’ve been in business for 11 years and are used to working remotely and have all the systems and processes in place to remote projects seamless.

Featured products wifeframe

After were finished wireframing each page, we move on to the actual design of each page in this stage we design the website as it will look and feel. The customer can now have a chance to see what the website will look like. Again, we constantly use video for communication so that the customer fully understands everything that we propose and create.

 

Mobile phone product page design

On the Nielsen-Massey website, we’ve created many valuable features for them.

Featured products page design

Products

Since Nielsen-Massey’s sells products, this was one of the places we spent the most time.

Product category website design

The product page which showcases all their products, needed to resemble how high-quality of the product they provide and make it easy for people to navigate and find what they’re looking for.

They have categories of products and showcasing them elegantly was a priority.

Product page design

On the product page itself, everything needed to be clear and concise. They also have multiple sizes for their products and they wanted consumers to be able to navigate those easily.

Consumers also needed to understand the appropriate applications for the product itself, region where it came from, ingredients, certifications, and equivalencies. Also, a highlight on related recipes that use the specific product. Allowing customers to easily find what they’re looking for.

Recipe website design filtering

Recipes

The recipe section on the website is one of those valuable items. This allows consumers to easily find recipes using the filtering ability in the sidebar. The consumer can search by category, product (used in the recipe), preparation time, ingredients, difficulty level, and type of recipe. Filtering recipes is also fast. The consumer doesn’t have to wait for pages to reload as the results are given to them in real time.

Recipe page web design

When the consumer reviews the recipe, there are also a many helpful feature.

The consumer can view the ingredients in US or standard measurements and metric measurements with the click of a button.

If the recipe calls for a Nielsen Massey product that they don’t have, they can easily click and purchase it now.

Recipe details design

The consumer can also share the recipe on their favorite social media network and print it out for their recipe book.

Find a Retailer

Since Nielsen-Massey’s products are popular worldwide, they want the ability for their customers to find retailers where they can purchase their products.

We created a find a retailer feature that allows consumers to find a retailer near them. When they visit the page, the browser will ask if they can view their location. If they say yes, the map will automatically show all the retailers within a 50-mile search radius of the consumer. If the consumer says no, they can still type in their location by ZIP Code to find retailers.

The consumer can also use a search radius to better filter the results. They can also choose how many results they want to see at a time.

Quiz page selection

Interactive Quiz

A fun project was creating an interactive quiz for consumers. For example, consumers could go through a quiz and find out what their cooking theme song was.

During the quiz they can select from multiple choice questions in text or image form. At the very end, they would get the result with a video playing the song that corresponds to their cooking style.

Quiz solution feature design

Ease of Management

Another big benefit to the customer is the ability for the staff to manage the website themselves. The website is built on WordPress and highly customized to allow the staff to manage all the content on the website. This allows them to make changes on the spot and save in time and resources.

Much more

There are many more pages and features, and you can view those on Nielsen-Massey’s website.

Email opt-in design

Let’s Chat

If you need help with your food and consumer product company’s website, give us a call (360) 450-3711. We can improve your existing website or even start from scratch. Looking forward to talking with you.

Last updated on May 04, 2020. Shawn is the President of Graticle, Inc.

Want a Quote on Your Project? Answer a Few Questions »

Working with Shawn was and continues to be great. As a new business with a new website in place, Shawn was able connect some missing items and fine tune what I had already developed. He went the extra mile and put together video clips for me walking me through the process on how to utilize what he put together. It’s really brilliant and so helpful. I can access these short how to’s anytime I need a refresher.

Another great thing about Shawn is that he always responds to an email that day or the very next and works in such a timely and efficient manner. He’s definitely proven to be a great problem solver and is there to help with anything big or small.

I highly recommend Graticle Design without hesitation!

Christina Nickerson

Owner

Christina Nickerson Style

www.ChristinaNickersonStyle.com

Ellensburg, Washington

Smooth relationship and the resulting quality/excellent website for people to learn about Ridgefield’s BirdFest and Bluegrass.

Marguerite Hills

Executive Director

Friends of the Ridgefield National Wildlife Refuge

www.RidgefieldFriends.org

Ridgefield, Washington