Pillars of Digital Product Design

Software today is ubiquitous — it’s everywhere you look. It’s gone from something that was just used by a handful of select individuals to perform intense calculations in a basement server room to something we use so frequently, most people don’t even have to consider how it’s created.

Intentionally or not, every piece of software you use every day, from Instagram to your local DMV website, has been designed. In an ideal world, all software would be intelligently designed in a way that creates a better experience for the people using it, but that doesn’t always happen. Truth is, the demand for software is frequently outpaced by the supply of thoughtful software designers.

Plenty of new bootcamps, start-ups, and online curricula are trying to address this issue by putting more software designers into the industry. Still, it’s often difficult to understand what people who design software actually do day-to-day.

To those starting out in the industry or just curious about what software designers do, this guide will hopefully shed a bit of light on some of the key foundational pillars for designing user-friendly software for digital products.

First, let’s answer a very basic, if challenging, question to make sure we have the terms right: What do you call someone who designs software?

Official design-based titles vary widely across the tech industry. Some companies have separate roles between UI (User Interface) and UX (User Experience) designers, to split the responsibilities between those designing the visual interface of the product, and those who design the flow and logic for someone using the product.

Interaction Designers and Service Designers, meanwhile, will focus on either the micro or macro level of customer touch-points with software. Graphic designers, content designers, web designers, brand designers, and more can all individually play a distinct role when creating software.

The most common way folks refer to software these days is as a “product,” so it’s natural that the person who designs that product is called a Product Designer, so we’ll use that term here going forward.

At Slack, product designers are responsible for a whole host of things, from the UI to UX and beyond — sometimes all the way down to software sound effects. It’s our job to make the product come together in a way that our customers will find delightful and simple to use.

While product design is not rocket science, it’s also no simple task. It requires careful attention to detail to keep track of all the use cases, flows, user & business requirements, brand guidelines, and accessibility standards. These considerations often end up floating around in your head all at once.

This can feel like a lot to juggle! At the end of the day, though, there are three key foundational pillars that a product designer should focus on when designing for the masses.

1. User-centered problem solving

Every product solves some sort of problem for the person using it. The product can solve a functional problem (like a hammer that installs a nail to hang a picture frame) or it can solve an aspirational one (like the fuzzy dice that hangs from your rear-view mirror to signal: the driver of this car is obviously killin’ it).

These days, the problems are often a mix of functional and aspirational. Nike, for example, solves a mix of functional problems (shoes protect your feet) and aspirational ones (shoes help you fit in with your peers). The ultimate goal of designing any product is to understand who will use it and what problems it will solve for them.

As a designer, your goal is to design a product that is both useful and valuable to the person using it, so they, in turn, end up utilizing the product and (hopefully) paying for the services. A truly well-designed product is a win-win situation for both the customer and your business.

Things to keep in mind for optimal user-centric designs:

Empathy

Many misunderstand this term as a shorthand for just “thinking as the user,” but the most successful designers go beyond this, by understanding the context the user is in before, during, and after using your product, as well as how they might be feeling throughout.

Thinking empathetically also helps you counteract implicit biases that could prevent you from understanding how your work might be misinterpreted, abused, or even harmful to others. Build empathy by observing customers using your product, soliciting feedback (through your customer service team or surveys), and actively listening to diverse voices who can offer varying perspectives on ways the product might be used.

Goals, Anti-Goals, and Audience

Creating a list of user goals and anti-goals before starting to work on a product feature will help balance your user goals with your business goals, as well as identify potential problems and edge cases that might arise. For example, as a Slack user, I want to be able to communicate quickly and easily with my teammates, but I don’t want to feel distracted or overwhelmed.

A great way to frame these goals is through personas or jobs to be done: essentially groups of your target audience based on real data, that can offer a better understanding of who you’re designing for and what they need. It’s important to make sure your personas have just enough detail to be helpful in decision-making, but not too much to overcomplicate your process or focus on the wrong attributes. Remember to again check your unconscious biases about even hypothetical users.

Problem Framing

Once you start to understand who you’re designing for, framing (and re-framing) your problem statement correctly is key to ensuring that your design successfully solves that problem. Even a great solution will fail when built to solve the wrong problem.

One technique developed by Sakichi Toyoda called The Five Whys can often help better identify the root problem by asking “why” to each subsequent answer of “What is the problem?” five times. Problems are rarely as simple as “users don’t click the ‘add-to-cart’ button.” If you dig further by focusing on specific user personas and researching their needs, you’ll discover that the problem is actually something closer to “users avoid clicking the add-to-cart button because they aren’t confident that the item will get to them in time.”

Idea Generation

Lots of designers make the mistake of skipping right to this step without first taking the time to understand what and whose problems they’re attempting to solve. When product designers invest in understanding their users and problems upfront, generating ideas can be much more intentional and collaborative because you’ve identified the right structures in which to guide the idea generation. Collaborative idea generation is really where the best magic happens. Ideas can come from anyone, but it’s your job to help facilitate the idea generation and guide it into something you can work with and design an effective solution for.

“Design thinking” is a phrase that gets thoughtlessly passed around a lot these days, but the real idea behind it is the process of guiding the generation of high-quality ideas with a group of people. There’s many tools and techniques to do this, like Design Sprints with your team, brainstorming sessions with cross-functional partners across your company (like product, sales, customer service, or engineering), or simply sketching in a design tool with a pal.

The key is to be able to generate enough divergent ideas to help you understand various approaches on how you might solve the user and business problems you’re focused on, then determine which ones have the biggest opportunity to succeed. From there, you can start to dig into the actual design and explore potential solutions based on a hypothesis. For example: “We hypothesize that by providing a shipping time estimate next to the add to cart button, we’ll relieve some of the stress of people not knowing when they will receive their product.”

User testing, feedback, and validation

When you’ve gone through the process of understanding who you’re designing for, the problems they face, and potential opportunities to solve these problems, how do you go about picking the right one and if it’s going to work or not? The reality is, you can never be 100% sure about any decision, but you can gain enough confidence to move forward by collecting feedback at the right moments, especially from the users you’re designing for.

User feedback can come in many ways. You can create and show a sketch or an interactive prototype of the idea to select current or potential users in a research session and get their feedback. You can design and build a test version of the product and release it to a small subset of people. You can even design, build, and launch an “A/B test” to test two different versions of a solution to actual users and see which one solves the problem you set out to solve more successfully based on specific metrics.

User feedback can come in many forms. A few strategies:

• A sketch or interactive prototype: Select current or potential users for an in-person/remote research session, then collect feedback.
• A “closed beta”: Build a test version of the product and release it to a small subset of potential users.
• An “A/B test”: Release two different versions of a solution to actual users and, using specific metrics, see which one better addresses solves the problem you set out to solve.

Ultimately, you’ll never know if something works until it’s in users’ hands. Researching and staying in touch with your users at different points during the process allows you to proceed with confidence that the direction you’re going in is correct and is going to work for them.

2. User interface and experience design

When most people hear the word “designer,” the first thing they picture is someone who makes something visual. (The second thing they picture, for some reason, is someone wearing chic glasses and a beret while sipping a latte, but we won’t get into that now.) As we’ve established, a product designer is certainly responsible for more than just the design itself, but that doesn’t make visual design any less important. All of the best digital product ideas still require a compelling user interface.

But how do you go about designing that interface? It’s a mix of traditional graphic design principles—color, shape, spacing, typography, layout, etc—as well as a mix of interaction principles based on modern inputs (things like touchscreens) and even sometimes on analog interfaces (like knobs and switches on an old car radio).

The goal is to make something that feels natural to the person using it. At Slack, we have a product principle of “Don’t make me think” that covers this a little in both interactions and visuals. Your typography should have the right hierarchy so that users are able to glean the information that’s most important to them, the right spacing to feel like things aren’t cramped or stressful, and the right interactions to feel like it’s working the way your users expect it to.

A few ways that visual design breaks down for product designers:

User experience (UX) design and user flows

Digital products are by their very nature not static. While using your product, a user will experience many different screens, states, and inputs. By considering how the user will “flow” through your product, you can understand how to best get them where they want to go while anticipating the edge-cases, potential errors, and other aspects they could run into.

More often than not, most product designers start by designing a series of “wireframes,” or loose sketches of what a screen layout could look like, to illustrate the steps a typical user will take to achieve their goals. For very complex flows, like onboarding or account setups, you can also lay out the different paths a user could choose—for example, different pricing plans, options, and other settings—as well as any additional information users would need to add and any errors they might experience that would prevent them from moving forward.

Think of it like outlining an essay: mapping out what you want to build in a step-by-step flow in a lower fidelity helps you see the whole picture of the user’s experience and better understand whether your solution can be successful or not. Jumping into the details too soon can easily distract or even overwhelm you. Once you’re ready to move on to higher fidelity designs, you can still follow the pattern you designed at the beginning and create clickable or interactive prototypes to get earlier feedback on your solution from your teammates or your customers.

Branding, visual, and user interface design

The visual design of digital products breaks down into many different facets. It takes into account the brand of the product you’re designing for (does this feel like something this company would make?), the visual consistency of the system you’re designing in (does this look and feel consistent across all the different parts?), and the information architecture of how the screen is structured.

Branding is a big part of visual design for digital products. A company’s brand will determine the character of the product you’re designing; the colors, typography, and even spacing and motion choices will help illicit a specific feeling you want your customers to have. If you’re designing for, say, a bank, you want it to feel trustworthy & secure. If you’re designing a product for children, you might want it to feel fun & engaging. If you join an established company, they might have already created guidelines for the brand, so it’s important to adhere to those so the features you design fit in with the rest of the company and its products.

Visual design can also have a clear impact on a user’s ability to easily use and understand the product you’re designing. If similar objects (like text inputs and buttons) don’t match, users may not immediately understand how to use it. Without the proper affordances, users may not know they can interact with it. Too much color usage or the typography is too close in size, and a user might not understand what elements they need to be focused on. The Gestalt Principles have a lot of power here as well. Visual design is a very important tool to be able to help users both understand what to do in your product and how they might feel while using it. This can all lead to a pleasant user experience that eventually builds brand trust & user loyalty with your product.

Motion and interaction design

The best (and sometimes challenging) part about designing for digital products is that they’re inherently dynamic. Things can move, scale, change, beep, and boop. When you design for physical things, you often don’t get that ability.

This means that when someone interacts with an object, you can design it to change slightly to let them know that interaction is correct—hover effects, like those over links and buttons, are a great example of this. These smaller interactions are often called “micro-interactions,” and they allow you to thoughtfully consider how you want your product to respond to a user’s interaction. Maybe you want a star icon to give a little glitter burst when you click it, or a button to scale up in size when you hover. You can also design how screens transition between each other, or how parts of the user interface reveal or hide.

Much like visual design, micro-interactions are a small way product designers can guide users and inspire a bit of delight in the product, as well as embody some of the brand principles. Harnessing the power of interaction design can allow you to orchestrate how dynamic a product is and guide the user through the product in a way that is both deliberate and fun.

Content design

Good typography is useless unless the words it displays aren’t meaningful. Good content design helps guide users through your product, explain things that might be confusing, and help inform them of important errors or success states after they complete their task.

Content design is your opportunity to talk directly to your users. It’s important that the directions you have for users are clear, but it’s also an opportunity to do so in a voice that feels like your product’s brand is speaking with them, in a tone that conveys the right meaning. You don’t want to make a user feel anxious if something didn’t go right, and you don’t want to be too celebratory when something they did wasn’t actually that meaningful.

At Slack, and at a lot of larger companies, dedicated content designers often partner with product designers on features. Regardless of whether it’s an official role, content design is a major consideration in product design—designers should always consider what they’re saying to customers, and how they say it.

Accessibility

Throughout the design process, it’s important to remember that not every user of your product is 100% able-bodied. Many users will be coming to your product with varying degrees of impairment, from visual to mobility, and their needs should be taken into account when designing digital products for a wider audience.

For example, for users with visual impairments like color-blindness or blurriness, consider the contrast of the colors and the size of the typography you choose. Also consider users who depend fully on software called screen readers to dictate their experience using digital products. For users with mobility impairments, especially when designing for touchscreens, consider how far apart you’re spacing key actions a user must perform.

Your users are likely going to come from a wide spectrum of abilities, both cognitive and physical. As a designer of a product, it’s important to remember that you have the power to exclude groups of people who want to use your product; to counteract this, you’ll have to intentionally design with these specific needs in mind.

3. Collaboration and communication

Of all of the steps in designing digital products, collaboration can be the most fun—and also the most difficult. The reality is, no designer is an island. With few exceptions, nearly every digital product that you’ll be paid to work on will involve working with someone else—often many people, all with their own priorities and opinions. This can be difficult to work through, but if done well, it can make the process more enjoyable and mean better odds that your product will be successful.

The design portion of product development is often where multiple decisions and ideas come to a head. Sometimes seeing an idea or a decision visually represented generates a whole new slew of questions. Sometimes you design something that you really love that your teammates don’t. On top of all of this, you’re likely going to need to partner tightly with an engineer to ensure they have everything they need to build it in code.

It’s important as a designer to expect and be able to manage all of these things. The more you grow in your career as a product designer, the larger slice of your time is dedicated to collaboration and alignment of your teammates.

Here’s some different ways product designers collaborate:

Documentation

Contrary to the science-fiction novels you might have read, people who work in tech aren’t mind-readers. (Not yet, anyway.) Being able to clearly communicate and write down your thoughts in a manner that your teammates can easily understand is one of the most important skills a product designer can have.

Often, when product designers are thinking through ideas, sketching, and iterating, they’re making lots of implicit decisions in their heads. It’s important to be able to chronicle those decisions explicitly in a way that makes sense for people who will undoubtedly be impacted by those decisions. As a designer, the beauty of this is that you have the ability to do this with words, pictures, and other narrative devices.

You’ll need to be prepared to rationalize a decision, explain an edge-case, or describe a specific interaction that you want to achieve. With your design superpowers, you can help organize the decisions being made into easy-to-understand formats so your team is always aligned.

Feedback and alignment

Because design is such a visible function, you’ll find that many people will have many opinions on the designs you create. Navigating the feedback you receive, and being able to align with your team on what is important, is a critical skill for a product designer.

Design feedback can come through sessions with other designers called critiques, where someone presents a design they’re working on and other designers offer ways they can build upon or improve their design. This is a key point in the design process; it’s important to learn how to receive feedback, but it’s also important to learn how to give it as well.

The good news is, absorbing feedback, suggestions, and thoughts from your teammates will give you different perspectives beyond your own, and it will help your team align on what is most important. At the end of the day, the designer must take all the feedback they receive and incorporate necessary adjustments to make the product they’re designing even better.

Collaborating with engineering

When all the feedback has been incorporated and the designs are ready to be built in code, then it’s time for your engineering partners to start building it. Ideally, they won’t be surprised because you’ve been working closely with them throughout the entire process; they will have been offering feedback on potential technical constraints from the jump, while also understanding where you’re heading with the design.

The process usually involves specifications around sizes, typography choices and other design decisions so that engineers know what to code. There are tools that can help with this by translating this information to engineers, but some designers also create detailed specifications themselves, with detailed notes and lines to signify spacing between elements called “redlines.”

The goal of the handoff process is to ensure what gets built mirrors what you design as closely as possible. Building prototypes is a helpful practice to show how specific interactions and flows work. At Slack, we have another product principle we call “prototype the path” that ensures we’re thinking through the dynamism of our product as we’re designing it, so that no one is surprised when things make their way into code.

Only the beginning

Obviously, there are plenty of aspects of product design that were not included in this introduction. If we wrote the entirety of what a product designer does, it would likely be 1,000 pages long and need many more gifs.

But hopefully this serves as inspiration for those just starting out in their career in product design, or those who might simply be curious about the profession — after all, there are always many people involved in a given design process, and plenty of them won’t be designers. While some of this might seem daunting, the reality is it’s all learnable.

Tweet at us about elements you’re most curious about (either @slack_design or @kyleturman), and we may publish a more in-depth follow-up or two. Stay curious. Keep learning. Let’s design the future.

A few additional resources:

• There are plenty of online courses from Udacity, SuperHi, Coursera, Nielsen Norman Group, Shift Nudge, UX Beginner and more. Many design schools now also have tracks specific to product design.
• Read up on a few great books like The Design of Everyday Things, Don’t Make Me Think, Interaction of Color, A New Program for Graphic Design, Designing Products People Love, Product Design for the Web, Badass: Making Users Awesome, and all of the books from A Book Apart.
• Try joining a design community on Slack and get to know people in the industry. Here’s another good list.

Want to also give a huge shout out to MJ Livingstone who helped bring this article to life as well as Milan Moffatt and Pedro Carmo for the great feedback, and all of Slack Design for great resources.