Packaging Design for Web-based Products
Share your comments on this topic with other web professionals
In: Articles
Published on December 4, 2006
Rip. Crinkle. Pop. The sounds of unpacking that eagerly anticipated product you just brought home from the store are music to the ears. Each successive layer of packaging reveals new information or reiterates the reasons you put down your hard-earned money for the consumer goodness now in your hands.
From the moment you spied this striking product on the store shelf, read through its virtues, and were moved enough to purchase it for yourself, to the final moments of releasing it from its protective yet seductive shell, you were under the spell of its packaging design.
Though hundreds of years of packaging design history and best practices may have influenced your offline shopping behaviors and decisions, the lessons learned in this enduring discipline didn’t have much of an influence on early web designs. After all, early web sites were primarily tasked with promoting or explaining offline services, companies, and products.
Following on the heels of these brochure-ware sites came a wave of e-commerce applications: buying, selling, or trading physical goods or services. It wasn’t until web applications became services, products, or content destinations unto themselves that concepts long known in the packaging design world—such as central and peripheral messages, shelf-space differentiation, and self-retailing—came to be significant considerations online.
As a product designer, I’m responsible for ensuring that web applications not only resonate with their target audiences but also embody appropriate brand propositions. As such, I’ve taken it upon myself to dive deeper into the principles and lessons of packaging design in order to learn what lessons can be applied to the world of web applications. Here’s some of what I’ve found so far.
Meaningful shouting
When YouTube was sold to Google, there were more than a hundred direct competitors in the form of online video sharing sites. How could these competitors reach their intended audiences in such a crowded marketplace when there was already an established leader? Could they rely on their slender marketing budgets to communicate their brand propositions to potential users? Could they differentiate just on features? In most cases, these sites had to count on their packaging.
While one could argue that the full gamut of a web application’s visual and interaction design constitutes its packaging, it is perhaps more useful to instead consider key entry points into a product experience as a direct comparison. For many web applications, the primary entry point remains the home page or front door to the service. For others, it can be a content page accessed from cross-linked traffic, promotions, or web search. Whether home page or search result, these types of landing pages need to differentiate, attract, and communicate to potential customers. Often, they need to communicate loudly.
Shouting in packaging design is an attempt to capture the initial attention of customers: to get them to consider an alternative to their usual purchase and explore this new product. As web application shelf-space gets more crowded, the need to shout becomes more pronounced. Though sometimes mocked in web design circles, the large fonts and brightly colored buttons that typify Web 2.0 application design can be thought of as an online shout that asks web users to consider a new product offering.
Figure 1. From web browsers such as Mozilla’s Firefox to web-form builders such as Wufoo, online products are increasingly focusing on appropriately presented central messages to engage with potential consumers.
Shouting in packaging design, however, means more than yelling loudly to get noticed. As Giles Calver, author of What is Packaging Design?, points out:
“If every product shouts, the shelf becomes a cacophony. Achieving on-shelf impact is therefore not about making as much noise as possible. If it was, packaging design would probably consist of flashes, starbursts, large bold type, and eye-catching colors. Instead, it’s about creating a meaningful product proposition and communicating it in a manner that has a powerful resonance with consumers.”
Calver goes on to reference communications research that distinguishes between central messages (main persuasive arguments) and peripheral messages (all other tangential arguments). It’s the central message that should succinctly and clearly be communicated to potential consumers on the key landing pages of a web application. A clear central message should:
- Differentiate: Be distinct enough to separate your product offering from the rest of the marketplace, but familiar enough to fit within a consumer’s frame of reference for a sector. In packaging design, a sector cue is a set of presentation conventions that have developed over years and now come to help consumers identify product genres like cereals, pantyhose, cleaning supplies, and more.
- Attract: through compelling content, interactions, aesthetics, or all three. Attraction counts on emotional and rational triggers to engage consumers quickly. In retail, this initial engagement is literally measured in seconds, and is the key to getting consumers to uncover what is inside the box.
- Embody the Brand: The combination of typography, layout, content, color, and visual elements (images, shapes, textures, etc.) needs to reflect the brand proposition the product is selling.
Figure 2. Contrast the examples above with eBay’s packaging of its affiliates program. The central message gets buried under peripheral details.
Back of Pack
While the front of a package is about quickly communicating a central message, the back is there to support the story. This back of pack is responsible for outlining the benefits, abbreviated instructions, and features of a product.
In a self-service retail world (present in most physical stores and just about everywhere online), the back-of-pack information plays the role of surrogate sales associate. It outlines the advantages of a product and often includes explanations of how to best utilize them. In other words, it tries to finalize the sale with peripheral messaging that supports the front’s central message.
In many web applications, this role is filled by product tours. The most common product tour is an illustrated page or set of pages that explains what can be done with an application, and shows features in action through representative screen shots.
Figure 3. Illustrated feature lists on ma.gnolia and Remember The Milk
Product tours are perhaps more effective when the information is presented in the context of the actual product. The new Yahoo! front page tour, for example, highlights features directly on the interface and articulates the value add of each in a clear and concise manner.
Figure 4. A contextual product tour on the new Yahoo! front page.
An increasingly popular alternative to static product tours is the screencast video. A video not only showcases the benefits of an application, but actually shows them in action. Designer Tom Chi assembled a product tour video for the recent Yahoo! Bookmarks release. It provides an excellent walkthrough of the service without requiring potential customers to wade through excess text and static screen shots.
Figure 5. A video tour of the new Yahoo! Bookmarks.
Whatever format you employ for a back-of-pack experience, keep in mind that the goal is to support the brand proposition and differentiation story started on the key landing pages of the site by outlining how to make the most of the benefits and features of the product.
Unpacking a Story
Let’s say you’ve sold a potential customer on the central message of your web application and effectively supported it through an engaging self-service product tour or feature list. The customer is ready to dive in. What’s the first thing they encounter? A registration form, of course.
Figure 6. The consumer’s entry into Google Video: a registration form.
Though often required to get people fully engaged with an online service, a typical registration process isn’t always the best way to follow-through on the promises made by the front and back of your web application packaging.
Apple customers are well known for documenting the process of unpacking their new Apple gear and with good reason. Apple creates an unpacking process that reflects the care and attention to detail found in the product within. There’s a consistent element of “wow” as you move on to each consecutive phase of opening up an Apple computer. Perhaps the most surprising moment is when the embedded camera offers to take a picture of you right then and there for your user account. How much more personal could it get?
Figure 7. Unpacking an Apple MacBook (images from Flickr users katielips, pealco, and *nathan)
Thinking in terms of an unpacking experience can help turn a typical web application registration process into an engaging event. As an example, contrast online video site Jumpcut’s initial “Create a Movie” sequence with Google’s Video’s first engagement with an interested user (pictured above).
Figure 8. Jumpcut’s unpacking experience.
Prior to asking a user to register, Jumpcut encourages them to create a movie of their own and highlights the unique features of their service along the way. At the end of the process, the user has a movie they can publish, a sense of the value proposition of Jumpcut, and a compelling reason to register.
Getting a customer registered, of course, isn’t the end of an unpacking experience. Providing adequate guidance once the user is inside the system is an important part of the process as well, and probably merits a whole article itself.
The Right Package
What’s been left out of this discussion so far is how to determine what packaging is right for your specific application. Packaging designers begin with an understanding of:
- The product. (Is it new to market or an already established brand?)
- The marketplace. (What other product choices do consumers have? How are they positioned in consumers’ minds?)
- And of course, their target audience. (What expectations and goals do they have? What are their rational and emotional needs?)
The key to great packaging both online and off is using this information to meaningfully communicate to potential customers. Of course, the appropriate presentation of a central message, effective back-of-pack support, and an engaging unpacking experience can’t hurt either.
References
Giles Calver’s What is Packaging Design? was a key resource for understanding the basic principles underlying good packaging design.
Share your comments with other professionals (6 comments)
Related Topics: Graphic Design, Interaction Design, User Experience, Web Design
Luke Wroblewski, author of Site-Seeing: A Visual Approach to Web Usability, is currently the Principal Designer of Yahoo! Inc.'s Social Media group and the Principal of LukeW Interface Designs, a product strategy and design consultancy. He has written numerous articles on design methodologies, strategies, and applications, including those featured in his online publication: Functioning Form. Luke is also on the board of directors of the Interaction Design Association.
