How to turn data chaos into design gold 🧪


Welcome back. Last week, tech creator MKBHD dropped his first app—and the internet went wild. Panels, a $12/month wallpaper subscription, had designers everywhere raising eyebrows. My take? MKBHD isn't out here claiming to reinvent the wheel—he's a top-tier consumer advocate who decided to build something. This app? It's what happens when we spend too much time thinking about product instead of shipping it...something designers certainly aren't immune to. So cut the criticism and chew on that—there's a lot we can learn from his mistake.

—Tommy (@DesignerTom)


The Wireframe:

  • How to turn data chaos into design gold
  • Nail your prioritization with these tools
  • Choosing the right tool for any information challenge

Information Alchemy: Your guide to rapid sense-making

Picture this: You're redesigning an e-commerce app. You've got 50+ hours of user interviews, 1000+ support tickets, and enough heatmaps to wallpaper your office. Oh, and your presentation to the big bosses? It's in two days.

This is where the power of information organization shines. It's not just about keeping your files tidy. It's about:

  1. Making decisions faster and with more confidence
  2. Uncovering patterns and insights others might miss
  3. Communicating complex ideas effectively
  4. Making design choices based on solid evidence, not guesswork

To help you master the art of rapid sense-making, I've put together a mini-course called Information Alchemy (free for a limited time), packed with tips and tools to turn data chaos into design gold.

Today, we’re kickstarting your information architecture journey by exploring three key tools. Let’s get into it →
​

1. Affinity mapping: your messy data organizer

Affinity mapping is a lifesaver when you're drowning in unstructured info. It's perfect for making sense of those user interviews and support tickets—without losing your sanity.

Take the e-commerce app example. Here’s what you’d do:

  1. Write key points from interviews and support tickets on sticky notes (physical or digital). Use different colored sticky notes for different data sources.
  2. Group similar items together. Don’t overthink it—go with your gut.
  3. Identify themes across groups (e.g., "Checkout frustrations", "Search issues", "Mobile usability").
  4. Refine and reorganize your groups as needed.
  5. Step back and look for patterns. This is where the magic happens.

Looking for an AI boost? Check out Miro’s Cluster by Keyword feature or Dovetail’s AI clustering.
​

2. Entity Relationship Diagrams (ERDs): how everything connects

​

ERDs are the unsung heroes of complex system design. When you’re trying to explain to developers how everything just magically “connects,” ERDs should be your go-to. Key components of an effective ERD include:

  1. Entities: The main objects or concepts in your system
  2. Attributes: Characteristics or properties of each entity
  3. Relationships: How entities interact or connect with each other
  4. Cardinality: The numerical nature of relationships (one-to-one, one-to-many, many-to-many)

How to use it:

  1. List out your main entities (e.g., Users, Products, Orders).
  2. Define what attributes each entity has (e.g., Orders may have name, price, description).
  3. Figure out how these entities relate to each other (e.g. User places Order, Order contains Products, you get the idea).
  4. Draw it all out—boxes for entities, lines for relationships.

In our e-commerce example, an ERD could show you how Users, Products, and Orders all connect—here’s a great visual. You might realize you need to add a Payment entity, or that your Order entity is missing a crucial attribute for tracking.

3. Quadrant diagrams: the "which fire do I put out first" tool

When everything seems important, quadrant diagrams help you figure out what actually deserves your time.

How to use a quadrant diagram for the e-commerce app:

  1. Create a 2x2 grid with axes like "User Value/Impact" and "Effort Required".
  2. Plot your ideas or problems on the grid with dots. Nielsen Norman Group suggests you use different colors for different areas of expertise (e.g. developers may have green dots and rank feasibility, while designers may have orange dots that represent impact on the user).
  3. Focus on the high impact, low effort quadrant. That's your sweet spot.
  4. Use this to explain to stakeholders why their pet project might need to wait.

Pro tip: The size of each dot can represent a third factor, like user complaints. Bigger dot = more complaints = probably fix it sooner.
​

The bottom line: These aren't just fancy diagrams—they're problem-solving power tools. In our e-commerce example, you could use affinity mapping to group user pain points, an ERD to gain a clear picture of the app structure, and a quadrant diagram to decide which fires to put out first.
​
By mastering these techniques, you'll be able to:

  • Quickly organize complex information
  • Uncover insights that others miss
  • Communicate complex ideas more effectively
  • Make more informed design decisions

​
​Want to add more tricks to your information architecture toolkit? Check out the full Information Alchemy mini-course. This course is free for a limited time, including eight videos and a Notion workplace. You'll learn about more tools like flowcharts and Venn diagrams (not just for middle school math), and access a full database of more sense-making tools.


News, Tools, and Resources: Information Architecture

  • Still nailing your prioritization skills? Check out some options beyond quadrant mapping.
  • This comprehensive guide to information architecture is a must-read.
  • Love mind mapping? Check out Whimsical's new AI-powered mind mapping tool.
  • Want to dive deeper into ERDs? This comprehensive article is a great starting place.
  • Flowcharts are another great org tool. This article breaks down the flowchart process.

Got a great tool, podcast episode, idea, or something else? Hit reply and tell me what’s up.


Choosing the Right Sense-Making Tool

Choosing the right tool can feel overwhelming. Here's a simple framework I use:

  1. Consider your goal: What are you trying to achieve? Are you comparing options, visualizing relationships, or organizing unstructured data?
  2. Assess your data: How much information are you dealing with? How complex are the relationships between different data points?
  3. Think about your audience: Who will be using or viewing this information? What's their level of familiarity with different visualization types?
  4. Consider time and resources: How much time do you have? Are you working alone or with a team?

A quick cheat sheet:

  • For comparing options across multiple criteria: Use a matrix
  • For prioritizing or categorizing: Try a quadrant diagram
  • For visualizing overlaps and relationships: Go with a Venn diagram
  • For organizing large amounts of unstructured data: Affinity mapping is your friend
  • For mapping complex systems and data structures: ERDs are the way to go

These tools are meant to aid your decision-making process, not replace it. Don't be afraid to combine tools or adapt them to your specific needs. The best tool is often the one that helps you and your team gain clarity and move forward.

Want to dive deeper into choosing and using these tools? Check out the full Information Alchemy mini-course for a comprehensive guide to rapid sense-making in design.


The UX Tools Job Board

  • Hive, a provider of cloud-based AI solutions to search, and generate content, is looking for a Lead Designer.
  • Obsessed with podcasts? Join Podscribe, the leading podcast ad attribution, reporting, & verification platform as a SR UX Designer.
  • Join Peloton Interactive as a Senior Product Designer to help create beautiful experiences on its Digital Apps.

Hiring for a design role, or know someone who is? Submit it here to hit the inboxes of 75k+ talented designers.


Thanks for reading! What's your favorite tool for organizing info? Hit reply and let me know.

Enjoying this newsletter? Let us know here.

UX Tools

Practical lessons, resources, and news for the UX/UI community. Learn the real-world skills, methods, and tools that help you build user-first experiences. We make resources like practical tutorials, the Design Tools Survey, the Design Tools Database, and UX Challenges. Join 60k+ other designers and sign up for the newsletter to get product design mastery in just 5 minutes a week.

Read more from UX Tools

Welcome back. In the last edition, I made a mistake: I referenced a fantastic article by Pat Morgan without properly crediting his work. So today, I want to take a moment to rectify that and give Pat the recognition he deserves. Pat's writing on design is some of the best out there. If you haven't already, I highly encourage you to check out some of my favorite pieces from him: 10 Heuristics to Simplify Design Decision-Making The Design IMPACT Framework How to Make the Case for Design Systems...

Welcome back. This week's gem: Mobbin's new abtest.design site. It's a goldmine of A/B test results from top apps, and I'm loving it. These resources are crucial for upping our design game. Seeing real-world UX wins and fails is invaluable, and reminds us why the design community rocks—we're always sharing knowledge. By being open about our hits and misses, we all get better. —Tommy (@DesignerTom) The Wireframe: Four (actually useful) design principles How to conduct a heuristic evaluation...

Welcome back. Framer just dropped a game-changer for creators: The new Marketplace Dashboard hands creators the keys to their own digital storefronts. As someone who's been in the trenches of design entrepreneurship, I can't overstate how huge this is. It's not just about organization—it's about empowerment. Whether you're a seasoned template maker or just starting out, this is your moment to turn side hustles into serious businesses. —Tommy (@DesignerTom) The Wireframe: How to build your...