There are a lot of stages when it comes to designing great websites. From concepts, to design, to providing feedback with your Creative Team, there are many processes put in place to ensure a great product design experience. If you’re looking to improve your product design process, take some notes from Randy J. Hunt, who literally wrote the book on it.
Product Design for the Web by Randy J. Hunt, Creative Director at Etsy, provides an interesting view of designing for a digital experience — especially in regards to eCommerce sites (ahem, I mean products).
To clarify, a website is not necessarily a web product. Frequent usage, user participation, the presence of accounts and flows (dynamic views, as opposed to pages) define a web product. According to Hunt, “…a website is often a consumption-only experience, whereas a Web product is a creative or participative experience (Hunt, 9).”
The next time you are getting ready to design for the web, here are some factors to keep in mind.
Design for user flow
As a participative experience, a web product uses flows to guide the user through the digital landscape. Just like the layout of a house (or an eCommerce website), there are multiple paths or flows people can take to navigate through it. A flow is a process that takes place over time. Thus, to ensure a usable flow, the UX should be pleasant, and the UI easy to understand.
Assume a product has solid UX and UI designs. What happens when the user reaches the end of the flow? More importantly, is there an end to the flow? Not necessarily.
Consider an eCommerce product page or checkout page. In addition to being able to purchase the product, provide other ways of extending the flow. Present the user with social share links, cross-sells or upsells. Keep the user interested and interacting with your web product.
Consider the “invisible features”
Don’t forget about the “invisible features” of a web product, which include its performance, speed, reliability, community, support and security as well as how they affect the user experience and interaction.
The most important invisible feature is performance, which “speaks to the product’s quality” and “is measured by how people expect the product to work (Hunt, 61).” The other invisible features directly affect a product’s performance and, consequently, the user experience.
As a designer, one thing that I relate to and think about when designing is the speed of the product — specifically page load time. Because I design a lot of images (homepage banners, category banners, product images, infographics, etc.), I optimize those images — reducing them to the smallest file size possible without losing quality.
Not only do I use the export for web options in Photoshop and Illustrator, I also take advantage of other applications and services (like ImageOptim and TinyPNG).
Other factors affect the speed of a web product as well, including the product’s code, the device on which the product is being used, the server hardware and the network itself. More often than not, the faster the web product performs, the more likely the user will be to continue interacting with it.
How many times have you stopped using a product because it isn’t loading quickly enough? Conversely, there may be instances where the product is too fast.
Think about an eCommerce product where the interaction between clicking the checkout button to confirm your purchase and the purchase itself happens too quickly. “…the heavier the importance of the exchange, the more carefully the pacing should be considered (Hunt, 67).”
Additionally, providing visual cues and affordances like thank you pages increases user confidence. Visual cues strongly impact another invisible feature: security. Having security badges or a lock or safe icon on checkout pages provides users with a sense of security and trust.
Consider the invisible features when designing a web product and, when possible, make those invisible features visible.
Use carrots, not sticks, to shape user behavior
“Did I read that right?” Yes. Think about making use of carrots as opposed to sticks. There’s a great metaphor in the book: “You can make a donkey move by hitting it with a stick, but that negative motivation does not make the donkey want to move… However, if you tie a carrot to that same stick and hold it in front of the animal, it will move forward of its own accord (Hunt, 92).”
The design of your product shapes the behavior of your users. Create a design that encourages the intended use of your product and provides positive reinforcement such that the user will come to love your product, recommend it to others and continue to interact with it.
Encourage intended use by providing the user with only the intended options (e.g. a specific set of buttons). Of those intended options, utilize design features such as color and size to highlight the preferred option (e.g. an “Add to Cart” button on a product page).
Throughout the flow, don’t forget to provide positive reinforcement. Say you have a multi-step checkout process. Along the way, reward the user with encouraging messages (e.g. “Almost there!” or “Just one more step!”). Not only does the progress bar itself nurture the continued interaction by showing the user how close he or she is to completing the process, but the positive reinforcement further encourages the user to continue.
You can also make use of thank you pages and order confirmation pages as another opportunity to provide positive reinforcement. The main goal is to make the user want to use the product.
Ship early, ship often
Create designs and share them with customers and peers to get their feedback, and adjust and redesign to evolve the user experience. Hunt also recommends making small changes as opposed to complete overhauls. Small changes to a design are more quantifiable and make it easier to discern how a product is performing. In a perfect world, this process occurs during the development and design phases of the product and continues once the product is launched.
These are a few of the many ideas covered in Product Design for the Web. There are many other books and resources available that focus on digital design. However, Product Design for the Web serves as a dense, relatable guide that balances conceptual information with practical applications as well as a must-read for designers.
Interested in learning more about Groove’s design process and product designers? Contact us today! We’d love to help you with your creative needs.