Portfolio

Frontera

See how Bento Sites transformed Frontera's website into a strategic solution that anchors the visual design with a Mexican motif (unsolicited).

Redesigned header of Frontera's website.

When my wife and I have tacos, we always use the same salsa — Frontera's Chipotle Salsa. Without this sweet, smoky, zesty flavor our taco night's wouldn't be the same.

Recently, during the COVID-19 lockdown, our favorite salsa was out of stock at Sprouts and Whole Foods. When I went to Frontera’s website to order online, I was surprised to find a rushed design that lacked the thoughtfulness and artistry of Frontera products. I wanted to design a better website that reflected the product I enjoy.

In this post, I'm going to redesign Frontera's website (unsolicited).

Project Brief

Business Goal‍

Improve the messaging of Frontera's website by positioning the brand as "Gourmet Mexican Food at Home" and anchor the visual design with a Mexican motif.

Conversion Goal‍

Increase online orders and foot traffic to grocery stores that sell Frontera products.

Section 1

Before (Designed by Frontera)

Section 1 of Frontera’s website.

After (Designed by Bento Sites)

Section 1 of Frontera’s website redesign concept.

A brand strategy is the long-term goal of the development of your brand to make it identifiable. A great brand strategy is simple, consistent across all channels and a true expression of your business. While the packaging of Frontera products achieves accomplishes this very well, their website does not. Finding the right brand colors, fonts and writing the copy took time to get right.

Design Decisions

Logo

  • Increased the logo's size.
  • Left-aligned the logo with the page content.

Image

  • Removed everything.
  • Added a background image that I found on Frontera's Facebook page. Since most images on Frontera's website are pixelated on retina screens, I had to use their Instagram account and Unsplash to complete this website redesign concept.
  • Added a dark, low opacity overlay to make the text legible.
  • Made the image span the content's width.

Navigation Bar

  • Right-aligned the navigation bar.
  • Simplified and reorganized the links. I don't know why "Recipes" links to a third-party service called Ready Set Eat. You don't want to invite potential customers to visit a third party in the navigation bar. Ultimately, though, I kept "Recipes" because Frontera should create a page with its own recipes, especially since the company was founded by a celebrity chef. Even Campbell's creates its own recipes.
  • Removed SmartLabel because it links to a third-party service. Again, you don't want to invite potential customers to visit a third party in the navigation bar. Therefore, I created a link called "Ingredients" where Frontera could embed the information from their SmartLabel account on their own website. Alternatively, they could just add the SmartLabel link on their product pages as Cascade does on their website.
  • Created a CTA button to "Locate Store."

Calls to Action (CTAs)

  • Added a primary CTA (Locate Store) button in the navigation bar and the hero section.
  • Added a secondary CTA (Watch Video). This explainer video is currently on the about page, but adding it here gives potential customers an alternative option that helps to build interest.
  • Made the CTA buttons different colors, so they are distinguishable.

Typefaces

  • Replaced the H1 and H2 typefaces with Nelson Engraved. I didn't like the typeface that Frontera uses and felt its usage was inconsistent. I thought the Nelson Engraved typeface was an attractive, earthy style that matched the brand.
  • Replaced the H3, H4 and H5 typefaces throughout this redesign concept with Montserrat — the same typeface that Frontera uses for its navigation bar, buttons and body text.

Colors

Consolidated the brand colors. Currently, Frontera uses three primary colors on their website — lime green, purple and black, plus a blue and white logo. On their Facebook and Instagram channels, they use lime green and black logo. However, many Instagram posts use a different shade of green and the same blue that's used in the logo. Ultimately, those are the two primary colors I decided to use throughout this concept.

Primary Colors

  • #4788F4 (blue)
  • #96E27C (green)
  • #FFFFFF (white)

Secondary Colors

  • #FEFDF4 (orchid white)
  • #000000 (black)
  • #BEBEBD (grey)

Copy

  • Used the headline that's found on the packaging of most Frontera foods (Gourmet Mexican) to help position the company as gourmet Mexican at home.
  • Wrote the sub-headline.

Section 2

Before (Designed by Frontera)

Section 2 of Frontera’s website.

After (Designed by Bento Sites)

Section 2 of Frontera’s website redesign concept.

Most of the elements in Frontera's current layout are unclear or illogical. For example, why does the first image (Spice Up Dinnertime) link away from the site to a third-party service called Ready Set Eat? Why doesn't Frontera have their own recipes for their own products? Frankly, that's a glaring omission to their business. Furthermore, why is "Read Our Story" so large too? What does "Looking for Frontera" mean? Wouldn't it be clearer to use "Where to Buy Frontera?"

Obviously, this section needed a lot of work.

Design Decisions

  • Removed everything.
  • Added a graphic from Rick Bayless' restaurant, Frontera Cocina, that helps to capture the Mexican aesthetic I wanted to convey. I also changed the graphic's color to a tint of the green brand color.
  • Added grocery store logos where Frontera foods can be purchased.
  • Added high-quality images of the six categories of Frontera products.
  • Created branded triangles that form a clickable border around each product category to invoke a Mexican-inspired aesthetic.
  • Wrote the copy.
  • Added a CTA button for users to "Explore Foods."

Section 3

New Section (Designed by Bento Sites)

Section 3 redesign concept of Frontera’s website.

Since I positioned Frontera as "Gourmet Mexican Food at Home" in section 1, I wanted to use this section to briefly communicate how Frontera achieves this promise by focusing on the ingredients, flavors and the chef who creates these regional Mexican foods.

Design Decisions

  • Added a yellow-tinted background color.
  • Added a graphic from Rick Bayless' restaurant, Frontera Cocina, that I first used in section 2. I also added another graphic from his restaurant and changed the graphic's color to a tint of the green brand color.
  • Added two images from Unsplash and added an image of Rick Bayless that I found on Google.
  • Added three white rectangles, with a low-opacity to make them slightly transparent and layered them over one-quarter of the images.
  • Wrote the copy.
  • Added CTA buttons.

Section 4

New Section (Designed by Bento Sites)

Section 4 redesign concept of Frontera’s website.

To conclude Frontera's marketing story and reach my conversion goal, I wanted to remind potential customers what they should do – locate a store. I also added images from Frontera's Instagram account to show real people using their products, convey trust and build a community around gourmet Mexican food at home.

Design Decisions

  • Added two rows of branded diamonds to emphasize the primary call to action (Locate Store) and create a border between the above and below sections.
  • Added images from Frontera's Instagram account. I used these images because they help to build trust and community — though Frontera should reinvest in social media. Their last Instagram post was October of 2018!
  • Wrote the copy.
  • Added a CTA button. I also added a link to follow Frontera on Instagram.

Section 5

Before (Designed by Frontera)

Section 5 of Frontera’s website.

After (Designed by Bento Sites)

Section 5 of Frontera’s website redesign concept.

Frontera's footer is cramped, doesn't provide enough information for users and isn't optimized for search engines. Oddly, they also continue to promote Ready Set Eat (third party site) with a logo and link. As I mentioned earlier, I don't understand why they don't create their own recipes, especially when the founder is a celebrity chef.

Design Decisions

  • Removed everything.
  • Divided the footer links into four groups — Foods, Support, Frontera and Follow.
  • Organized the links under new headings.
  • Added logos for Frontera and the parent company, Conagra.
  • Added a horizontal line to separate legal notices.
  • Added links to legal pages and underlined them since internet law requires they must be obvious to users.

Wrap Up

You just viewed my website redesign for Frontera. If you need help with your website, contact me for a website audit or start a web design project.

Frontera first appeared on the Bento Sites Blog by Jeff Shibasaki.

Close-up of Jeff Shibasaki wearing a black hat.

Jeff Shibasaki

I’m an Atlanta web designer that specializes in website design and development on Webflow and Squarespace.

Get exclusive design and marketing tips.