A UX leader reveals his favorite design frameworks and tools
🗝 The Keyring // 001
The Jungle Gym is a monthly newsletter full of ideas and resources to help you think clearer and work smarter.
👋 If you’re new to The Jungle Gym, you might want to check out this introductory post to learn what this newsletter is all about.
💌 If you're enjoying what you're reading, spread the word via email or Twitter.
📝 And, if you aren't yet a subscriber and want to sign up for future issues, just enter your email:
One limitation of searching for information with Google is that the answers you get are only as good as the terms you enter. I’ve had multiple occasions where I was researching a topic but couldn’t find any quality content until I uncovered the right technical term.
Stakeholder Analysis
Jobs to Be Done
Information Architecture
Uncovering phrases like these felt like unlocking treasure chests of valuable knowledge. The tricky part is finding these keys.
One of my favorite key-finding strategies is talking to smart people about their areas of expertise. That’s why I’m excited to introduce you to The Keyring, a new format of the Jungle Gym, where I’ll mine the expertise of subject matter experts to uncover tools, methods, and frameworks that you can use to make progress in your career.
I’m planning to release a new issue of the Keyring each month along with the core version of the newsletter (which I’m working on improving a bit).
If you’re not already signed up and want to get issues delivered to your inbox, drop your email below.
Without further ado…
Zac Halbert on UX Design
I got to know Zac Halbert working together at Tradecraft. Zac led our Product Design Track, and aside from being an incredible instructor also happens to be one of the sharpest multi-disciplinary product thinkers I’ve encountered. Our conversations over the years have contributed a lot to the way I think and work. Zac was kind enough to let me grill him about what it’s like to learn and do design for a living.
What’s your job title?
I’m the Head of Design at Metromile Enterprise
Explain what you do, like I’m five
I design software that solves problems, is easy to use, and fun to look at.
I also build companies on the side.
How did you learn to do that?
I’ve studied and practiced skills from a variety of disciplines since I was a teenager, including:
Visual arts (graphic design, drawing, painting, photography)
Human-computer interaction (user interface design, user research, interaction design, systems theory)
Psychology (human cognition and mental modeling, decision theory, perception, and optics),
Computer science (data modeling and object orientation, frontend development, networked systems)
Business (product development, marketing, and team management)
What tools do you use at work every week?
Notebook & Pen
Email
Terminal
What are some mental models that you find particularly valuable in your work?
🤔 Decision Investment Matrix
An adage I live by is: “the harder it is to change your mind later, the more time you should spend making a decision.”
I use this framework almost daily since I’m constantly tempted to spend the wrong amount of time on decisions.
For instance, I find it easy to spend lots of time making small decisions (e.g., should there be 8px of space between these buttons, or 12px? Answer: nobody cares aside from other designers), or too little time making big decisions (e.g., should we focus on persona X’s use case, or persona Y’s use case?). This framework helps me make quick decisions for things that are easily reversible so that I can spend more researching decisions that have more significant long term consequences.
💎 Value/Effort Matrix
Another is a value vs. effort 2x2, which is how I prefer to do a cost-benefit analysis in product development.
Designers often start by crafting a product vision for an ideal world, then need to bring this vision back down to reality based on engineering, timeline, or budget constraints. I generally use this 2x2 when collaborating with engineering and product so that I can design the best possible user experience within the constraints we have.
⚙️ Systems Thinking
When I’m designing products in a strategic mode, the systems thinking framework is invaluable.
User experiences are dynamic systems that are constantly looping, evolving, and add up to something greater than the sum of their parts.
For example, if I described a tool like Twitter by saying it lets you share quick thoughts with the world or share other people’s quick thoughts, it would be a grossly inadequate description of the cultural force that Twitter represents. The best way to describe a tool like Twitter is to describe not just the constituent parts, but the emergent properties of the whole.
💻 Object-Oriented Programming
When designing products in a tactical mode, I use the framework of object-oriented programming to better understand the scope of possible actions a user can perform.
To be reductionist about it, most software is simply about manipulating data objects and their properties (creating, reading, updating, destroying, etc.), and performing actions on those objects.
For example, let’s take email — I can create, delete, or archive an “email” object. Once created, I can send that email to a user, receive email from a user, or forward a received email to a user. That’s a simplistic description of email, but thinking through an object-oriented lens helps me ensure that I’m not forgetting possible use cases when designing a product experience.
What’s a valuable asset that you create as an output of your work?
A UI prototype
What is that? Again, like I’m five…
Something that looks like real software and seems to perform like real software for a specific narrative, but isn’t actually real software.
What’s it for? What kind of problem does it solve?
It does several things:
Helps me and the team to work out the details of how the software will work, look, and behave
Gives me something to test with users, so we can learn what makes sense and what doesn’t
Aligns the product and engineering teams on what we’re building, and helps us break up the work into stories that can be developed by software engineers
It does all of this in the cheapest possible manner, which helps us avoid making costly mistakes after real code gets written — which is comparatively expensive.
How do you make one?
My process for building UI prototypes depends on what I need to learn. I try to aim for the lowest fidelity possible to learn what I need to learn. If my goal is to test whether a typical user understands a tagline on our marketing website, then a static prototype or even a Word document might be sufficient.
If I need to test whether a user flow makes sense before the developers start coding (which represents the majority of my work), I begin with pen & paper and sketch out key moments in the flow. Sometimes I also map out user and/or task flow diagrams to ensure there are no “dead-ends” in the process, and I’ve covered all the use cases we’ve prioritized in this release. For understanding and communicating complex task flows I use Business Process Modeling Notation, which I also use internally for mapping out my own work process.
Once I have a rough sketch or map of what I want to design, I move to either Figma or HTML/CSS/Javascript, depending on what’s fastest and how complex my learning goals are. For instance, if I’m designing an e-commerce flow, Figma is perfect. On the other hand, if I need to test how a user would interact with professional modeling software, then it’s easier to build a simulation using frontend code.
Once I have a prototype that lets a user tester complete a full narrative loop, I test specific tasks with a handful of users until I’ve either worked out all the kinks or run out of time — whichever comes first.
How might a non-designer incorporate UI Prototyping into their work?
UI prototyping is fairly easy to incorporate into your work if you don’t have a designer handy, and you don’t necessarily have to use professional design software. It’s worth noting that modern design tools like Figma, Sketch, and XD are orders of magnitude simpler for new users to pick up than Photoshop, so the barrier to entry is much lower than it has been in the past. However, most non-designers are also familiar with presentation software like Keynote or Powerpoint, which does everything you need to design a UI prototype — including adding simulated interactivity. The fastest way to start is to find a good UI kit from Keynotopia and start playing around with prebuilt UI elements to tell the story you want to tell.
Any resources you’d suggest for those who want to incorporate this into their work?
I recommend reading through Startups, This is How Design Works by Wells Riley for a good overview of design written for a non-design audience.
If you have more time than money and want to build prototypes yourself, Smashing Mag has a good Keynote-specific tutorial. Keynotopia is a good source for Keynote or Powerpoint UI kits, which give you UI components that are ready to work with. Figma templates has a lot of good starting points if you’re using Figma, Sketch App Sources for Sketch, or XD Guru for Adobe XD.
If you have more money than time, I’d recommend finding a talented designer for hire. Hiring a freelancer or short term contractor is affordable, and can drastically reduce the risk and cost of developing software without a designer’s help. It’s relatively easy to get started learning to design UI prototypes, but very hard to master. Hiring a designer who has studied for years is worth the investment and will do wonders for your bottom line — McKinsey would agree.
I’d love to see what a week-in-the-life looks like for you. Would you mind sharing a screenshot of your calendar?
Who are 1-3 people in your field or function whose work you admire?
What are 1-3 books that made you better at your job?
A big thanks to Zac Halbert for letting all of us peek into his brain.
A few quick requests:
I’d love to hear what you think about this new format. If you enjoyed it, or have suggestions for how to improve it, shoot me a quick reply!
If you found this post valuable, I would be very appreciative if you shared it with other people. You can do that by forwarding this email or by sharing it on Twitter or Linkedin.
Is there someone you think I should feature in a future issue of The Keyring? Send me their name!
Great post!
That object-oriented programming picture has a mistake that makes it a bit confusing: "name" isn't an object - it's a property of a human.
This is all so complicated, I mean the microkernel structure and not your post. I really like him. I know what it is, because I am an ardent fan of games, absolutely any. It motivated me to work in the company https://richpalms.com/games/poker thanks to which I made a lot of money playing and earning money for it. I love it. After all, they say the truth, when you make your hobby your work, you don't work a day.