Website and Product Design: What’s the Difference?

In the Design industry, we often run into the issue of disciplines and concepts being confused for one another in terms of their definition, purpose, and associated responsibilities! In previous blog posts, we’ve clearly explained the differences between UX Design and UI Design, and Service Design, UX, and HCD, but we’ve yet to tackle the differences between Website Design and Product Design. We’re excited to dive into this topic today because we often run into this mix-up where people think website design and product design are the same. We’re here to tell you all you need to know about these two very different disciplines so you can ditch the confusion and welcome some clarity. Ready?

In this blog, we’ll cover…

• • What are website design and product design?

  • The differences and similarities between each

  • 5 examples of what a product designer or a website designer can help you with

What are website design and product design?

What is Website Design?

Website design is just as it sounds – designing websites! Websites are primarily about creating an online presence for whatever it is you do, share, or have to offer. For a company or organization, websites have much to do with marketing, and they’re used to connect with potential clients, customers, or users. Websites tell the whole world what your company is about and serve as a digital avenue for helping people find the information they need. Websites are commonly used for explaining or selling a product or service, providing a company overview (think: about page!), generating leads, promoting events, product discovery, sharing news, upcoming events, information, and more. There are SO many different types of websites that serve a plethora of varying purposes. Most often, websites can be categorized as either blogs, portfolios, online forums, event landing pages, e-commerce sites, social media websites, informational and educational, or directory and contact pages.

When it comes to website design, navigation, usability, the ability to easily search and find the content that you need (findability), communication design, and marketing are key. In the world of UX design, this means having a solid information architecture and also having a clear understanding of your user – who are the visitors of the website and what is their primary goal? For example, a homepage for a local 24/7 plumbing company will serve a very different purpose than the front page of CNN’s website sharing breaking news.

What is Product Design?

Product design involves the design of mobile apps, web applications, IoT devices, desktop applications, and more. The purpose of product design is to create a digital tool that supports users in accomplishing their goals (whatever those goals might be). A great way to distinguish product design from web design is the task intensity associated with each. When dealing with a product, the goal your user or customer is trying to achieve is generally more task intensive than that of browsing a website to understand a company’s services and pricing. Let’s use Squarespace as an example. The product Squarespace offers is a web application for building customized websites. To use Squarespace’s product to build out an entire website is much more task intensive than the effort required to scan their website to learn more about Squarespace as a company. In the case of an app like Later (a social media planning tool), the tasks associated with using their product like uploading your media, visually planning out your Instagram feed, writing out your captions and implementing your hashtag strategy, are also more intensive than just glancing over Later’s website to understand their pricing plans and subscription models.

Generally, when we talk about UX (user experience) design or UI design, we are most often referring to product design or digital service design. Product design entails the creation of a product roadmap that will help to monitor project progress, ensure that the goals set are achieved and that after all of this hard work, the product release goes smoothly. Product design includes steps like conducting user research (such as interviews, observations, and diary studies), creating user flows, designing wireframes, finalizing the visual design, conducting thorough user testing, and so much more.

Product designers are required to wear many different hats to make certain they have a full understanding of the product in question. In order to succeed with product design, comprehensive communication and cross-functional knowledge of several disciplines are required. Depending on who the product designer is working for, and the resources allotted by the company to build out a team, product designers are often in contact with people like product owners, copywriters, communication designers, information architects, service designers, UX researchers, project managers, data analysts, marketers, and customer support representatives! It is also essential that a product designer remains in constant communication with the stakeholders. The overall user experience of the product must always be guided by the business goals and objectives held by the product owner or organization in charge. Make sure stakeholders are informed and work hard to get their buy-in.

What’s the difference between web and product design?

Alright, so we’ve explained what website design and product design are, but it couldn’t hurt to provide a little extra clarification for you! After all, so many “products” are still technically websites, aren’t they? Let’s dig into some of the key differences between each discipline accompanied by some helpful examples.

Some of the differences between web design and product design are…

To elaborate on one of our previously mentioned examples, Squarespace is a product that also has a website where you can learn about what Squarespace offers its users. On Squarespace’s website, you can read about their pricing, see examples of their product in action, browse their library of website templates, learn more information about affordances, read about the company’s history, etc. However, the PRODUCT is Squarespace itself.

What about Shopify? Same deal. Shopify is a product you can use if you’re an entrepreneur looking to build an eCommerce website, ship, and sell your products. Shopify is also a website where potential customers can check out what they have to offer before purchasing their product. One more example is MailChimp – a web application that’s also a product, but (you guessed it!) MailChimp also has a website.

As different as product design and web design are, they definitely have some overlapping characteristics and intersections as disciplines. Some similarities between web designers and product designers include being able to design, harness creative and analytical thinking, and exhibiting strong communication skills. Both types of designers are found to be employed just about anywhere! Their skills are needed across fields like technology, healthcare, fashion, and more, and they’ll work closely with developers on the day-to-day.

Here’s a handy diagram to help you visualize the differences between both disciplines:

Not sure which professional you’ll require or what work you need to have done for your next project? To help you decide whether you are looking for a web designer or a product designer (or even a product & UX design firm!) we’ve created five real-world scenarios to help you understand who you need and when.

Scenario 1:

You’re looking to position yourself as a subject matter expert where you’ll constantly provide fresh content to grow a loyal following, so you’ve decided to start a personal blog around your brand. Who will you need to set this up for you?

• • A Web Designer – These days, many individuals and organizations (like us!) have a blog, and thanks to products like Squarespace and WordPress, it’s relatively easy to create one! A website designer will help you set it up and show you how to regularly update it with posts, images, and videos. Alternatively, if you don’t have the time, you can keep a website designer on a retainer to make those updates on your website for you.

Scenario 2:

You manage a building complex in Toronto with over 1000 occupants and your current communications systems are inefficient and not serving their purpose. Recently, your building experienced a little electrical fire in one of the break rooms, so you sent out a message to the occupants to ensure everyone was properly informed. Much to your surprise, not everyone received it (or the previous messages from weeks prior, for that matter). This busted communication system is a safety hazard! You haven’t had success with the other communications systems you’ve tested, so you’ve talked to your management office and decided to create your own custom system. Who will you hire to help you design a new communications system tailored specifically to your needs?

• • A Product Designer – They will study the communication challenges, compile any necessary user research, and put their expert design skills to use to create an ideal communications system solution from scratch.

Scenario 3:

You feel like there’s an opportunity for an ultra-convenient and seamless convenience store delivery service, so you decided to create one. The twist is that you also need a platform to market this great idea. You’re assembling a team to bring your ideas to fruition, and so far you’ve brought on board a full-stack developer, a UI designer, and a budget for at least 3 more team members. Who else will you add to the team to bring this idea to life?

• • BOTH a Product Designer and a Website Designer – This is because a product designer will help design the delivery service, while the website designer will create the website where the service can be marketed and utilized.

Scenario 4:

You work for an international oil and gas company that has existed for over 20 years. The company employees use a variety of internal tools for HR requests, posting bulletins, and tracking schedules. The kicker is that none of these sites have been updated in over 10 years. The systems are robust, complicated, and outdated, so you suggested a company website revamp to management. They’re interested, but first, they need you to show them the specific areas that can be improved upon. Who do you call to perform a content audit and suggest improvements?

• • A Product Designer – Information architecture is fundamental to great product design! Content and clutter gradually build up over time which can interfere with user experience if it isn’t properly handled. A product designer will perform a content audit to map out all the information on your website and determine the best user experience solution moving forward. You want your users (in this case, your fellow employees!) to be able to find whatever information they need as fast and as easily as possible.

  • You can read about a time we helped a client redesign their employee experience HERE!

Scenario 5:

Your firm sells legal services to small and medium-sized businesses. You want to create a website that clearly and professionally explains your services and includes a contact form to get in touch with you. Who should you hire to carry out this project?

• • Web Designer – A web designer will be able to create a website for your firm that articulates your services, showcases your professionalism, and easily integrates contact forms and a newsletter sign-up function.

If you found this post because you were feeling confused over these two disciplines, we hope you found some clarity! Product design and web design have a few key similarities to keep in mind, but most importantly they have many distinct differences. At length, they are not the same – website design is dedicated to the planning and presentation of elements, while product design considers the big picture of user experience while tying in the importance of meeting business goals.