Being loyal to a product and company feels good. It feels even better when you appreciate the company's branded image -- especially when the look and feel of the brand carries over to its online presence consistently.
Let's be honest: You've certainly felt that gut-wrenching disappointment when one of your favorite brands implements a site design change and puts the kibosh on your idolization.
The homepage is most often the first impression of a brand's digital presence. Design is crucial here, as it's what can determine whether or not a visitor will navigate to further pages, ultimately staying on the web property longer. Depending on its industry, the action a brand wants its site visitors to take will vary. But whether it's an e-commerce, business-to-business, franchise, or non-profit organization site, the easier it is to navigate, the more likely it will accomplish the desired results -- purchases, completed form fills, donations, etc.
Let's take a look at five of my favorite brand sites. Each features solid, aesthetically pleasing -- and most importantly, action-oriented -- homepage designs, thus setting the stage for successful online interactions.
Living up to the "Just Do It" slogan, Nike's web developers and designers definitely "did it" when creating their branded homepage. As an e-commerce site, Nike.com has two communication angles: one to serve information about the company, and the other to advertise and sell its products. This poses the challenge of having to display content about the company while also creating a clear and direct route for an online shopper to find the items they're searching for. The site needs to quickly serve visitors what they need while enabling a simple checkout process.
Nike.com gives site visitors the opportunity to control their navigation by providing them with a search field (reference 1) within the site. Nike's main navigation bar (reference 1) has a strong customer service mission, as it not only includes a search field, but also lets users track their orders with the "order status" feature. And this main navigation connects with visitors socially by advertising recent blog posts. It also features the most popular Nike goods through the "top products" navigation.
The side navigation menu (reference 2) reminds visitors of why they came to Nike.com, as the menu lists "Shop" in bold letters at the top. The side navigation menu is also user friendly, as it organizes products by category to help users with fast merchandise recognition. Below the sidebar, Nike displays its social media properties, Facebook and Twitter (reference 3), thereby providing consumers with a chance to connect with the brand when they aren't on Nike.com.
Displaying graphics with lists of inventory is a great way to increase the user's recognition, and Nike.com achieves this by featuring app-like design (reference 4) on the lower half of its homepage. Lastly, Nike makes excellent use of its Flash area (reference 5), as it showcases a video that brands the company. Although Nike.com's background is a photograph, the brand executed it in a way that doesn't compete with the information or other featured photos.
Unlike Nike, Pepsi is faced with a much different challenge than an e-commerce website. As a beverage site, Pepsi.com doesn't give visitors the magical feeling of being able to directly purchase a tangible object. However, Pepsi.com's design certainly portrays a fun and somewhat magical vibe -- emphasized by the partying Santa (reference 5) featured directly in the center of the homepage and moving bubble graphics in the background.
Pepsi's main navigation (reference 1) is completely devoted to its Facebook properties; the brand customizes its Facebook pages for consumers by creating dedicated pages for particular flavors. The side navigation (reference 3) lists its philanthropy acts (Pepsi Refresh Project), the Pepsi store (T-shirts, mugs, and other gear for sale), Pepsi ads, social media properties (Twitter, Facebook, and YouTube), and more.
Like Nike, the brand took the information listed in its sidebar navigation and made it more visually appealing by using app-inspired design in the lower half of the homepage (reference 4). Pepsi's Flash area (reference 5) promotes its ads, merchandise store, reputation management ("false rumor alerts"), company history, and more.
Zappos knows shoes, and it knows what fashionistas want and need. Take a look at the very top of its homepage (reference 1). There's a pictogram of a shopping cart, which quickly resonates with online shoppers and reminds them that they are on the site to fill that cart. According to MarketingSherpa, the placement, size, color, and text of the shopping cart image can influence conversion.
To the left of the visual order reminder (shopping cart), the company's free shipping policy is clearly displayed. Online shoppers don't have to second-guess how long they have to return an item because next to the free shipping, Zappos.com clearly displays its one-year return policy. These elements give consumers answers before they have to ask questions and dig deep into various other pages; the less searching your visitors have to do, the more likely they'll find what they are looking for and stay in the mood to complete a purchase. Frustration causes site abandonment, and Zappos does a brilliant job at preventing a confusing and irritating online shopping experience. To top off this helpful section, the company provides a search field that enables consumers to specifically control what they're looking for.
Just below is Zappos.com's main navigation (reference 2), which provides users with the breakdown of products (shoes, clothing, housewares, and more), brands and departments (women's, men's, kids'). This information is also repeated in the side navigation (reference 3). Repetitive information not only helps build stronger SEO (reinforcing keywords), but it also helps influence purchasing decisions.
The repetition method continues as Zappos (reference 4) reiterates its free shipping, free returns, return policy, and customer service. The production promotion area (reference 5) is clean and promotes Zappos' varied merchandise that appeals to a wide range of its targeted audiences. The color of the background was a great choice; it's calmer than stark white, yet still provides a cleanliness that doesn't combat the colorful products displayed throughout the site.
No, TacoBell.com doesn't have a shopping cart for chalupas, but it does have a supreme website. And if the word supreme has you in the mood for a Crunchy Taco Supreme, its homepage has a user-friendly location finder (reference 1) to help visitors get their fix faster by providing them with the closest franchise.
Taco Bell's social network properties (reference 2) are clearly centered at the top of its homepage. These links escort visitors to the brand's Facebook and Twitter pages for news updates, to YouTube for its ad clips, and to its mobile-friendly site, which has a GPS locator to further help people find the nearest drive-through.
At the top to the far left (reference 3), Taco Bell features its logo, which links back to the homepage. Best of all, when users click it, the bell rings. In this section, users can navigate to "food" to view menus, to "discover" to display new menu items and combo specials, and to "nutrition" for ingredients, a calorie calculator, diabetic options, etc.
Perhaps one of my favorite sections of the Taco Bell homepage is its reputation management (reference 4), which is located in the lower left corner. Here the brand addresses the recently dropped lawsuit regarding its seasoned beef. It is upfront and logical as it explains the issue (via videos, press releases, etc.), providing customers with the facts. Although the questioned quality of its beef was a PR nightmare, there's no question about the quality of the brand's site -- it's pure premium.
The company also does an excellent job of displaying large product images and descriptions (reference 5). Since the company isn't posed with the e-commerce challenge of having to promote all of its menu items on the homepage, it's able to have a bright graphic background that ties in with its branded image.
Entering Sony.com is an entertaining experience in itself: sleek black background, Flash, and an inspirational message. The homepage feels just as mysterious, classy, and futuristic as the Flash intro.
Sony's social networking properties are clearly listed at the top right (reference 1). And a little to the left from its Facebook link is a button that reads "Japanese Earthquake Relief," which links to the brand's philanthropic acts.
Sony.com's main navigation (reference 2) provides users with direction to the most popular Sony.com destinations: registration, shopping, gaming, music, electronics, and more. Users can hover over the main navigation options, and a drop-down window appears with an organized list of categories that fall beneath the featured ones. Although Sony wants consumers to proceed with their checkouts, the brand understands that its targeted consumers, when making purchasing decisions on electronics, like to read up on the products, comparison shop, etc.
The Flash area (reference 3) is contemporary and serves as an ad space for Sony, as it re-introduce products, announces sales, and more. Scrolling down, the page provides a photo-driven gallery navigation (reference 4) that emphasizes products by their function: "see," "hear," "play," and -- lastly -- "shop." In this way, the navigation reminds visitors as to why they are on Sony.com. And if a user knows exactly what Sony product he or she is after, Sony.com has a convenient search field (reference 1) displayed in the top right corner.
Just like with a brand itself, when it comes to website design, pretty doesn't cut it. Think about it -- the packaging and advertisements might catch your eye, but if the products or services don't add up to the creative elements, that brand won't serve you. A website is the same way. If it just looks pretty and ignores function, it's meaningless to the user. The next time you talk up your favorite brands, investigate their online properties and find out if their brand quality and functionality is reflected on their homepages.