The latest news from Balsamiq:
Why we realigned before a redesign

Trouble viewing?
View it online.

Hi friends,

We hope you’re enjoying your summer, taking time to unwind and soak up the sun. We’ve been soaking in our fair share of sunshine, all while balancing a massive UX update we recently made to Balsamiq Cloud: updating our editor.

Earlier this month, we released our dev update for the summer, which talks about the changes in detail. Now, it's time to give you a backstage pass to understand how this update took shape (and what lessons we learned from the project).

I sat down with our lead UI/UX designer and co-author of Wireframing for Everyone, Michael Angeles, to get the inside scoop on the new Balsamiq Cloud and web app editor.

So, sit tight, grab a cup of your favorite beverage, and let’s get into it. Here’s what I learned from my conversation with Michael:

How we shaped Balsamiq’s latest update

We're always talking about how we can improve at Balsamiq. It's not just about polishing up our products, but also about growing, learning, and nurturing a sustainable business. We use the term 'kaizen,' a Japanese principle meaning 'continuous improvement,' to embody our constant evolution and refinement.

Throughout the past year, we've gleaned customer feedback and strategized our future roadmap. This made us realize that our core functionalities needed a touch-up. True to the 'kaizen' spirit, we focused on refining existing features, trimming away the product bloat, and enhancing overall user experience, all under the umbrella of 'pruning' or as we humorously term it, 'shucking'. You’ve heard us talk about this in a few newsletters this year.

This time, we didn’t just want to prune our tool—we also wanted to make it more modern. The team was toying with the idea of a product redesign, but then we hit the brakes. We asked ourselves: is a facelift all we need?

Product colors, fonts, and style could change the aesthetic of Balsamiq, but the roots of our tool are simplicity and focus. Coincidentally, simplicity and focus are also what helps tools feel more modern. So, while our guts said a cosmetic change was probably needed, it wasn’t the most critical project for us to pursue (yet).

We had to align before we redesigned.

Realign before you redesign

Some time ago, Michael shared the article "Good Designers Redesign, Great Designers Realign" by Cameron Moll. It points out the difference between realignment and redesign. Realignment is all about the purpose, while redesign is all about aesthetics. We knew both mattered, but redesigning without realigning could lead us down a rabbit hole that didn't consider our customers' or business needs.

So, we decided to put realignment first on our to-do list.

If we'd jumped straight into picking new colors and fonts, we would've ended up with a pretty interface but the same old issues. We could've been stuck in a feedback loop and maybe tried a bunch of stuff that wouldn't stick. That's not only confusing but also a time sink! So we aimed our sights on our main goal - realignment rooted in simplicity and focus.

Inside the process

Usually, our updates begin with your invaluable feedback. This time, our founder and CEO, Peldi, lit the spark with his initial ideas. After deep talks about our tool's focus and value, he pointed out that we needed to get back to basics: simplicity and focus. That meant reshaping the interface to be more intuitive, clean, and modern.

To get a head start, we opted for a quick discovery phase, mainly focusing on competitive analysis. We're still fine-tuning our discovery phase at Balsamiq, so this step was more of a gut call.

Then we took to Balsamiq, iterating with wireframes, testing different ideas, and unraveling potential solutions to our challenge. Michael says we kept the user at the center of our work through design critiques. As he iterated on designs, he’d present the scenarios and the UX team would consider the solution through different lenses.

Take a peek at these snapshots of our work in progress:

Concept 1

Concept 2

Concept 3

We critiqued each wireframe, thinking through the lens of business, the customer, and good UX.

We’ve talked about design critiques at Balsamiq before, but a quick refresher: our user researcher is in every critique, our CEO’s head of product, and our product manager previously worked full-time on our support team (and still helps out as we transition). This means about half of the team talks to customers nearly every day! The critiques focus on poking holes in each idea and making them better.

We talked our way through concepts and solutions until we hit the detailed design and user testing phases. This helped us validate our assumptions and ensure the realignment worked for our customers.

Here’s the final, user-tested result:

We’ve heard it doesn’t feel like the biggest change for users, and that’s exactly what we wanted. This design gives people the option to hide everything away or keep it out in the open. It’s a series of powerful but subtle changes.

Inside the process

Like other projects at Balsamiq, this came with a few main lessons we’re taking with us to the next project. Maybe these can help you on your next project too:

Spend time on the problem: The better we defined the problem at the outset, the smoother the rest of the process was. It's worth investing time in understanding the issue before diving into solutions. Since completing this project, we added a step to our product development process to give us more time for initial research.
Keep your research tools sharp: Our journey to better understand user feedback is ongoing. We're still refining our tools and methods to extract look & feel data. Like many other teams, we don’t have the luxury to devote a month to one question, so we do continuous research and add new questions as they come up.
Embrace your own path: There's no one-size-fits-all approach to product development. We've found our own rhythm, balancing user research, business needs, and intuition. Sometimes, a project needs detailed requirements or comes from an obvious pain point/data point. Other times, as in this case, a project comes together more organically.

While that might be it for this phase of pruning and product changes, we're already working on our next big thing: “Flexible Canvas.” And, we’re feeling ready to start thinking about those visual updates, like logo, fonts, and colors. We can't wait to share more about it in the fall and, of course, hope you learned something from hearing about our recent updates.

Happy customer of the month

Sometimes joy is simply working on Trello and Balsamiq in parallel designing a product plan. Good morning! — Roee Adler

Product news

This month’s release (aside from Dev Update for Summer 2023) is a small bug-fixing one, but it involves a small change that will save you some time: resizing images from a corner now defaults to keeping their aspect ratio intact, instead of stretching them.

If you want to stretch them, you can resize them from the sides, or hold down SHIFT while resizing.

Try it out!

Wireframing Academy news

Our book tour continues 😉 Leon was interviewed about our new book, Wireframing for Everyone, on two of our favorite podcasts!

And very soon, all 3 authors will sit down (virtually) to talk about the book on August 3rd. Register for free here.

Last, but not least, if you haven’t picked up your copy of the book, visit balsamiq.com/book to order and learn more.

UX/UI links for July

Designing Age-Inclusive Products: Guidelines And Best Practices - by Michal Halperin Ben Zvi
Loading & Progress Indicators - by Taras Bakusevych
How to Use Your Intuition in Your Product Design Process - by Suchithra Sathiyamurthy
Using Imagery in Visual Design - by Rachel Krause
The Looking Glass: Higher Level Design - by Julie Zhuo

Company news

We’re still heads down on a number of projects aimed at making our company stronger. These projects include things like a new salary matrix, work coverage plans for team members going on parental leave, internal tools development, and budget planning.

We're actively researching ways to enhance collaboration in our product! Take our quick survey and let’s create a better experience together. 🚀 Your input makes all the difference.
Sponsorships and raffles: Notable events we’re sponsoring include You Got This Through the Seasons: Summer, SmashingConf Freiburg, Beyond Tellerrand Berlin and more!
Notable recipients of our Free Software Program:
- Air Ambulance Charity Kent Surrey Sussex envisions an end to preventable loss of life from medical emergency
- DART Command Central helps communities prepare for disasters & manage temporary emergency pet shelters
- Centre for Environment Education fosters sustainable development through innovations by being at the cutting edge of environmental education

That's it for this month!

Thanks for reading and don't be a stranger! We'd love to continue the conversation. What did you think about the Balsamiq Cloud update? How are you making sure you align before your redesign? Hit reply to let us know (I respond to all reader emails).

See you next month, with more behind-the-scenes news from your friends at Balsamiq!

Arielle for the Balsamiq Team

Most new customers find Balsamiq via recommendation...

If you know someone who might enjoy this newsletter, we would be most grateful for the introduction. Could you please forward this email to them?

If this newsletter was forwarded to you, please subscribe!

View in Browser | Update Your Preferences | Unsubscribe

Behind the scenes of Balsamiq's major UX revamp

How we shaped Balsamiq’s latest update

Realign before you redesign

Inside the process

Inside the process

Happy customer of the month

Product news

Wireframing Academy news

UX/UI links for July

Company news

That's it for this month!

Most new customers find Balsamiq via recommendation...

Older messages

Lessons from Balsamiq’s UX & marketing workshops

Inside Balsamiq’s new book: Wireframing for Everyone

Balsamiq resources for developing your design sense

How we evolved decision-making at Balsamiq

Looking back at Balsamiq’s 2022

You Might Also Like

164 / What if you could talk to Scarlett Johansson from the movie Her?

#454: JavaScript

Mayer Rus on L.A.’s Great Gallery Migration

Head of Typography, Centering Things, 3D Badge, Alternating Style Queries, Hate Speech

JavaScript Support, AI in UI/UX, Deja Vu, Nature of Code, Clubhouse

Accessibility Weekly #394: Images as the First Thing in a Button or Link

My product prioritization framework

Cascade, HTMX, Sponge Furniture, Meaning of Color, Flipbook

9 Trends From Milan We Can’t Stop Thinking About

Subframe, Attributes vs Properties, Front End Handbook, aspect-ratio, GenAI