In this episode of Product Thinking, product experts Ellen Chisa, Partner at boldstart ventures, and Leon Barnard, Education Team Lead at Balsamiq, join Melissa Perri to discuss the importance of wireframing in product development. They explore the collaborative power of wireframes in product teams, using wireframes as conversation starters, and the benefits of designers having front-end coding knowledge for efficient product outcomes.
Ellen is an Angel Investor and Board Member in several companies, including Liveblocks, Stellate, and Skydio. Before joining boldstart, she was the Co-Founder and CEO of Dark, a backend programming language. Earlier in her career, Ellen was deeply involved in the Product domain, contributing her expertise to renowned firms like Lola and Kickstarter.
With over a decade of experience in UX design, Leon teaches user interface design basics and wireframing to Balsamiq's predominantly non-designer audience. He co-authored the insightful book, "Wireframing for Everyone." Before this, Leon mentored UX Design Courses at Springboard, contributed as a UX Designer at Toyota ITC, and was the Senior Interaction Designer at OptimisCorp.
If you enjoyed this episode, make sure to subscribe, rate, and review it on Apple Podcasts, Spotify, and Google Podcasts; instructions on how to do this are
here.
You’ll hear them talk about:
- [01:44] - Leon and his colleagues at Balsamiq authored "Wireframing for Everyone," with a foreword by Ellen Chisa. The motivation behind the book was to fill a gap in available resources, highlighting wireframing as a universal tool across all software disciplines. The book targets Product Managers and non-designers. Ellen states that even while working on the programming language Dark, wireframing was crucial. As an investor, she now advocates for early-stage founders to employ wireframes to improve clarity and collaboration in their teams.
- [05:20] - The roles and responsibilities in product teams aren't just restricted by titles or traditional terminologies. It's essential to focus on effective collaboration and communication to get work done. Sports analogies like a baseball or basketball team highlight teamwork, practice, and communication over individual superstars. Different team members, including PMs and UX designers, can use wireframes to share their ideas more clearly. While wireframes may differ based on the creator, their primary purpose remains to visually communicate an idea and resolve uncertainty.
- [09:47] - When creating wireframes, it's essential to maintain a high-level perspective and avoid getting lost in tiny details. Using tools like physical whiteboards or purposefully limited wireframing tools can help teams stay focused on the broader picture. You can also assign someone the role of ensuring the conversation remains top-level. Avoid overcomplicating with powerful UX tools that may distract attention from the user's primary goals. Remember, the objective is to prioritize the overall user experience over complex details.
- [15:07] - The shift towards a mobile-first approach in design has been increasing. However, one of the significant developments in web and app design has been the rise of design systems and pattern libraries, offering pre built components. To streamline the design process, integrate these systems into wireframes, providing placeholders that mirror real components. For designers presenting to executives, using wireframes should aim to spark dialogue rather than seek some form of approval. Making designs slightly ambiguous can encourage engagement and questions, turning wireframes into real conversation starters.
- [22:10] - Jumping straight to a high-fidelity prototype or coding might seem efficient, but it can lead to wasted effort if the final product doesn't meet real-world needs. While high-fidelity prototyping is valuable close to development, the initial ideation phase is crucial to ensure product-market fit and differentiation. It's like prototyping methods for choosing between a pencil and a paintbrush: each has its time and place in the creative process, and one doesn't necessarily replace the other.
- [29:33] - Designers can greatly benefit from knowing front-end coding, especially when using actual code that will be part of the end product. This knowledge helps in maintaining consistency and making better design choices. Just as product managers debate their need for technical knowledge, designers too should have coding awareness, which, in the end, leads to more efficient product outcomes.
Episode Resources:
If you enjoyed this episode, please visit:
Previous guests include: Shruti Patel of US Bank, Steve Wilson of Contrast Security, Bethany Lyons of KAWA Analytics, Tanya Johnson Chief Product Officer at Auror, Tom Eisenmann of Harvard Business School, Stephanie Leue of Doodle, Jason Fried of 37signals, Hubert Palan of Productboard, Blake Samic of Stripe and Uber, Quincy Hunte of Amazon Web Services
Check out our Top 3 episodes:
