Design Makeover: Make It Saucy
BEFORE
Client: Mikee – www.mikee.com
There’s nothing wrong with having a history, but you don’t want to be stagnant either.
Mikee makes sauces. According to current VP Sales Adam Kaufman (representing the fifth generation in the food business), the line started in his father’s butcher shop in Queens, New York. The elder Kaufman loved Chinese ribs and was determined to come up with his own recipe. When he delivered food to local Chinese restaurants, he’d peer around their kitchens and make note of the ingredients he saw on the shelves. Then he’d buy the same ingredients and start experimenting with different combinations.
Once he came up with a recipe he liked, he started selling meat already marinated in the sauce. His customers began asking if they could just buy the sauce, and the light bulb went off. He started bottling the sauce, designed a label, and named the new company Mikee, after his nickname. Since that time—about 30 years ago—the line has grown to include more than 30 items, from the original sauce through other Asian sauces (the number one seller is their terriyaki sauce, says Adam Kaufman) to more standard marinades and barbecue sauces. In Adam Kaufman’s words, “It took us 30 years to become an overnight success.”
The product distribution is still primarily retail, but about five years ago, Mikee started selling their sauces over the Web. The purpose of the website, however, is less to build up a mail-order business than to continue to serve loyal customers who may have moved out of their retail distribution area but still want their Mikee marinades. Nevertheless, Kaufman says, he recognizes that the site has to be attractive and functional even if it’s just serving repeat business.
The main thing Kaufman likes about the current site (designed by his wife, who is a designer but not a Web designer) is the underlying concept of a “family” of sauces: Asian, Fisherman’s, Terriyaki, and Specialty. But the site is incomplete, he says, and he’s not sure that it really communicates the nature and character of the business. He’d like a site that’s interesting, fresh, and modern: “There’s nothing wrong with having a history,” he says, “but you don’t want to be stagnant either.” With that in mind, we challenged three designers to whip up a new site to meet Mikee’s tastes.
AFTER
DESIGNER: Ryan Sorenson –www.bozell.com
The main focus of our redesign was usability. There’s nothing worse for a consumer than running into difficulty finding the information they need. Besides the functional problems (much of the navigation didn’t work), the original site is hard to navigate, the homepage only shows portions of the product labels, the images on the product pages are all very small, and the layout distracted from the goal of purchasing. We set out to create a site that’s easy to navigate and puts the product first.
First, we moved the navigation bar to the top of the site, where customers can find it easily, and added a tab to tell visitors exactly where they are. Because the consumer’s first encounter with the product is through the packaging, we featured the bottles large and on a background that complements all the various package designs. We updated the site’s color palette, using a yellow that combines the old yellow and orange and adding a teal to replace the dated bright green. This new palette of yellow, teal, and grays gives the site a more modern feel, complemented by the use of the clean Frutiger font.
We highlighted a few areas with gradients to add to the energy of the design and added a subdued stripe pattern to break up the solid gradient.
Our vision of the product page continues to focus on the sauces and buying. To update the product page, we clearly identified the families of sauces and added shadows behind each product area to give dimension. With a clean design that also shows a little “sauce” of its own (via the vector graphic of a splash in the background), the new Mikee.com site showcases the product—which is what people are looking for.
Because the consumer’s first encounter with the product is through the packaging, we featured the bottles large and on a background that complements all the various package designs.
ABOUT THE DESIGNER
Ryan Sorenson – Bozell
Ryan has always been a winner. At the early age of seven, his soccer team made it to the semifinals of the 1986 Cornhusker State Games. And then in high school, his mom gave him a ribbon proclaiming him “World’s Best Son.”
Ryan holds a Bachelor of Fine Arts from the University of Nebraska and is currently putting his winning attitude to good use as an Art Director for the worldwide advertising firm Bozell in Omaha, Nebraska. He has held several previous art director positions, working for national clients such as Blue Cross Blue Shield, Sue Bee Honey, Gateway, Compact Power, Leupold, First National Bank, and countless regional and local clients.
Ryan’s hobbies include wasting time, playing Nintendo Wii, solving his Rubik’s Cube, and looking through paper sample books. He loves his job, his mom, and tiny puppies.
APPLICATIONS USED: Adobe Photoshop CS3 and Adobe Illustrator CS3
AFTER
DESIGNER: Beth Berst-Gregory – www.sunberst.com
The overwhelming black color of the current site dominates the beautiful packaging design of the product. Additionally, the homepage doesn’t convey that there are four main product lines, each with a distinct theme. Overall the site feels heavy, unbalanced, and without a focus.
My first goal was to create an immediate recognition of what Mikee is: award-winning kosher sauces from Long Island. I also wanted to bring a clean and modern look to the Mikee brand and really let the product stand out against a predominantly white backdrop. I placed a map of Long Island behind the simple product shot to serve both as a design element and a reference to the company’s roots.
The secondary goal was to make it easier to find and buy the product. I highlighted the four main lines within the Mikee sauce collection and added direct product links under each category. Each category is color coded, using colors that harmonize with the product packaging. I set the family names in Present, a font similar to the one used in the logo. Too much Present can be overwhelming, so for my secondary typeface I chose the beloved sans serif Helvetica. Everyone loves Helvetica (just watch the documentary film by Gary Hustwit), and it displays well in most browsers.
For a bit of interest and elegance, I added a subtle Chinese lattice pattern to the background, a nod to Mikee’s predominantly Asian flavor. The new site feels gourmet and modern. More importantly, it communicates what Mikee’s award-winning sauces and marinades are all about.
I wanted to bring a clean and modern look to the Mikee brand and really let the product stand out against a predominantly white backdrop.
ABOUT THE DESIGNER
Beth Berst-Gregory – Sunberst
Born and raised in Illinois, Beth has embraced her artistic journey in life. A graduate of the American Academy of Art Chicago, she received her Associate’s in Commercial Art and has designed and illustrated for a variety of companies, appearing in both Web and print. While she enjoys the thrill of the digital world of graphic and Web design, she counterbalances that with old-school art techniques such as painting and printmaking.
A lover of texture, detail and imperfection, Beth recently received a Diana toy camera and has been trying her hand at experimental lo-fi photography. When she’s not designing, she’s busy cooking, drawing, crafting, and fixing up her tiny Italianate home with her art teacher husband Chad and Blaine, the super mutt.
APPLICATION USED: Adobe Photoshop CS3
AFTER
DESIGNER: Ryan Wagner www.visualrush.com
My goal for the Mikee redesign was to give the website some unique character and make it fun. After hearing about how Mikee got started in the family-run butcher shop, I felt the company history could provide a rich backdrop over which to feature their sauces. Several hours of brainstorming and concepts eventually led to a rustic wood surface with dripping sauce. The deep red, gold, and black color scheme was sampled from Mikee labels across all the lines, and it helps pull the various members of the family together. Actual Mikee bottles were traced in Illustrator to create the silhouette menu running down the left, which offers the visitor a quick, visual way to jump to the four varieties of sauce. I chose to set the main navigation items in Trajan Pro for its sleek condensed look.
Integrating a show/hide menu at the bottom of the homepage that slides up and features all the Mikee sauces gives the site some Web 2 usefulness while gaining SEO points with Google and other search engines.
An occasional newsletter is a great way to communicate with customers, so we added an easy signup box. The photo is part of a rotating Flash banner that would feature delicious dishes made with Mikee sauces, then links to the Recipes area. In this part of the site, customers can upload their own recipes made with Mikee sauces.
The product page was simplified to feature just the sauces. Users can jump directly to any category in the slideout menu to the left, or move through the sauces individually by clicking on the smaller photos. Mikee’s current Zen Cart shopping cart system could be revamped and integrated using a custom CSS template that matches the rest of the new design.
The deep red, gold, and black color scheme was sampled from Mikee labels across all the lines, and it helps pull the various members of the family together.
ABOUT THE DESIGNER
Ryan Wagner – VisualRush
Ryan Wagner is the owner and creative director of VisualRush website and design solutions, a graphics and Web design studio located in Evansville, Indiana.
Using his degree in Advertising and Graphic Design from Murray State University, he has gained diverse graphic experience in newspaper print advertising, Web design, magazine publications, logo design, billboards, and identity branding. His strength lies in keeping his clients focused on maintaining their brand integrity.
After working in the corporate world, Ryan realized his potential as a freelancer and pours every ounce of his creative energy into VisualRush where he helps clients promote their services all over the world.
Owning his own successful company at 32 has allowed him the freedom to spend more time with his wife Heidi and their four beautiful girls.
APPLICATIONS USED: Adobe Photoshop CS3 and Adobe Illustrator CS3