Welcome to the wonderful world of design! I'm Chris, a product designer building exciting experiences for customers at Datadog. I've been a designer for the past 6+ years with experience as a freelancer, at design agencies and in-house design teams. I've also held positions as a frontend developer who's coded other designers work as well as my own. I've worked for Squarespace, Code and Craft and ASCAP (The American Society of Composers, Authors and Publishers.)
The last few years I've been mentoring high school students who want to learn more about working in tech as a designer and/or engineer. I've decided to create this "Design Manual" to help answer how someone could get started in a career in design. On a high level, this manual will cover topics such as understanding the foundation of design, it's tools, a process on building digital products, how to create a portfolio, as well as offer a vast amount of resources for continued education. This guide more or less follows my process as a designer.
You might be thinking that this is a lot of information to cover, however I've broken it down into easy to digest sections that are pretty straight forward. So, let's get to it!
What is product design?
Product design is a term used to describe the entire process of building digital products. A product designer is a multidisciplinary designer who focuses on designing products and their features.
Here are the most common types of disciplines for a product designer:
User Research – User researchers are those who conduct interviews with users to help gather data that identifies current pain points, understand user behaviors and other general information that helps build personas.
UX (User Experience) – User experience focuses on the negative, neutral or positive experience a user has when interacting with a product and it's features. UX designers focus their time on brainstorming solutions, creating empathy maps, personas, user flows, information architecture, wireframes, etc.
UI (User Interface, Visual) – User Interface design focuses on making designs look beautiful and on-brand through the use of typography, colors, spacing, graphics, etc.
Animation – Animation designers focus on animation and how elements transform and move. Micro animations are important in design because they convey meaning, especially during user interactions.
Prototype – Prototyping makes static designs come to life. Prototyping is important because not only does it let you test ideas quickly, but you can gain valuable feedback by testing with users.
Data Analysts – The science behind product design, this allows us to analyze data from A/B testing which help inform decision making. For example If you're not sure which design layout or color works best, you can test both variations and analyze the data to see which performed better.
Business Strategy – Building products is fun but it's important to truly understand why you are building a product. Business Strategy helps define the why and goals related to a products success. These goals also help keep designers focused on making sure they are designing solutions that help support the overall product strategy.
Designers have a vast amount of tools at their disposal to help them create and test their ideas. There are three main categories: analogue, creation and prototyping.
Analogue tools include your general office supplies such as pencils, pens, paper, rulers, sticky notes, whiteboard, markers, and tape. They're mostly found in brainstorming sessions and used for rapid paper prototyping to test ideas.
There are many types of design software and many of them are combining design and prototyping features into a single application. However, the most popular tool among product designers is Sketch. It's vector based and super flexible due to it's features and plugins. Brand designers primarily use InDesign, again because it is vector based and suited for graphic design. Popular wireframing tools for UX designers include Omnigraffle, Balsamiq, and Mockflow.
The sole purpose of prototyping tools is to make designs come to life so you can test them. Testing your designs early and often are crucial to working effectively and making sure your designs work as intended. Prototyping also helps explain your design to others since users can interact with it. It's possible to make simple click-through prototypes or complex ones that involve animation. Prototyping tools include: Invision Studio, Framer, Figma, Principle, and Origami. Framer is a top tool used by companies such as Google, Twitter, Airbnb, and Datadog. It's unique because you're able to create designs (just like sketch) then build prototypes complete with animations.
Terms and Definitions
As you learn more about designing and building digital products, you'll probably hear a lot of terminology that sounds foreign. Here's a list of some common terms and their definitions:
Standup – a standup is a quick, 10-15 minute meeting with the design team. The goal is for everyone to share what they are working on for the day.
Multidisciplinary Designer – a term used to describe a designer who focuses on various disciplines within design. This type of designer might specialize in UX, UI and animation, thus they are disciplined in multiple types of design.
Design thinking – this is a method of creative problem solving by understanding the user, challenging assumptions and redefining problems in an attempt to come up with multiple solutions.
Scope creep – in project management, scope creep is the term used when additional changes are added to the project's scope. This typically happens when project requirements aren't properly defined.
UX/UI – This stands for user experience and user interface. User Experience is the experience a user has while interacting with a product. User Interface defines the screens, pages and other visual elements (like buttons) of a product. UX Designers focus on user flows and wireframes where UI designers focus on making a product look pretty (typography, colors, grid, etc.)
User flow - a user flow is a diagram that shows how a user will move throughout a product. Essentially it's a bunch of arrows going from a user interaction (like pressing a submit button) to an outcome (user goes to another page)
Wireframe - a wireframe is a simple sketch of a user interface. Generally it's a bunch of boxes to show where certain would be displayed in a layout.
Mockup -a mockup is a prettier version of a wireframe that applies styling like colors, typography, spacing, etc.
Prototype – a prototype is an interactive design used for testing to gather feedback.
Pain Point - this is another way to say "issue" when describing a problem a user has with a product of feature.
Personas – a persona represents a group of users who share similar behaviors, attitudes and motivations. This helps you identify and understand who your target audience is when planning to build a product.
Affordance – these are clues about how an object should be used or interacted with. For example, a button with an ellipse "..." signifies that clicking on it will reveal "more" options.
Stakeholder – a person or entity who may be affected by a decision or outcome of a project.
PM – Project or Product manager is an individual who is in charge of the planning and execution of a project.