The key pillars of product design: The Bang blueprint

2024

Written by

The Bang Designers

As UX/UI designers, we will already know that designing a digital product isn’t just about making something that looks good – it’s about crafting an experience that feels good, too. It’s about making people’s lives easier, better or frankly, just more fun. Whether it's an app, a website, or an entire software ecosystem, digital products are as much about usability and interaction as they are about aesthetics. And that’s where the magic of product design comes in. 

Well, we say magic, but there is a method to creating top-notch products. A series of tried-and-true principles that guide our work as UX professionals. So, let’s cut through the noise, and dive into the pillars of product design – the ones that actually make a difference when you’re creating digital experiences that resonate.

What do we mean by product design?

Think of it as the full package – the brains and the beauty. It’s the entire process of creating digital products like apps, websites, or software, but it's so much more than slapping a few pretty screens together. Product design is about understanding users, defining how they’ll interact with your product and shaping the way that experience feels from start to finish. 

Creating top-tier product design isn't a rigid, linear process—these pillars often overlap, with the emphasis shifting depending on the project. Great product designers understand this, excelling while feeling comfortable and confident throughout the entire design process.

Now that we’ve covered the basics, let’s break down the core pillars to stellar product design.

User Experience (UX): The Heartbeat

We don't believe that UX & UI should be so separated, as they overlap and work in harmony so much, but for the purposes of this blog we'll break them down from our perspective. UX is the foundation on which your entire product is built, and if you get this wrong, no amount of slick UI design is going to save it. 

At its core, UX design is about one thing: making your product easy and enjoyable to use. And that starts with understanding your users. We’re not just designing for ourselves here; we’re designing for actual humans with needs, frustrations, and goals. That’s why we take a different approach: rather than relying on assumptions and creating user personas, we involve real target users to discover exactly what they need and want.

The key to UX design is making everything just work. Buttons should be where users expect them. Tasks should be simple and intuitive. If your users have to stop and think, you’ve already lost them. It’s all about creating that smooth, effortless experience where everything feels natural and intuitive – almost like the product is reading their mind, in a non conspiracy way.

User Interface Design (UI): The Window Dressing That Actually Matters

While UX is all about how your product works, user interface design is all about how it looks. But don’t be fooled – UI design isn’t just about picking out colours and fonts that you like (although yes being pretty does matter). It’s about creating an interface that is visually appealing and complimentary to the UX. The goal is to make sure your product is as functional as it is beautiful. 

UI is where your product’s branding shines. The colours, typography, and layouts all need to be consistent with your brand’s identity, creating a cohesive experience from start to finish. But it's not just about consistency, it’s about clarity. A well-designed UI is clean, clear, and easy to navigate. If your users can’t figure out what to do next, your UI isn’t doing its job. 

And don’t forget about functionality. The small details that tell users how to interact with the product. Consider those moments of delight–when a user stumbles across a feature that makes them think ”huh, that’s cool”. Whether it’s a seamless login process, a smart recommendation system, or a playful animation, adding small but meaningful details can elevate the UX. Visuals should reinforce functionality, not distract it. 

Information Architecture: Get Organised

We need a plan, bring in information architecture. This is all about how you organise and structure content within your product. After all, it doesn’t matter how beautiful your product is if users can’t find what they’re looking for. 

IA is the backbone of your design, ensuring that everything is logically organised, easy to navigate and – most importantly– intuitive. Whether it’s designing a simple nav bar or structuring a complex hierarchy of content, IA keeps your product clean and accessible.

Interaction Design: Make It Smooth and Joyous

Next up is interaction design, where we focus on the nitty-gritty details of how users interact with your product. If UX is the big picture and UI is the look, interaction design is about the feel. It’s the difference between a clunky, frustrating experience and one that’s so smooth users don’t even think about it – they just do it. 

Good interaction design is about making every action feel intuitive, logical, and–dare we say it– enjoyable. It focuses on the micro-animations, transitions, and visual or haptic feedback that guide users through the experience. Every click, swipe, and tap needs to feel natural and easy. No one wants to get lost halfway through a task or be left wondering “wait, did I just do that right?”. 

The secret sauce here is feedback. When users take an action, they need some sort of acknowledgement. Whether it’s a button changing colour, a confirmation message popping up, or a progress bar inching forward – this feedback lets users know the system is working with them, not against.

Responsive Design: A 2024 Non-Negotiable

It’s 2024 and while the majority of digital products on the market cater for multiple device types, it’s now how well they do so that separates the wheat from the chaff. 

Users expect products to be fully functional, no matter where they’re accessing from. The UX of the product should be just as good on a 5-inch mobile phone as it is on a 27-inch display, or smartwatch. 

A well-designed responsive product will automatically adapt, creating a seamless flow that gives the user exactly what they need, when they’re needing it. 

Accessibility: All For One & One For All

Accessibility is one of the most important, yet often overlooked, aspects of product design. Designing with accessibility in mind ensures that all users, including those with impairments, can interact with your product successfully. And in some cases– such as in the US– adhering to the accessibility standards isn’t just best practice, it’s a legal requirement. 

The WCAG guidelines provide a clear framework for designing accessible products. There are two main classes of accessibility to aim for: AA and AAA. The difference between the two often comes down to contrast ratios. To meet AA standards (industry standard) the contrast ratio of text and background must be at least 4.5:1. For AAA compliance, the ratio increases 7:1, making designs significantly more restrictive. 

Using proper HTML semantics and structure ensures that screen-readers interpret your website exactly as intended, delivering information to users in the clearest way possible. As a bonus, it also enhances SEO performance and makes future updates easier to manage. 

Perfecting the balance between accessibility with visual aesthetic is crucial. The best and most interesting products and designers will find a way to ensure everyone can use the products seamlessly, regardless of ability. 

Prototyping: The Dress Rehearsal

You wouldn’t launch a product without testing it first, right? Enter prototyping – the phase where your ideas go from from abstract to actionable. A prototype can be anywhere from a rough draft of your product to a high-fidelity interactive vision. Some people like to make wireframe prototypes, but we prefer to get to a high fidelity as soon as possible to get a much more accurate feel for the final product.

It’s a crucial stage that allows us to identify potential issues early - it’s a safety net. It’s far easier (and cheaper) to tweak a prototype than design a fully developed product. Plus, it gives you something concrete to present to our clients, team members, making it easier to get everyone on the same page. 

Another key purpose of prototyping is for developer handoff. A well-crafted prototype should show developers how your designs should flow, including how any animations and interactions should be implemented. This ensures a smooth transition from the design phase through to the development process. 

Last but not least, prototyping is essential as a proof of concept. This is a big one at The Bang, especially during the early stages with our clients. Acting as a ‘dummy app’, they can effectively showcase the product’s vision, highlighting its potential to investors and stakeholders. This can be a huge asset in those pitch meetings, as you can demonstrate the value of the app or website in a tangible way. For us, we primarily use Figma for prototyping, but also work with Principle, After Effects, and Webflow when needed to bring the product to life.

Usability Testing: Time to Learn

Now comes the moment of truth–usability testing. No matter how brilliant you think your design is, real users will ultimately determine if it works. This phase allows you to learn directly from users, either confirming your design’s effectiveness or highlighting areas for improvement. Usability testing puts your product in the hands of actual users, showing you how they interact with it in real-time. 

And here’s the thing: you’re going to uncover issues. But that’s a good thing. Maybe users are confused by the navigation, or they’re struggling with a feature. Catching these problems before launch gives you the opportunity to refine the design, creating a smoother, more successful product. While testing is crucial, it’s important to remember that no scenario can perfectly replicate every real-world situation. The goal is to catch as much as possible, within the limits of what is feasible and realistic, before the product launches to market.

There you have it– the key principles of product design, broken down, and demystified. From user experience to visual design and everything in between, these pillars work together to create digital products that are not only functional but also engaging, enjoyable, and downright delightful to use.

Our role as designers isn’t just to design for today–it’s to anticipate tomorrow’s needs and create trend-proof products that stand the test of time and make people’s lives easier. If you have a brand in need of a product, or hey, if your product needs some TLC, thinking of these steps is a sure fire way of building a successful product to launch to market. 

Want our help? Schedule a free discovery call with Bert.