Discipline: Product Design

Spend enough time on the web, and you’ll encounter a lot of familiar experiences.

For example, try visiting any news website. Even if it’s one you’ve never seen before, you’ll likely instantly recognize that the site contains news. You’ll also spot a number of clues indicating how to use the site.

The New York Times website resembles many other news sites. The logo in the top center serves as a link to the homepage. Underneath the logo is a series of tabs for each section of news content. The page header also contains a magnifying glass icon allowing the user to search the site. 

Below the header are today’s news articles. The most important article is accompanied by the largest headline, as well as a photo.

And it’s not just news websites that feel alike. Pull up examples from just about any category of digital content—public libraries, athletic shoe stores, social media apps for sharing videos—and you’ll undoubtedly find more similarities than differences in their interfaces.

The reason these experiences feel so familiar is that designers are taking advantage of UI design patterns. Design patterns are common solutions designers use to solve frequently occurring usability problems in user interfaces.

But why are these patterns so popular? How do designers decide where and when to implement them? And are they appropriate for every usability challenge?

Why Do Designers Use Patterns?

Creating familiar experiences reduces the cognitive load required for users to understand and use an interface. Cognitive load is defined as the mental effort required to process information and perform a task.

Web usability consultant Jakob Nielsen provides a rule reminding interface designers to minimize cognitive load: 

“Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.”

In other words, your interface needs to match the expectations of both mobile and desktop audiences who are used to navigating products similar to yours.

But when faced with a common usability challenge within a digital product, such as organizing a large number of news categories, beginning designers might feel tempted to create an alternative to the top navigation pattern found on competitor websites. After all, product designers are hired for their creativity, right? 

However, straying from the familiar pattern wastes the user’s time. Users aren’t visiting to puzzle their way through the designer’s fresh new interface—they’re here to read the news. And if the news that interests them is too difficult to find, they’ll leave.

And from the product team’s perspective, why spend extra design, testing, and development hours creating a novel approach to a navigation problem that’s been solved by countless other news websites?

Working with UI Design Patterns

Is implementing UI design patterns as simple as plugging one into your product’s interface? Not quite. Designers generally follow a four-step process to choose the right pattern and adapt it to the needs of their product and audience.

1. Identify the Problem

Before selecting a UI pattern as a solution, gather as much information as possible about the problem users are having. For example, web analytics might indicate potential subscribers to your news website are bailing out at a specific stage of the checkout form.

Your team should observe users attempting to complete the form in order to thoroughly understand the following:

• User goals: What motivates users to complete this task? 
• Pain points: What frustrations stand in their way?
• Context: What is the user doing when the problem occurs?

2. Find a Common Solution

Now that you understand the pain points facing users, the next step is to research what patterns are available to help solve the problem.

Start by reading about the problem. If you’ve observed that users are struggling to format phone numbers to match the expectations of your checkout form, read up on alternate solutions that don’t require specific formatting.

You might additionally check out sites that compile UI design patterns. Not all of these resources are free, but they can speed up the process of finding patterns and learning more about their implementation.

• UI Patterns
• Mobbin
• Pttrns
• UI Garage

3. Check Out Examples

Once you’ve identified the most useful pattern to solve your product’s usability problem, test out websites and apps that make use of the pattern. 

• When, where, and how is the pattern used? 
• What are the usability benefits of the pattern?
• Are there contexts in which the pattern might not make sense?

Your review should also evaluate the accessibility and ethics of the pattern. Accessibility means ensuring your interface can be operated by users with disabilities. As for ethics, avoid using dark patterns designed to trick users into performing unwanted actions.  

4. Adapt to Your Product’s Needs

Here’s where your creativity as a designer comes in. You’ll need to adjust your chosen pattern to suit your product in a way that balances all of the following:

• Desirability: Can users understand and use this pattern to reach their goals?
• Viability: Will the pattern help fulfill business needs?
• Feasibility: How easily can the development team implement this pattern?

Beyond Design Patterns

After thoroughly researching a design problem, you’ll occasionally discover that no existing pattern really satisfies your users’ needs. In that case, ideate on some new approaches to the problem. This is where great innovation comes from.

While today we might take popular UI design patterns such as tab bars across the bottom of mobile screens for granted, patterns like these began as a designer’s solution to a problem (in this case, limited mobile screen real estate combined with the need to keep frequently accessed options near the user’s thumb).

When in doubt, follow the advice of Don’t Make Me Think author Steve Krug. “Innovate when you know you have a better idea, but take advantage of conventions when you don’t.”

Ready to Build Your Own Interfaces?

If solving usability problems and designing user interfaces within digital products sounds like a fun challenge, consider applying now to Flatiron School’s Product Design Bootcamp. You’ll learn the design skills you need to build a competitive portfolio and land your first job in the product design industry.

Not sure if you’re ready to apply? Download the syllabus to learn more about the skills you can acquire in our bootcamp, or check out our free Product Design Prep Work to explore the material we teach in the course.

And if you are curious about what students learn during their time at Flatiron, attend our Final Project Showcase.

Of all design deliverables created by User Experience (UX) designers, few spark as much disagreement as user personas. A Google search for user personas in UX design reveals descriptions ranging from extremely valuable to completely useless.

But what are user personas? Why are professional designers sometimes skeptical of their value? And is it possible to use them effectively? Let’s take a look.

What Are User Personas?

User personas are fictional, archetypal representations of a certain type of target user of a product or service. They exist to document research findings. The better you know the tasks, needs, and frustrations of your target audience, the more realistic and effective your user personas.

User personas are designed to be shared with team members to inspire empathy for members of a particular audience segment and to motivate design decisions that solve pain points faced by that audience.

Source: Personas vs Archetypes

If a product or service has multiple customer segments with different customer journeys and distinct needs and goals, it can be helpful to create a persona for each group.

When Do Personas Lack Value?

Documenting and sharing user research insights and inspiring empathy for target users sound like useful goals, yet many argue against involving user personas in UX design. What characteristics lessen their value?

When They Contain Assumptions

Design teams often begin research projects with assumptions about their target users. In fact, teams will sometimes create what’s known as a proto persona to make these assumptions explicit before beginning research.

Proto personas are fine, as long as your team remembers the following:

• Always conduct thorough user research to validate or invalidate your assumptions
• Never allow unvalidated proto-personas to influence decision-making

Making decisions based on unvalidated assumptions actually decreases empathy. A failure to understand who you’re designing for leads to personas based on stereotypes, which means wasted effort building a product your audience doesn’t want and can’t use.

When They Highlight Irrelevant Information

Imagine a hypothetical scenario a user of a digital product might face. This is something design teams should be doing before creating a persona: generating scenarios that respond to very real and very specific pain points faced by your target audience and observed by your researchers.

Imagine your product is a poison control resource for pet owners. Alice, your target user, dropped two of her ADHD meds on the ground, and her labrador mix swallowed the pills before she could pick them up.

As she looks up safety information on her prescription before deciding what actions to take, which of the following descriptions are relevant to Alice completing this task?

• 34 years old
• Lives in Seattle, WA
• Fitness instructor
• Earns $65,000 a year
• Favorite brands are Apple, Nike, and Fitbit
• Extrovert
• Infrequent social media user
• Takes her three-year-old labrador mix jogging twice a week
• Distracted and worried by her dog’s pacing and trembling after ingesting the pills

Only the final two points in this list matter, right? The dog’s breed, age, and health might influence the action Alice takes, and her anxious state impacts her ability to concentrate on your product’s interface and information.

Yet most example personas tend to be bloated with meaningless demographic details.

Source: 50 must-see user persona templates

According to UX Researcher Indi Young, demographic details actually make user personas in UX design less convincing. Demographics “cause assumptions, shortcuts in thinking, and subconscious stereotypes by team members.”

When They’re Designed at the Wrong Fidelity

A Google search for user personas mostly brings up high-fidelity graphics resembling core portfolio deliverables.

Source: 50 must-see user persona templates

But polishing user personas to a portfolio-ready level is a waste of effort. You’re probably aware that UX design is an iterative process; this is no less true of user research. 

User personas reflect your team’s current understanding of your target audience. Each time a new research session uncovers new insights about what motivates your users, adjust your personas to reflect this new understanding. 

Sharing high-fidelity personas with other teams signals that your knowledge of your target user is complete, when in fact it’s ever-evolving.

How to Create Meaningful User Personas

So can user personas in UX design remain meaningful? Yes, provided you follow four important rules.

1) Build From a Specific Scenario

Your user should be facing a specific problem that prevents them from reaching a specific goal.

2) Reflect Actual Research

Personas should share real insights uncovered by speaking to target users and observing the problems they face in context. 

One powerful way to communicate these insights is to include meaningful quotes from research sessions.

“There is nothing better than a choice quote that encapsulates what people are feeling and communicates it clearly. But too often, I see personas using obviously fabricated quotations to communicate what a persona should say, rather than what an actual person did say.” – Christian Ronan, Type/Code

If you’re not sure what your target user would say given a certain scenario, conduct more research.

3) Skip the Demographic Details

When adding details to your user persona, make sure they’re specifically relevant to the scenario you’ve established. Your persona’s salary might matter when completing the onboarding process of a financial investment app, for example. Or your persona’s ethnicity could affect the process of filtering out conditioners inappropriate for their hair texture while shopping for beauty products. 

But whenever demographic details aren’t vital to your scenario, leave them out.

4) Stay Minimal, Low-Res, and Up-To-Date

Resist the temptation to create wordy, highly polished user personas. Instead, focus on emphasizing the goals, needs, and frustrations relevant to users when completing your chosen scenario.

Source: The Big Problem with Personas

Each time your user research team uncovers something new about the motivations behind your target audience’s behavior, update your personas to reflect that knowledge.

Is Product Design Right for You?

If learning more about what motivates users of digital products and services sounds exciting, consider applying now to Flatiron School’s Product Design Bootcamp. You’ll learn the design skills you need to build a competitive portfolio and land your first job in the product design industry.

Not sure if you’re ready to apply? Download the syllabus to learn more about the skills you can acquire in our bootcamp, or check out our free Product Design Prep Work to explore the material we teach in the course.

Succeeding in the product design industry requires far more than just software mastery. You’ll need the curiosity to observe users to find out what motivates them. You’ll need a passion for solving complex problems, and the ability to articulate your ideas and collaborate with developers and product owners. But if you’ve ever looked into product design as a career, you’ve undoubtedly heard of Figma. After all, most product designers use Figma every single day. According to the 2023 Design Tools Survey, Figma is increasing its dominance every year. It’s now the software of choice for building prototypes and designing user interfaces.

Image source: 2023 Design Tools Survey

But what is Figma, and why do designers love it so much? What do they use Figma to accomplish? And why should prospective designers learn Figma? Let’s take a look.

What is Figma?

Figma describes itself as “the leading collaborative design tool for building meaningful products.”

Essentially, Figma is software that allows designers to create layouts using vector graphics—that is, digital lines and shapes created geometrically, so designers can expand and shrink them infinitely without sacrificing quality. Designers can also import bitmap images like photographs into their layouts.

Alternatives to Figma have existed for decades, however (most famously, Adobe Photoshop for editing bitmap images and Adobe Illustrator for creating vector graphics). What separates Figma from the competition?

Figma Is Browser-Based

Using Figma doesn’t require installing any software. Beginning designers can start experimenting in Figma right away by simply visiting figma.com in a web browser.

Working in a browser offers numerous advantages. If teammates are collaborating in Figma, it makes no difference if one partner works on a Mac and the other a PC, or if one teammate has a different set of fonts loaded than another. Instead of passing files back and forth from computer to computer, Figma files are accessed from and saved directly to the cloud. Changes are saved automatically, and Figma’s sophisticated version history feature allows teammates to keep track of the design’s evolution.

Figma Simplifies Collaboration

If you’ve worked collaboratively in Google Docs, you’ll find Figma’s experience a familiar one. Frequently, designers use Figma to collaborate simultaneously on a single file. Each collaborator is shown as an avatar in the top menu bar and represented with a named cursor as they interact with the design.

Image source: The Power of Figma as a Design Tool

Designers can also invite stakeholders to leave comments on the work in progress. And Figma even displays code snippets on all design objects in CSS, iOS, and Android formats, simplifying communication between designers and developers.

Image source: Exporting CSS Code

But what if team members are at the ideation stage rather than working on a design project? Figma offers a collaborative whiteboarding tool called FigJam. FigJam’s features are aimed at keeping brainstorming meetings flowing, including a timer, sticky notes, and arrows.

Figma Is the Industry’s Leading Prototyping Tool

The 2023 Design Tools Survey indicates that more designers use Figma by far than any other prototyping tool. But what is a prototype, and why are they so important to designers?

When product designers discover a usability problem with a digital product, they don’t jump right into Figma and begin producing polished solutions. Instead, they conduct research, observing users in context and learning as much as they can about the user’s goals, behaviors, and frustrations when the problem occurs. Product designers also speak with product owners to understand the problem’s impact on business objectives.

Once designers better understand the problem, they come up with a hypothesis for what might work as a solution.

Prototyping In Figma

A prototype is a rough version of a design solution that’s just complete enough to test with users and gather feedback. That feedback is used to inform a new hypothesis, which leads to a new testable prototype, until eventually the design team has gathered enough evidence on user behavior to proceed with implementing the solution in the live version of the product. Building and testing prototypes saves the business time and money, since no effort is wasted polishing and developing an unwanted design solution.

Image source: Guide to prototyping in Figma

Building a prototype in Figma involves designing enough screens to simulate a user flow—the steps necessary for the user to get from a starting point to their goal—and then creating hotspots users can click or tap to navigate from screen to screen. Figma is full of options for overlay and animation effects to add realism to prototype interactions.

And there’s no need to switch tools once your design solution is thoroughly tested and is ready for a high level of polish. Designers use Figma to create beautiful, high-fidelity user interface designs that really shine in their professional design portfolios.

Figma Has a Powerful Free Version

When deciding whether to learn new software, a high price point can be discouraging.

Fortunately, Figma’s pricing plan includes a robust free version. Designers can create three fully collaborative Figma and FigJam files for free. They include access to most of the features found in the paid version. The version history is limited to 30 days in the free version, and some advanced prototyping features are missing, but beginning designers still have an opportunity to explore Figma pretty thoroughly before deciding to upgrade. 

The paid version costs $12/month as of the time of this writing, but is offered free to students and educators.

Figma Is Fun to Learn

Figma has a lower learning curve than other full-featured design software. It also offers a frequently updated help center if you find yourself stuck. Plus the always-active Figma Community offers support, inspiration, and a ton of design components and templates to streamline your design process.   

So what are you waiting for? Log in to figma.com and begin experimenting today!

Want to Learn More About Product Design?

If you’re interested in product design as a career, consider applying now to Flatiron School’s Product Design Bootcamp. During the program you’ll learn design skills to land your first job in tech (including plenty of Figma practice).

Graduates from Flatiron School develop in-demand skill sets that set them up for success in the industry, no matter which path in product design they decide to take. Download the syllabus to learn more about the skills you can acquire in our bootcamp.

Not quite ready to apply? Check out our free Product Design Prep Work and explore the material we teach in the course.