Mike Kulakov Shares His Mockups Tips and Tricks

Mike KulakovA while ago I came across an article from our latest Champion, Mike Kulakov, called "Balsamiq 101: Wireframe quickly & effectively" and, to be honest, I was a little envious. One of my jobs here is to write documentation and tutorials to help people get started with Balsamiq Mockups and here was a concise, well-structured, right-on-target guide for new users that I wish I had written.

Mike's article has an outsider, yet expert perspective that I think many of our users will really get a lot out of. It spans feature categories and provides the right amount of information. It also showcases the philosophy behind Balsamiq Mockups: Excruciatingly simple. Filled with hidden powers. We liked it so much we added it to our tutorials and contacted him for this blog.

In particular I enjoyed how he included some of our more hidden features (like toggling markup, creating line breaks, keyboard shortcuts and symbols) yet made them accessible and easy to understand. He also included some of his own power user tricks like this one for screenshots. His use of images to reinforce the techniques and concepts was also well done.

The subtitle is of Mike's article is "Smart tricks to help you increase your productivity" and I think that's exactly what it contains. So, if you are a new or even experienced user and haven't yet done so, read it here and then come back for his interview below.

Q&A with Mike Kulakov

Who are you and what do you do?

My name is Mike Kulakov. I’m the co-founder/CEO of the agency Weavora and product owner at Everhour.

Weavora is fairly small company with a focus on custom web development. This is our 5th anniversary this year. We consider ourselves quite successful and even unique, at least in the local market (Minsk, Belarus).

What is the story behind Everhour?

As often happens, the last couple of years we were on a search for an ideal tool (time tracking in this case) and due to the lack of it, finally come up with the idea to create our own product - Everhour, time management for data driven teams.

First we used it internally but gradually more and more of our customers joined, then clients of our clients, etc. At some point, we decided to publicly release it.

Mockups for Everhour
Mockups for Everhour

So far we are fully bootstrapped. Some of us are busy with consulting projects, while others are fully focused on the product. At some point, we may completely switch to it. On the one hand it is difficult, but on the other it teaches us efficiency and frugality.

What do you like most about what you do?

In consulting, I especially enjoy my involvement in the early project stages. This includes getting acquainted with a client, discussing a problem and coming up with an execution plan.

In the execution stage all technical parts fall directly on the shoulders of my team, while the user’s experience remains on me. It is the most creative and interesting part of my daily job.

In product development, promotion is obviously the most interesting part. Developing partnerships, blogging, creating campaigns, etc.

What's challenging about your job and how do you deal with it?

There are two things:

  1. Every Monday I try to accomplish all my administrative work in one sitting. Multitasking reduces productivity.

    It is extremely difficult to combine creative and administrative tasks. And I have to deal with both. The former is always pleasant, however you can’t avoid the latter which may kill the initiative.

    Every Monday I try to accomplish all my administrative work in one sitting so that afterwards I can dedicate myself to creative work. Multitasking reduces productivity.

  2. I need to be extremely organized and keep track of time.

    If I define tasks poorly I’ll be constantly distracted with additional questions. If I do not have a solid plan I’m wasting the entire team’s time. 1 team hour equals 10 man hours in total for us!

    I usually spend 1-2 hrs on planning over the weekend in order to be set up for productive work on Monday.

What inspires you?

I get inspired by success stories of other entrepreneurs and of course by my own progress. One important practice to cultivate is the ability to notice and enjoy even the smallest achievements.

And, of course, positive feedback from our customers or Everhour users makes us work even harder :)

Why do you use Balsamiq Mockups?

Among other things at Weavora, I spend a ton of time on PM activities. I talk a lot with clients about the project and requirements in particular. This is where Balsamiq is especially handy. I'm sure that we are on the same page with the client and the team will easily and quickly come up to speed.

As for Everhour, basically every feature begins with wireframes. It saves us time and money. Before I invite someone to jump into discussion (and spend my teammates' time) I should have all the details outlined. Thus I always find out inconsistencies or gaps in the concept by myself.

Over the years, I developed to the following basic axioms:

  1. An image is worth 1,000 words
  2. Wireframes are easier to support

Regarding #1, people often skim text, especially when there is a lot of it. This results in many errors, misunderstanding, different perspectives on the problem, perceptual speed, etc.

On long-term projects, especially if they are agile, many things are constantly changing and textual documentation deteriorates rapidly. In addition, it's just boring to support text. With mockups it is way easier.

Every day I see this Aha! moment when mockups were super helpful.

Every day I see this Aha! moment when mockups were super helpful and thus heavily promote this approach.

What prompted you to write an article about how you use Balsamiq Mockups?

When you have developed a habit of drawing mockups and you do it every day it comes really fast, but there are some common problems which hinder and sometimes even irritate (or at least break your flow), such as:

  • Lack of practice/knowledge: How to do this or that? Can Balsamiq do that? ...
  • Framework: How to organize mockups or elements correctly, how to reuse them (i.e., symbols, groups, etc.)
  • Poor imagination

An example from Mike's article
An example from Mike's article

That's why I love sharing my own experience. For me it takes 20 minutes to draw a beautiful and detailed wireframe for a Gmail interface, while for others it could be 1-2 hours.

My article on Medium is kind of an attempt to reduce this threshold, share professional experience and inspire other people.

In addition to that, there was a slideshare presentation and masterclass I made ​​for a few teams.

Have you written any similar articles for other tools or products?

There were a few:

What other tools do you use for your job that you really like?

  • Skitch - just perfect for doing screenshots
  • Sketch - any design work
  • HipChat - all communication
  • Google Docs - any documentation, notes and further collaboration
  • Groove - a hot line with our users

Do you use Balsamiq Mockups differently for client vs. in-house projects? If so, how?

Interesting question. Hmm. I think no. In both cases I use Balsamiq for a concrete purpose - UX prototyping. The approach remains the same. In any kind of project I try to use Mockups as efficiently as possible.

What are the differences between in-house and client projects? Do you prefer one over the other?

I can’t say that we prefer one over the other. Each one has its own pros and cons.

It is easier to take risks in your own venture because it's your money.

It is easier to take risks in your own venture because it's your money. With client projects we consult completely with the other side before making any decisions. The final word rests with the client. And it’s very lucky if there is a dedicated person on the other side who you can instantly address your questions to.

Working with big companies you can't see the whole picture. You always work with less information than employees of this company really possess (always)!

One day we plan to switch to in-house products completely. But we're afraid that it may be boring :). Also, having a variety of projects brings greater experience.


Thank you, Mike, for the interview and your great article. You are a Champion!

Are you a Champion who wants to be featured on our Balsamiq Champions blog? Send an email to champions@balsamiq.com with your stories or blog posts!

Fred Schebesta on the Risks and Rewards of Innovation

Fred SchebestaThe theme of my interview with our latest Champion, Fred Schebesta, was innovation. Bold and innovative products have been the keys to success for his creative team, which is constantly challenging itself to come up with novel ideas. But innovation is more than just doing something that's never been done before, and he is quick to caution against running full-steam ahead with an exciting idea before thinking it through completely.

Fred and his team use Balsamiq Mockups as "a tool to incubate the initial vision," helping them iterate, refine, and test before delivering. He also calls it a "social cohesion device" because it helps bring people together around a visualized concept. He reached out to us to share some of his success stories that highlight the payoffs and pitfalls of innovation, which he describes below.

Q&A with Fred Schebesta

Who are you and what do you do?

My name is Fred Schebesta and I am a Co­-founder and Director of finder.com.au, one of Australia’s biggest and most innovative comparison sites. We provide simple ways to improve people’s spending and savings habits.

What’s challenging about your job and how do you deal with it?

I’m lucky enough to work with a young group of people who are buzzing with game-changing ideas. As great as innovative minds can be, it’s vital that we actually map out the process of a simple idea, so that we can then isolate the different components of that idea and fully flesh it out. Finance is something people generally don’t want to talk about, so we need to visualise the process – something Balsamiq has been instrumental in implementing.

What do you like most about what you do?

What I like most is that our service provides genuine help to our users, which is one of our main company values. Genuine help is the idea that your company’s success is relative to the amount of people who experience ongoing betterment from having interacted with the team.

Yes, we provide comparison services but first and foremostly we aim to help people make better choices independently.

Why do you use Balsamiq Mockups?

Knowing what people need isn’t the only answer — you need to be able to map it out in a simple, intuitive way.

Innovative thinking and creative minds are quickly becoming prized possessions in the workplace, but you need to make sure you’re using powerfully simple tools alongside them. Balsamiq is ingenious because its ability to map out potential ideas and incubate their growth is second to none. Our good ideas only became great products because we had Balsamiq as a tool to incubate the initial vision. Knowing what people need isn’t the only answer - you need to be able to map it out in a simple, intuitive way.

Can you tell me about a specific project where Balsamiq was especially useful?

We conducted research which showed that not only is Australia’s national debt around $50 Billion, four million credit card accounts in Australia are accruing interest charges. We have a real problem here that people don’t want to acknowledge, so we decided to run a financial fitness boot camp – a 12 Week Financial Fitness Challenge (12WFFC). We paired this with the creation of the 'iBag', a sleek black handbag that actually responds to overspending habits by locking itself shut and alerting you when you’re near a dangerous spending zone. We figure if you can’t control your spending maybe your bag will have to do it for you.

Our biggest concern in the whole process was that our idea just wouldn’t work in real life.

The conceptual work for the 12WFFC site was executed through Balsamiq – we used the software to not only design the individual pages but also assess the overall functionality of the site. We managed to avoid some major functionality flaws (we were using a lot growth techniques so we found some major layout problems) just because Balsamiq allowed us to see the plot­holes in our work before it was too late. Our biggest concern in the whole process was that our idea just wouldn’t work in real life – it was a risky move – but through this visualisation software we neutralised so many problems before they impaired our project.

Home Page Designs
A wireframe for the 12WFFC home page.

Over 300 Australians have paid to participate in the 12WFFC, with over 19,000 visits to the challenge’s landing page – the iBag also made it into the 2014 Anthill’s Smart100. Now imagine if we didn’t manage to pick up those key design flaws in the earlier, conceptual days. Again, my point is that innovation and creativity are vital to great ideas, but if you can’t use tools such as Balsamiq to actually map out those ideas it’s just too hit-and-miss.

Do you have any suggestions on how we could improve Balsamiq Mockups or features you'd like to see?

Balsamiq has broad range of applications as it can be used all the way from ideation to the final aspects of design. That being said it’s really hard to pin down any one thing in particular it should or should not be doing. One suggestion, it may be beneficial to provide options to make the interface more like pencil and paper – just for the traditionalists.


Thank you, Fred, for sharing your stories and lessons. You are a Champion!

Are you a Champion who wants to be featured on our Balsamiq Champions blog? Send an email to champions@balsamiq.com with your stories or blog posts!

Nick Pettit on Learning for Life

Nick PettitNick Pettit loves learning. Learning as a way to survive in an ever-changing business landscape; Learning as means of breaking into a new field; Learning as a tool for personal improvement. He recently wrote in an inspiring blog post called "Learning, Every Day" that "learning is a necessity that should be built in from the onset of any project."

His justification is that ongoing learning not only helps you stay ahead of your competition it also pays dividends as an approach to all endeavors in life. "Learning saves time, and time is the most precious resource available. We all have a limited life to lead, so it’s important to make the best of it."

He channels this passion into his role as a teacher at Treehouse, the online learning website that offers over 100 courses in the latest technologies. He teaches all areas of web design instruction and co-hosts the fun, informative free weekly talk show "The Treehouse Show."

His recent article called "How I Rapidly Prototype Websites" caught my attention not only because he mentions his use of Balsamiq Mockups but because he advocates for bypassing high-fidelity tools and jumping from rough wireframes straight to code, very much inline with our philosophy.

He's written some other great articles for the Treehouse blog, both for practicing web designers (such as "Bootstrap 3: Why all the hype?") and newbies (some of my favorites: "Things I Wish I Knew Before I Started Making Websites", "Beginner Web Design Mistakes You Should Avoid", and "How to Keep Up with the Web Industry").

I contacted him to discuss his design approach, his use of Balsamiq Mockups, and insights from his work at Treehouse. Read on for our interview.

Q&A with Nick Pettit

What is Treehouse and how is it different from other online technology course websites?

[Treehouse] is the best way to learn about web design, web development, mobile, and business topics. [It] is a self-serve learning platform where students learn via videos, quizzes, and interactive code challenges. We also have a robust community around our Forum, where students, moderators, and teachers all help one another. As students unlock badges and earn points, they're able to show their work on their public profile. I think Treehouse stands out from the crowd because our standards for quality are extremely high and we provide a guided path for learning any topic.

What was your path to your current role?

Growing up I was interested in both the arts and technology. I would paint or play the piano, while simultaneously learning how to program or make websites. I found the web to be the perfect intersection of all my interests, and luckily for me, web design and development is a skill that's in demand right now.

After I graduated college I started to become interested in sharing my knowledge with others. Even though I have more than a decade of web experience behind me, I'm still a beginner at many other topics, so I know how difficult it can be when you're just starting out. Helping others overcome this frustration is what motivates me; I love empowering people to achieve their goals. I started out sharing my knowledge via blog posts and podcasting. I partnered with my friend Jim to create a video podcast that strived for quality over quantity. We became pretty skilled at talking about technical topics on camera, so when the opportunity to work at Treehouse came up in early 2010, it was a pretty natural transition for both of us.

What do you like most about what you do?

The best part about my work is interacting with our students. Every day I receive emails, tweets, and forum posts from our students telling me how Treehouse has changed their life. It's pretty amazing when we get to hear from our students about how they were able to use their Treehouse education to land a job or get a promotion. In many cases, this has been a huge boon for individuals that need to provide for their families or pay off student loans and mortgages. These are the stories that make me jump out of bed in the morning!


A recent episode of "The Treehouse Show"

What's challenging about your job and how do you deal with it?

My biggest challenge as a teacher is to constantly stay on the cutting-edge while simultaneously thinking like a beginner. I need to know about what's new in the web space so that I can teach our students at Treehouse the modern-day best practices. However, I also need to understand what it's like to be an absolute beginner with no coding or design experience.

It's important for me to immerse myself in areas that I'm clueless about, because it helps me understand the struggle that new students go through when learning something for the first time.

I solve both problems at once by learning something new every day. Most of the time this relates to web design and dev, but even completely unrelated topics can help. It's important for me to immerse myself in areas that I'm clueless about, because it helps me understand the struggle that new students go through when learning something for the first time.

What topics that you teach are most in demand right now? What technical skills or programming languages do you think will be most relevant in the near future?

In the next few years, I think virtual reality is going to have a massive impact on the world.

Right now I think it's just important to learn how to design and code in the most general sense. Corporations and consumers appreciate design more than ever, and the demand for code is going to continue skyrocketing. There's certainly a lot happening in the web space right now with HTML, CSS, JavaScript, Ruby, and PHP. There's also other computing platforms like mobile that are important today. In the next few years, I think virtual reality is going to have a massive impact on the world. If you're reading this and chuckling to yourself because you're thinking about cheesy 80's and 90's versions of VR, it's time to wake up and take another look.

Should designers know how to code? What about other roles, like Product Managers? And should programmers have training in design and UX?

I think designers should at least understand how to write front-end code, particularly HTML and CSS. It's also helpful if they can write JavaScript interactions and code the views for backend frameworks like Ruby on Rails. I also think developers should have some level of understanding about design. This is true for many other roles (like PMs) as well, because in my experience, the cross pollination of skills is a huge boost to effective collaboration and communication.

What are the hardest topics or concepts for people to get that you teach, and how do you try to make them easier?

Sometimes specific concepts are so complex to explain in a beginner overview that we later break them out into individual courses. One example is CSS layout, which we decided should be its own course, so we created CSS Layout Basics. I also rely heavily on metaphors and analogies to explain how ideas map to similar concepts in other areas.

Is web development or programming something that anyone can learn? What backgrounds or personality traits make someone more likely to do it well?

Absolutely. I think anyone can learn to program just like anyone can learn how to read and write. There's something to be said for "natural" talent in any field, but programming certainly doesn't require it. If you like solving problems and expanding your mind, then programming might be for you.

If there is such a thing, what is a typical profile of a Treehouse customer? Are they people looking for a career change, people within the field looking to beef up their skill set, something else...?

I'm so glad you asked, because no Treehouse student is typical! That's just one of the big challenges we face every day. Some are looking to change careers, get a promotion, supplement their college courses, or just start a new hobby. Sometimes students want to zero in on something very specific, or just gain a general appreciation for work that's being done by their team members. We strive to provide an education that trains students for a specific job role and maps to real world problems.

Why do you encourage "cheap" prototyping tools and methods over high-fidelity tools like Photoshop?

I try to jump straight from low-fi mockups to the browser as often as I can.

I use rapid prototyping tools because nothing ever looks the same in the browser. This could be a result of technological limitations, responsive design considerations, screen calibration, or just product evolution. Designing high-fidelity mockups can still be a valuable exercise under specific circumstances, but even if they're absolutely necessary, they're still a big time suck. I try to jump straight from low-fi mockups to the browser as often as I can.

Is online video instruction the future of education? Will it eventually replace University classrooms, for example?

At Treehouse, our mission is to bring affordable Technology education to people everywhere, in order to help them achieve their dreams and change the world. We take pride in our remarkably high quality videos and our amazing community, and in the future, we plan to expand our platform in ways that have never been done before. We firmly believe that university education is entirely too expensive and time consuming, and often, it's just not suitable for the challenges that businesses face today. Treehouse aims to provide a better solution.

Why do you use Balsamiq Mockups?

I've been using Balsamiq Mockups for many years now, and I've continued to use it because of its simplicity. I've tried using more general purpose drawing tools, but they never quite match the focused speed and power of Balsamiq. It's wonderfully convenient to just drag and drop commonly used design patterns into a mockup to quickly illustrate an idea.

What is your favorite Mockups feature?

I love the rough and squiggly lines. To some it might not really seem like a feature necessarily, but I think it's a powerful visual idiom for demonstrating that the mockup does not represent the final result. Some clients may not have exposure to the general idea of wireframing, so the rough lines are great for making the distinction between a "blueprint" and a real product.

What has been your experience teaching people about Balsamiq Mockups and low-fidelity wireframing?

Balsamiq makes teaching people about wireframing very simple. A general purpose drawing tool might be more powerful in certain areas, but the tools are designed to be flexible rather than focused. When I show people how fast they can iterate on an idea with Balsamiq, they're usually convinced almost immediately. I've used Balsamiq in several Treehouse videos over the years because it's so effective at outlining a project before teaching how to build it.

Do you have any Balsamiq Mockups tips or tricks that you'd like to share?

I force myself to do something completely different every time, even if it feels "wrong" at first.

Balsamiq makes rapid iteration very, well, rapid. When I'm working on an important project, I always try to draw the same screen several different times without looking at my previous work. I force myself to do something completely different every time, even if it feels "wrong" at first. Sometimes my first pass is pretty rock solid, but often I'll stumble into another design direction that I had not previously considered. It's also fun when elements from different iterations combine together to form a better final result.

Do you have any suggestions for how we could improve our product, or features you'd love to see?

I have two ideas. The first one is a little crazy and complicated: I'd love the ability to jump from Balsamiq to browser using some sort of "wireframe" theme in a framework like Bootstrap or Foundation. The technical implementation might be pretty complicated if exporting directly from Balsamiq, but even just some companion CSS for designing in the browser might be a nice complement to the app.

My second idea is to actually take Balsamiq into more a "blueprint" style aesthetic. Even with the squiggly lines, sometimes clients are still confused about whether or not a mockup represents the final result. However, many people are familiar with the idea of architectural blueprints, so that metaphor could help. Even if it's just an optional skin that can be swapped in, it would be pretty cool to see.

Do you have a memorable negative experiences with it to share? Please be honest, we really want to hear it.

I remember anxiously awaiting Retina support when I first used Balsamiq on my Retina MacBook Pro. I'm so glad this has been added!

What other tools do you use for your job that you really like?

I feel a bit unusual from many other web professionals in that I don't actually use a ton of tools for design. I generally stick with pencil and paper, Balsamiq, and a front-end framework. Sometimes I'll pop into Photoshop or Illustrator, but that's only if I'm working on an important project with lots of stakeholders that really need to see a pixel-perfect comp before coding begins. That's pretty rare though, and I find that it generally slows things down more than it's worth.

What do you do for fun outside of work?

I like to lift weights and exercise, but I also play a ton of video games. As a hobby, I've actually started programming a game of my own in C# using the Unity game engine. I'm writing it for Mac, PC, and the Oculus Rift, and I hope to release sometime in early 2015. It's a lot of work though, so we'll see how I do!


Thank you, Nick, for sharing your tips and experience. You are a Champion!

Are you a Champion who wants to be featured on our Balsamiq Champions blog? Send an email to champions@balsamiq.com with your stories or blog posts!

Sean Rosensteel on the Journey from v1 to v2

· Posted by Leon in Interviews and tagged , , · 1 Comment

sean_rosensteelOur latest champion is Sean Rosensteel. He is the co-founder of Bravo, a web-based tool for recording customer videos for marketing campaigns.

Sean reached out to us via email, writing, "Wondering if Balsamiq would like to do a story on Bravo Video, as we recently launched an entirely new website + interface using Balsamiq for wireframes. Without your software, we wouldn’t have been able to plan such an intuitive interface for our customers :)"

I corresponded with Sean and loved how well he was able to articulate his product development process and the role that Balsamiq Mockups played in it. He is a long-time Mockups user and an experienced entrepreneur. Sean told me, "I’m an extremely organized person, and that’s probably why I love Balsamiq so much. I like to plan and measure twice before executing. "

I think you'll enjoy his interview responses, so let's get right to it...

Q&A with Sean Rosensteel

Who are you and what do you do?

I’m the Co-Founder of Bravo, a software product that enables businesses to capture video from customers, users and fans - right over the web. I’m responsible for most of the marketing initiatives, as well as keeping our agency partners happy and up-to-date.

What trends do you see in your role or industry?

We’re seeing the adoption of user generated video by consumers and businesses alike.

We’re seeing the adoption of user generated video by consumers and businesses alike. It’s really quite exciting. When we first launched our software in 2011, user generated video was in its infancy stage. A few years later, and we’re seeing people of all ages participate in these raw video campaigns. Because of this shift in consumer behavior, I think more and more companies - especially the marketing departments within these companies - will start to see the importance of capturing customer feedback through authentic, user generated video.

What sets you apart from other people/companies that do what you do?

I believe the simplicity that our product offers really sets us apart. Balsamiq aided us greatly in wireframing the new interface, and we built it purely for marketing folk. It’s incredibly intuitive, and it’s so simple you can launch a user generated video campaign in less than a minute.

What’s challenging about your job and how do you deal with it?

I’d say the most challenging aspect of my job is figuring out why our product works so well for certain people while others who use it end up not taking it very seriously. We see some user generated video campaigns succeed with flying colors while others fail. We’re doing our best to start capturing data and feedback within the app to better understand what makes certain customers who are using it so successful. If you have any recommendations for user-based analytics software, I’m all ears!

What do you like most about what you do?

On occasion, I’ll manage a customer account. I love hearing how customers are using the software, learning more about the challenges they’re facing and then providing them with some insights and direction to help them achieve their goals. I don’t get a lot of time these days to work one-on-one with our customer base, but it’s something I’d like to do more of this year.


Comparison of Mockups and final implementation of the Review screen (click to enlarge)

What inspires you?

Customer stories. It’s so refreshing to learn about some of the fun and creative ways people are using Bravo. One of our customers is a non-profit, and they’re organizing an event this summer where people will ride bikes over 100 miles in a 2-day event for charity. They’re spending the night at a half-way point, and during their stay they’ll watch raw videos of their friends and family wishing them luck, cheering them on, and providing them the inspiration/motivation needed to finish the ride strong on day 2. The non-profit who is sponsoring this event is using Bravo to capture and organize all of the videos for the riders. It’s stories like this that convince you to forge ahead and continue doing great work.

What mistakes have you made, and what did you learn from them?

We’ve made a ton of mistakes...The important thing is that you’re learning from them.

We’ve made a ton of mistakes, and I’m sure we’ll continue to make them in the future. The important thing is that you’re learning from them. We’re still recovering from the mistake we made at the beginning of the year: We were launching a new interface, and we didn’t provide the option to existing customers of staying on the old platform. The vast majority of our customers were thrilled with the new interface, but we definitely had to smooth over some unhappy customers who were really used to the old one. Not that we’ll be launching a new platform anytime soon, but if and when we do we’ll definitely be sure to make the transition “optional”.

Have you made any “pivots” with your product along the way? Can you tell me about one?

Yes. For the first few years our product was focused solely on video testimonials. After receiving hundreds of request for more video contest-centric features, we release a video contest widget with user voting functions. This was a little victory for us because we could now support video contests in a feature-rich way whereas before, when we were only focused on video testimonials, it was a bit cumbersome.

Why do you use Balsamiq Mockups?

I’m a big fan of whiteboards, as I like to visualize from a high-level before getting into the smaller details and executing a plan. Balsamiq acts as our digital whiteboard, and allows us to visualize the concepts of a strategy before we put emotions and design in place. We enjoy its simplicity, and we find it very, very easy to use and adopt.

Can you tell me about a specific project where Balsamiq was especially useful?

When we originally launched Bravo v1 we made the mistake of NOT using wireframes. We were so excited to jump into the design stage that we made the decision to forge ahead, but it was costly. Not only did it create additional time revising the designs, but once it was developed it took even longer to make edits since we were dealing with live code. I’d say that to this day it was our one major mistake - because we immediately had customers using a software that wasn’t optimized very well for usability. Had we taken the time to wireframe, we could have streamlined the customer experience ahead of time and had happy customers from the start.

Had we taken the time to wireframe, we could have streamlined the customer experience ahead of time and had happy customers from the start.

When we were planning the release of Bravo v2, we knew that wireframing played an important role of the success of the new release. This time around, we invested quite a bit of time wireframing the new interface, uploading our wires into InvisionApp for a realistic user experience, etc. This allowed us to make a ton of on-the-fly revisions before we put our ideas into design.

What has been your experience showing your mockups to other people, for instance team members or clients?

Our team members absolutely love it, because they feel like they’re an important part of the planning process (which they truly are). As I mentioned in the answer above, we usually upload our wireframes into InvisionApp, which makes them come alive in a web browser.


Comparison of Mockups and final implementation of the Capture screen (click to enlarge)

Do you have any suggestions for how we could improve our product or features you’d love to see?

I think it would be awesome if you could upload Balsamiq files directly to InvisionApp, but I believe that’s a feature that InvisionApp would have to add to their software (I’ve already recommended it, by the way). I think the only recommendation I could make is to make it easier or more intuitive to add images to a wireframe. For whatever reason, I always have a hard time figuring out how to do this!

Do you have any memorable negative experiences with it to share?

I use the Mac desktop app, and for whatever reason it always opens up the last file I was working on. Usually, when I open it, I want to start a new project or work on a new file…so I always have to close out the last tab that’s open and start with a new one. Not the end of the world - pretty minimal negative experience - but overall we’re really pleased with it.

What is your favorite Mockups feature?

I’m not sure if it’s a feature per say, but I love the templates [UI controls] that are provided. They save so much time, and it’s nice that you can simply drag and drop a pre-existing module right into your wireframe.


Thank you, Sean, for sharing your stories and perspective. You are a Champion!

Are you a Champion who wants to be featured on our Balsamiq Champions blog? Send an email to champions@balsamiq.com with your stories or blog posts!

Dan Olsen on Becoming a Lean Product Ninja

Dan OlsenDan Olsen has traveled the country teaching people how to become "Product Ninjas" by introducing Lean product development processes into their organizations. He also consults with startups on how to create better products and processes. I was fortunate enough to get some time with him recently to discuss his insights and what he's excited about right now.

Dan's recipe for building great products

We started out by going through some of the concepts he covers in his presentation "Building Great Products the Lean Startup Way," which you can watch below. (You can also see a similar version without audio here.)

Product-market fit

When talking about his presentation, Dan started off by summing it up this way: "my talks are about distinguishing problem space vs. solution space and achieving product-market fit."

He says that determining what problem to solve is key and that the problem is conditional on identifying a target customer. You need to have someone who not only has that problem but is willing to pay you to help them solve it.

"You put your product out there, it's like bait on a hook. It's going to attract a certain kind of fish."

He likens product strategies to fishing. He says, "you put your product out there, it's like bait on a hook. It's going to attract a certain kind of fish." In one model, you may have bait that you know attracts the type of fish you've determined that you're going after, but "sometimes you throw your hook in the water without a good sense of what you're fishing for." In this case you end up with whatever fish responds to the kind of bait you have.

This latter model is growing in popularity with the greater availability of data and analytics that allow you to more easily discover who's buying your products, and the rise of concepts like Lean and Agile, where iteration cycles can be shorter and product teams can respond more quickly to feedback.

He cautions that just because you may have a lot of data about your customers doesn't mean that you really know them. You can get all kinds of demographics on gender, location, age, etc., but it can be hard for this data to be actionable. He thinks that talking to customers (the "fish" you've caught) directly can be greatly valuable. What works in practice, he says, is "you see what you catch and you talk to them... and you discover what they have in common." This helps you begin to learn which people value the benefits that your product provides relative to the other products out there.

He describes this as a kind of circular logic, yet it works. You put your product out there with a specific problem in mind that you're solving. Then you see who buys it and you iterate on your product by learning more about the problems those customers face, which may or may not be in the problem set you initially set out to solve.

Now that you've learned more about which customers are interested in buying your product, you can stop targeting the ones who aren't.

A consequence of this is that some attributes of the customer demographic that you had in mind initially will inevitably "fall out", meaning that they're no longer primary audience attributes for your product and shouldn't be targeted going forward. This completes the cycle; now that you've learned more about which customers are interested in buying your product, you can stop targeting the ones who aren't.

Making the leap to solution space

Once you've established a clearer idea of your target audience and their problem space, it's time to focus on the solution space, which is where design and wireframing come into play. Dan says, "design is the creative leap from problem space to solution space."

A lot has changed in this world as well. When consulting with or talking to Product Managers he will start by talking about the traditional role of a PM, saying that the old model was that a PM would write a large Product Requirements Document (PRD) and then hand it off to the development team. He says that PMs used to get by "living in [Microsoft] Word" but that's no longer the case.

Many companies are going Agile, writing user stories, and following the Lean Startup methodology. Yet that alone doesn't lead to better solutions. "When you have dozens of user stories it's hard to get a sense of what the heck is going on."

He says that wireframes and a UX presence in the organization help "tie it all together."

"You give developers text, what do you expect to get? You're going to get whatever UI they come up with. And that's not their fault."

When talking to PMs his advice is to hire a UX designer if they haven't already and to start including wireframing in the design process. In the old model of PRDs and similar documents, "you give developers text, what do you expect to get? You're going to get whatever UI they come up with. And that's not their fault."

In place of the PRD in modern organizations he says that now "the combination of annotated wireframes or mockups plus the user stories become the spec."

Dan's model of a "fully staffed product team" includes PM, UX design (specializing in information architecture and interaction design), visual design, and development (front end and back end). He says, "that's the continuum of skills you need" and, ideally, each role knows a little bit about the adjacent ones to facilitate communication between them.

He calls this the product A Team.

a-teamCredit: "How to Be a UX Design Army of One"

Having a UX designer on your team doesn't mean that you no longer need to create wireframes.

Finally, Dan advises that having a UX designer on your team doesn't mean that you no longer need to create wireframes. Wireframes are essential as a means of communicating design ideas to other members of the team. He believes that wireframes are so important because they're usually the first non-textual design artifact that's created. Without wireframes, "you and I can violently agree on 10 user stories, but in your head you're thinking of one UI and I'm thinking of a completely different UI."

The current state of UX

We then shifted gears because I wanted to hear his thoughts on the state of UX design as someone who is steeped in it every day. I asked him about the recent spike in interest in "Customer Experience" as well as his observations on the maturity of UX in the organizations he sees.

On "Customer Experience" (CX)

Dan confirmed what I had observed casually, that User Experience discussions are now being broadened to include the entire Customer Experience. He said, "CX is growing in prevalence in job titles" and mentioned that he has seen positions advertised with titles like "Chief Customer Officer" and "VP of CX".

I asked him why he felt this was happening.

Dan said, "I think the bar is being raised" because customer expectations are higher and there is more competition across all aspects of the experience. He feels that this is true for both for user experience and customer experience overall.

Customer expectations are higher and there is more competition across all aspects of the experience.

Additionally, you can no longer just release a product and leave it at that. "You need to get feedback and see what's going on."

He continued by saying that customer experience can mean different things based on the industry. A small app developer, for example, may not really think in terms of "CX" because for that developer "the Venn diagram of what is CX that is not UX is small," but large companies that sell products in stores have so many more customer touchpoints, including retail, call centers, etc. These companies are likely to think about customer experience more broadly.

For these large companies, aggregating data across disparate experience channels can be a huge challenge. But having a voice-of-the-customer channel can be incredibly powerful. When somebody first catalogs the customer's experience across the different touchpoints it can be a shock, he says, because they are so different. "Usually when you do that first audit it's pretty eye-opening."

On design maturity in the real world

Finally, I asked Dan about the state of User Experience across the organizations he talks to and works with. He explained to me why he is such a big fan of wireframing, and why it's the first thing he recommends to most of his clients, by talking about the different levels of his design maturity model.

ux-design-gapCredit: "How to Be a UX Design Army of One"

Dan talks about the UX design gap in many organizations. "The most common situation you see are teams that only have developers, there's not even a product person. There's certainly no designer." The next level up is developers and a PM. In both cases they are probably not creating wireframes, so you get a lot of different ideas about what the product is going to be. He continued, "even when you add a visual designer, they go straight to Illustrator and Photoshop," so the communication barriers during the development process still exist.

"The most common situation you see are teams that only have developers, there's not even a product person. There's certainly no designer."

He said that frequently, "it's not until you get a UI designer or a PM who knows [Balsamiq Mockups] that you get wireframing as part of the process." This is one of the reasons why he calls Balsamiq Mockups "the best $79 you'll spend," because wireframing is something that anyone can do, but that many small or new organizations don't do or even know about.

Even within teams that have a UX designer, he said that many companies are far from mature. I mentioned the UX blogs I follow and how they can make it seem like everyone is really pushing the envelope in UX. He said that's not the norm, saying, "it's a typical bell curve. You're looking at the 3 sigma people. Those are the people writing about it and debating the finer points of doing it this way vs. that way."

He's observed the same thing for programming languages and technology choices. The business or idea people he talks to just want their idea executed on, they don't necessarily know or even care about the technology used to build it. He told me that for a lot of non-technical founders, the decision about which language to use should be driven more by practical support for it, the ecosystem around it, and the availability of developers who know it.

It's a great time to be building digital products

We wrapped up our conversation by discussing what Dan is most excited about right now. He told me, as someone who has been creating software for 20 years that now is a great time to be building products because of the tools that are available. These tools not only optimize workflows for specialists, they also mean that for small teams, you don't have to be an expert in everything.

There are a lot of tools available now, and many of them are very good. He said, "good tools are popping up left and right... Within the A/B testing space alone, there's all this competition." He continued, "just like customers benefit when there's competition in a product market, product builders benefit when there are a lot of choices and competition in the tools market."

"Just like customers benefit when there's competition in a product market, product builders benefit when there are a lot of choices and competition in the tools market."

Comparing today to the old ways, he said, "I've been there when Marketing is asking Dev to change some HTML. Marketing is frustrated that their little HTML change request has to go through the normal product pipeline - get prioritized, who knows when it's going to get launched - and Dev is frustrated, they're like, 'Are you serious? I want to be coding cool algorithms, I don't want to be changing HTML. That's not even coding'."

But with today's tools, like modern CMS systems, "now, all of a sudden, Marketing can make those changes. Everyone is happy."

He also mentioned the trend towards increasing integration across tools and services. "Most people think about integration right out of the gate," he said. "You can integrate a lot of these tools to help you optimize your product easily."

Finally, he said he's excited about the data that you can get out of the tools. Product debates no longer have to be so subjective. In the past it could come down to people's opinions about a feature. "Someone would win and that's what you would launch. Now you can actually get data with A/B testing. That's also raising the bar." He concluded by saying, "if you can get answers, instead of having to speculate, then the products are going to get better."


Thank you, Dan, for generously sharing your knowledge and expertise. You are a Champion!

Interested in hearing more of what Dan has to say? Follow him on Twitter, LinkedIn, or check out Olsen Solutions. You can also see many of his presentations posted on SlideShare. Readers in the San Francisco Bay Area can join Dan's new Lean Product & Lean UX Meetup group, where he will be speaking on March 18th.

Are you a Champion who wants to be featured on our Balsamiq Champions blog? Send an email to champions@balsamiq.com with your stories or blog posts!

Jon Matthews on Using Mockups to Clarify Your Ideas

Jon MatthewsOur latest Champion, Jon Matthews, recently tweeted about how well Balsamiq Mockups works for drawing decision trees, like the one below. He has used it for a long time to help him design his products as well. He told me, "Mockups is just one of those tools I go to again and again. It's amply paid for itself when I've done actual mockups, stuff like [using it for decision trees] is all a bonus."

He continued, "I really like the look of how they came out, and it was much easier to use for this stuff than the other software I've got that could do something similar. Snap to grid that actually works is not to be underestimated :)"

brokenLinkTree
A decision tree on how to fix broken links

His most recent use of Mockups for UI design was for CloudTrawl, where ease of use was targeted as a key differentiator. Rather than using it as a tool for communicating his ideas to others, he relied on it primarily to help him clarify his own ideas and get right to the good ones when it was time to start coding.

Q&A with Jon Matthews

Who are you and what do you do?

I'm Jon Matthews, I run Deep Cognition Ltd, a one person software company specializing in tools for web developers. Our mission statement is "Saving the web, one site at a time" which pretty much covers it. We do website monitoring and checking tools.

Our first product is DeepTrawl, a desktop app which checks sites for common errors like broken links, spelling mistakes, invalid html & css plus a lot more. We've recently added a unique new on site SEO feature, which modestly, I think is awesome. :)

We also have a premium website monitoring service called CloudTrawl. This monitors uptime, sends alerts for downtime and schedules checks for broken links & images.

LinkCheckReport
An early mockup for CloudTrawl

What trends do you see in your role or industry?

There's a big trend towards SaaS. I don't make a generalised value judgement on this. The split should ideally be "horses for courses." I see a lot of businesses making the mistake of trying to make a pay monthly cloud service out of something which a user does irregularly. To me this makes no sense. On the other hand when something is used regularly, and especially when it's used from a lot of different machines, SaaS through the browsers is a natural fit & those who do it well deserve the (sometimes large) rewards they get. I can't live without DropBox now, I never begrudge those guys their monthly payment.

A lot has been made recently about the commoditization of software, i.e. app stores pushing down prices and encouraging the lowest common denominator. While that does seem to be having an effect in consumer software, it's less worrying in B2B where I think people tend to think more in terms of ROI.

What sets you apart from other people/companies that do what you do?

As a very small company, service and support are something that's much easier to do really well. With a larger company it's unlikely one of the developers of the software will spend hours trying to work through a difficult problem with an individual customer. This is something that not only can small developers do, but they should have it as a top priority. Everyone benefits.

My attitude is: come to us for the link checking, buy from us because of the other stuff it does.

Technically, I've always tried to move the products less towards being single purpose and more towards being as broad as possible within the remit of the company. In the case of DeepTrawl, there are a hundred link checkers out there, but none that do the range of other stuff it does. Sometimes our customers don't know they need the other stuff until they see it working. So my attitude is: come to us for the link checking, buy from us because of the other stuff it does.

What's challenging about your job and how do you deal with it?

Probably the sheer amount of hats I have to wear. It's very easy to get dragged off into writing code where things are safe and predictable when in reality I should be concentrating on marketing. I also find it hard to do anything else when I know a tricky support question is hanging over my head. Every now and again something comes up that means I'm distracted thinking about an issue when I should be paying attention to my wife / family / friends. Luckily my wife is very understanding :)

What other tools do you use for your job?

For code I love Eclipse and the EJ Technologies tools (Install4J / JProfiler). Actually JProfiler is awesome. In the early days (between DeepTrawl v1 and v2) it allowed me to speed up some operations literally by hundreds of times.

I'm also using Google Drive more and more. Everything else goes into DropBox, which is indispensable but Drive allows me to do some things much more easily. For simple word processing and spreadsheets, Drive is now my go-to-tool.

What do you like most about what you do?

Freedom to do things properly without office politics. The business is also still at a stage when each sale or signup that comes in makes me smile. There's no better feeling than seeing someone liked my stuff enough to click the buy button.

Why do you use Balsamiq Mockups?

I never have a need to share my designs with others, they simply help me to clarify my own thoughts

I used to struggle a lot with writing code for screens, then never being able to make them function like they did in my head. Essentially this was because what was in my head just wasn't practical & thought through correctly. I don't know how common this is with Balsamiq's customers, but I never have a need to share my designs with others, they simply help me to clarify my own thoughts and stop me writing code that needs to be thrown away later.

It's also becoming my favourite tool for general diagramming. For example, in this article I used Mockups for creating things like node arc diagrams and a decision tree. There's two reasons I chose Mockups for these tasks:

  1. It's a well implemented drawing tool. There's nothing more frustrating than snap to grid that doesn't work quite right, which I see in so many tools.
  2. I love the look of the output, the hand drawn style says to the reader that they're looking at something conceptual, kind of like a chalkboard at school.

Can you tell me about a specific project where Balsamiq Mockups was especially useful?

Yes. CloudTrawl came out a year ago so that design process is still pretty fresh. It helped a lot there. I took a look around our competition and found their usability really sucked, it just didn't make any sense. I usually push hard on usability but here it was an easy win.

I used to end up ripping up screens I'd implemented in code because in real life they didn't and couldn't work as I'd imagined.

I already had Mockups from an earlier project and it helped map out pretty much every inch of the webapp. It saved me an unquantifiable amount of time in implementation. So frequently in the past I used to end up ripping up screens I'd implemented in code because in real life they didn't and couldn't work as I'd imagined. Now I have Mockups that no longer happens. It's a fantastic time / frustration saver.

I still have a folder full of mockups from that time and when I look at them now the actual screens are functionally identical to what's in the mockup. Even the layouts are almost entirely the same. For me this is the power of the tool. It pushes design iteration from the code (which is a slow place to iterate & therefore expensive) to mockups (which is a very fast place to iterate).

LinkCheck
An early mockup for CloudTrawl

Thank you, Jon, for sharing your story and thoughts. You are a Champion!

Are you a Champion who wants to be featured on our Balsamiq Champions blog? Send an email to champions@balsamiq.com with your stories or blog posts!

Wayne Chen on Avoiding Common Mobile Product Mistakes

Wayne ChenOur latest Champion is Wayne Chen. He wrote an article recently that caught my eye called "Top 10 Mobile Product Management Mistakes And How To Avoid Them (Part 1)".

He introduces his article by saying that there's no magic formula for success in the mobile world, but "there are a few mistakes that almost certainly guarantee failure." To start, innovative products don't come from marketing and sales teams, he says. "Even smart customers don't necessarily know what they want...As an innovator, that's your job"

He continues:

"Top product managers often combine engineering and business backgrounds. When they see an unmet need, they can envision new and innovative possibilities. Meanwhile, product marketing should communicate what the product does to the target market, and support sales with the tools to sell effectively."

On the other hand, Wayne's advises product teams against "innovation for innovation's sake." We've all seen products with plenty of sizzle and good execution that failed in the marketplace because they didn't solve a real problem or meet a need better than what people were already using. He warns that "Passion when not directed properly becomes a pitfall" and says that "innovation needs to happen in the context of a vision and printed strategy."

Similarly, many products are doomed from the start because they try to do too much ("boiling the ocean" in Wayne's words). He suggests a lean approach by keeping the scope small, wireframing at a low fidelity, and starting with one platform or version before expanding to others.

Another common problem he mentions - and one that can't be repeated enough, in my opinion - is to avoid saying yes to every customer request. Granting that this is much harder than it sounds and that it can often lead to customer frustration, he says "Listening to customer pain points and seeking to understand what drives their behavior will go a long way to alleviate those situations and find a solution that doesn’t compromise you but still keeps them happy." He also suggests addressing rejected customer requests directly by explaining why you aren't adding the feature, or at least why you're not doing it right away.

From a process perspective, Wayne provides some ideas for keeping things moving and staying on track. His recommendations:

  • Start with a fixed timeline and stick to it
  • Make resource and task assignments clear
  • Agree on a common format for documents and assign one person to incorporate the final changes
  • Have a daily scrum meeting
  • Over-communicate when time is short

To see all of what Wayne has to say, read his article here.

I've seen many of the mistakes Wayne mentioned in my previous positions, so I truly enjoyed reading his strategies for preventing them. I reached out to Wayne, who happens to be a big fan of Balsamiq Mockups, to learn more about the experiences that have taught him these lessons.

Q&A with Wayne Chen

What do you do and how do you differentiate yourself?

I run Pocket Square Media, a mobile product and digital consulting practice. I split half my time turning napkin ideas into pilot or commercial-ready products for small and Fortune companies.

On the other end, I help treat struggling apps with new product, user experience, and marketing strategies. Many mobile companies and software shops practice the software development lifecycle, but often forget or fail to incorporate a strong marketing strategy to win and engage customers. I evaluate, design and guide clients through user acquisition and engagement, which is critical to their overall mobile success.

What trends do you see in your role or industry?

Mobile app marketing is becoming a high priority for many companies, product managers, and developers. Getting downloads used to be easy but those days have faded. To be competitive in a red ocean, managers must have a clear product and marketing strategy that meet app discovery, engagement, and loyalty standards of their target audience.

What tips do you have for someone looking to succeed in your role or industry?

Be willing to listen. Many of us think that our idea, design, and app are perfect. Reacting well to constructive criticism can therefore be tough if not welcomed. While becoming defensive is easy, it is important to take a step back and see if there is a grain of truth in the opinions of others. Obviously, not everyone gives good advice, but some feedback can add value and insight to your product strategy. By actively soliciting feedback, you also show humility, which is a greatly underrated quality.

What's challenging about your job and how do you deal with it?

The top two challenges that I have learned from my agency and start-ups include the stakeholder buy‐in and staying focused on value-driven activities. I believe these are fairly common and here is how I deal with them:

  1. Customer / Stakeholder buy-in: Getting stakeholders’ buy‐in for your product is nearly impossible if they don’t see what’s in it for them. Overcome this challenge by understanding their pain points and craft your initiative to benefit theirs. Then communicate this information clearly and consistently. Remember, your success isn’t just about the product launch or numbers, but about the people who back your endeavor and how you treat them throughout the process.
  2. Value-Driven Activities: Collaborative teams can spend a great deal of time brainstorming in meetings, but they are counter productive if no one acts on the action items. Challenges arise when the teams spin their wheels on technical or even design activities, which devour precious time from the overall delivery and cost. Try to move the team to the state of action and reflection by posing the following questions:
    • Does the activity directly meet the need of the current objective or goal?
    • Is there an alternative solution that will do the job?
    • Will it affect the end‐user if BLANK feature slated for another release?
    • Do we have the time, resource or budget to solve this now or later?

What other tools do you use for your job?

I have worked with many tools over the years, some are good, but there are a few that truly standout and make a difference in the overall product and project development cycle. In addition, many of these tools are free, inexpensive and/or time‐savers. Here are the tools that I have found most useful.

  • Basic Mockup & UX: Balsamiq, Omnigraffle and Paper Pad!
  • Testing & Management: TestFlight, UTest, and Jira
  • Mobile Advertising: mMedia, TapJoy, and JumpTap
  • Project Management: LiquidPlanner, OmniPlan, Google Drive, and BaseCamp
  • User Engagement: Social Networks and App Growth Engine by Hook Mobile.

What do you like most about what you do? / What inspires you?

I love solving problems, especially if it involves working with talented individuals toward a shared vision or dream. One of the best things about working in mobile is that it allows me to apply my creative ideas and structure to improve the lives of people and organizations. Many people working in start‐ups probably share that passion: we all want to make a difference, such as volunteering at a veteran’s hospital and helping them transition from the military to the civilian world.

Why do you use Balsamiq Mockups?

Whenever Balsamiq is not used, clients waste tens if not hundreds of hours of work by going over little details before agreeing to the final work flow and then coming back to change it.

I've used Balsamiq Mockups regularly since early 2009. It is a rock solid product and saves my team time, which is critical in getting the work done in the world of mobile. Today, I use it primarily for mockups and workflows, which many designers and customers struggled with conventional design tools and iterations. As consumers and owners, we expect to see everything in pixel perfect layouts. Unfortunately, this creates bottlenecks in project delivery and stakeholder buy‐in.

Whenever Balsamiq is not used, clients waste tens if not hundreds of hours of work by going over little details before agreeing to the final work flow and then coming back to change it.

The product shines when it comes to agile development and communication, it cuts down time and forces the customer and developer, product and design team to look and feel the app purely from the user experience perspective. Most end-users will care more about your app experience than about the background’s hue.

Anyone who knows how to use PowerPoint can be a Balsamiq Rock Star in minutes.

Balsamiq is also great for those who are not Photoshop or Illustrator experts; anyone who knows how to use PowerPoint can be a Balsamiq Rock Star in minutes. In fact, I actually make it an effort to get non-technical or design stakeholders to experience the creation of a simple wireframe in five minutes via WebEx or in person.

Overall, it is a super useful tool for anyone who wants to envision the final product. In my start up days, I have seen angels and investors pitched solely on their Balsamiq designs. Can't disclose who but they are doing well. ;‐)

Can you tell me about a specific project where Balsamiq Mockups was especially useful?

I was already knee‐deep in three mobile projects when we won another project for a well‐known Fortune firm asking an aggressive schedule. I could not afford to lose the client; mobile engineers suggested Balsamiq. I checked out the product and was quickly amazed at the rapid UI wireframe features and how easy it was to use for web and mobile.

After the project ended, I conducted a project review and noted that Balsamiq reduced our overall design efforts by 60 percent, which I was very happy about on the project profitability end. The client was equally thrilled when they saw how good the app wireframe without spending weeks perfecting the wireframe and graphic design when using mainstream design tools. In fact, the VP of Engineering loved the tool and mandated all internal designers and product managers to use it moving forward.

Thank you, Wayne, for sharing your insights and recommendations. You are a Champion!

Interested in hearing more of what Wayne has to say? Follow him on Twitter @WayneChenNY or @MobiWayne, or on his website pocketsquaremedia.co.

Are you a Champion who wants to be featured on our Balsamiq Champions blog? Send an email to champions@balsamiq.com with your stories or blog posts!

Glenn Murray on Using Mockups for Copywriting

· Posted by Leon in Articles and tagged , , · 6 Comments

Glenn MurrayOur latest Champion, Glenn Murray, is not a prototypical Mockups user. He's a copywriter (although perhaps not a typical copywriter either). He recently wrote an article that opened my eyes both to the world of copywriting and to uses of Mockups that I wasn't aware of. So, why would someone who writes words for a living use a visual user interface tool like Balsamiq Mockups?

He answers that question on his blog in an article called "What's a copy deck? And how important is it for a copywriter?", an amusing critique of traditional copywriting. In it, he describes the standard copywriter's deliverable, the copy deck, which he has never used. He explains why he has broken the mold by creating his deliverables using Balsamiq Mockups, which helps him write better copy and pleases his clients more than showing them his text in isolation.

As a UX designer, I can relate to Glenn's use of Mockups. Reading about the conventional copy deck reminds me of the user interface specification documents I used to read (and write, pre-Mockups) – rigid and lifeless. Using Mockups for writing, as well as UI design, not only makes the author's/designer's ideas clearer, but also brings them to life.

Coincidentally, we recently redesigned our homepage and also used Mockups to hone the copy because we wanted to see it in the context of the page as a whole. Reading Glenn's article, I learned that this approach isn't unique to us.

Q&A with Glenn Murray

What is your title or job description?

I’m a website copywriter. I write mostly high level stuff – Home, About Us, Products, Services, etc. My company is Divine Write.

What trends do you see in your role or industry?

Definitely the biggest trend right at the moment is towards SEO copywriting and high volume ghost-blogging. But I think that’ll be relatively short-lived. As a title or label, anyway. It’ll evolve naturally back to simply writing high quality content. Google’s getting way too smart to be gamed by simplistic tactics. What I think will be a much bigger and longer-lasting trend is the overlap of web copywriting into user interaction design and information architecture.

Web copywriters – good ones anyway – tell a story about a business. About its products and services. Not necessarily a ‘once-upon-a-time’ sort of story (although those can definitely work). More a ‘this-is-what-we-can-do-for-you’ sort of story.

Now in most cases, the web copywriter is the main story-teller. The designer plays a big part too, of course, but it’s usually a supporting part. I don’t mean their work is less important by any stretch. I simply mean the story is usually extremely complex, and the design can only tell part of it.

This means the copywriter will usually have a better grasp on the finer points of that story. And on the audience, and their needs. They know what will effectively fulfil the reader’s needs, meet their expectations, educate them, motivate them and compel them to act.

And as websites are becoming more and more important and sophisticated, and readers are expecting more of them, the finer points of the story are starting to become the real differentiators. The websites that incorporate those finer points into their interaction design and information architecture are the ones that stand out from the crowd.

In other words, the sites that tell the same story across the board are the ones that convert better. Calls to action, menus, site structure, page segmentation, image content, buttons... All of these elements – and their relative prominence – need to tell exactly the same story as the copy.

So it makes sense that they have the same story-teller.

NOTE: Obviously there are big companies out there that engage dedicated user interaction designers and information architects. But they’re few and far between. The vast majority of websites are for SMBs, who are lucky to have a web designer and copywriter on-board. They’ve never heard of – and don’t have the budget for – user interaction designers and information architects. So it’s all down to the website copywriter.

Why do you use Balsamiq Mockups?

About 5 years ago, I started adding rudimentary buttons, text callouts, menus, visual calls to action, and so on, to my copy deck. It wasn’t long, though, before I discovered that as a wireframing tool, Microsoft Word makes a great word processor. I was spending way too long moving and formatting boxes, so I started looking for alternatives. That’s when I discovered Balsamiq. Now I use it for almost all my home page copy, and quite a bit of sub-page copy too. And my clients love it! In fact, I’ve won clients because of it.

I’ve spoken to a lot of other copywriters who are experiencing the same frustrations I was when trying to write only the ‘pure’ copy. When I introduced the Balsamiq idea to them, they instantly went for it. It’s like they were already at a tipping point. And although I like to tell my wife I’m the smartest copywriter in the world, I’m sure there are others out there who’ve come to the same conclusion without any help from me!

I chose Balsamiq because it’s easy and intuitive to use, fast, reasonably priced and does exactly what I need, without any unnecessary bells and whistles to complicate things.

What tips do you have for people who do what you do?

As a minimum, use Balsamiq when writing your home page copy. Ideally, use it to write other pages too, and link them together in interactive PDFs for client review. Like this:

What sets you apart from other people/companies that do what you do?

I take the time to do it right. Partly because I’m a perfectionist, partly because I’m really good at it, and partly because I have a good reputation and a great search ranking, so I have the luxury of passing on the low-budget jobs. Plus I think of myself as a businessman, not just a copywriter. I think like my clients do, so I can put myself in their shoes. I’ve also spent a lot of time consciously putting myself in the reader’s position; I was a technical writer in the software industry for 9 years, before I started Divine Write. And technical writing’s all about identifying and bridging knowledge gaps.

What's challenging about your job and how do you deal with it?

The single biggest challenge is finding enough time to write and to market my business. I’m still a sole operator, so I have to do everything. When I get busy, I have no time to focus on my SEO. When my ranking slides, things get quieter, and I have to invest time in my SEO again. Then I get busy, and we’re back to square one. The other major challenge is educating clients about the value of what I do. Most people think copywriters simply string together pretty sentences. Nothing could be further from the truth. In fact, on many jobs, the actual writing component is a small part of the job. This difficulty has only increased as I’ve moved more and more into interaction design and information architecture. If I mention those terms to my clients, I may as well be speaking Latin!

What do you like most about what you do?

Creating new stuff out of nothing. An awesome new website or mobile app out of thin air. I also love the business side of things, and being (virtually) surrounded by amazing, intelligent, inspiring people. And, of course, I love being able to work from home, spend more time with my wife, and watch my children grow up.

What has Mockups allowed you to do for your customers or teammates that you were not able to do before?

As discussed above, it’s allowed me to do more than just write the ‘pure’ copy. I can now have a hand in all the other important parts of the story. Plus I can now give clients a much better insight into how the copy will be presented, and how it will integrate with the other elements on the page.


An example of Glenn's "WYSIWYG" approach to copywriting (click to enlarge)

What has been your experience showing your mockups to other people, for instance team members or clients?

They love it. Without exception. I’ve even won jobs because of it. My clients see examples of wireframes on my site, and it just clicks with them. A few agency-type copywriters have raised questions about whether presenting copy in this format is the right way to go. But most web copywriters work in a very different environment from an agency. So, while I respect their viewpoint, I definitely disagree.

What do you do for fun outside of work?

When I’m not doing the family thing, I create stuff. Like www.propertyblurbs.com and www.carblurbs.com. They’re websites that automatically write sales copy. I also love reading, movies, music, I run whenever I get the chance, and I like pina-coladas, and getting caught in the rain.

What inspires you?

  • My wife (I wish I had her patience).
  • My kids (I wish I had their free thinking).
  • Amazing peers and colleagues who are super intelligent and just go for it (like Noam Chomsky, Luke Wroblewski, Bill Slawski, Fred Schebesta and my business partner, Ian Butler).
  • Amazing products that solve everyday problems in elegant ways (like Evernote, Remember The Milk and my Kindle).
  • Everyday problems (that I can’t help but try to solve myself).

Do you have any feature ideas or suggestions for how we can improve our product(s)?

  • I’d LOVE to be able to create HTML versions of my wireframes.
  • I’d love to be able to save things as templates. E.g. Save a combination of objects (a container, a button, and a paragraph of text) as a template, insert that templates on other pages, change the original, the change propagates across the other pages too. [Editor's note: We do offer this, it's our Symbols feature]
  • A better way of creating drop-down menus. At the moment, I simply create a duplicate of the page and add the drop down to the duplicate, then link to the duplicate page from the top level menu item on the original page. See my screencast above to see this in practice.

Thank you, Glenn, for sharing your process and helping us better understand the work you do. You are a Champion!

Are you a Champion who wants to be featured on our Balsamiq Champions blog? Send an email to champions@balsamiq.com with your stories or blog posts!

Yarone Goren on Validating Product Ideas with Mockups

· Posted by Leon in Interviews and tagged , · 1 Comment

Yarone GorenYarone Goren (LinkedIn profile) is the founder and CEO of Iteration Group, a product firm that relies heavily on Balsamiq Mockups for its projects. Yarone told me that of the 10 or so employees "we have about 5 people at the company who use Balsamiq Mockups at least 3-4 hours a day."

I spoke to him to learn more about the way he works and how he helps startups and other companies create products that are successful in the marketplace.

He described his company this way:

We are a boutique product development firm. There's a lot of dev shops out there, and a lot of designers and agencies, but not a lot of people focused on product UI/UX. That's all we do. We help customers nail their product vision.

We do work for startups (partnering shoulder-to-shoulder with the founders) and also established businesses who are looking for startup folks like us to help them innovate (build new products or re-imagine existing products).

Yarone gave me a typical scenario when a potential customer comes to him with an idea:

You're 45 years old, been in business for a while, made a little money, you have this idea that you've had for a year... and you want to get it built. I think the lay person doesn't know what ought to happen next. They say 'I've got this idea, I want to build it'. So they go finding a developer, or if they're enlightened, they're looking for a designer. And so, somehow I meet them, through my network. They say 'Oh, you've got an idea, go to talk to Yarone'.

Let's make sure we build something people actually want.

So they come to me... [And I say] let's spend some time right now to figure out if people care about what you're talking about [before building it]. Let's make sure we build something people actually want. I convince them to buy in to this idea.

We do research to understand the space. We meet with users or target users, do competitive analysis, etc. We nail the product vision. Then we start wireframing, The core UX, 4-5 screens. Once we've done a few rounds of that, we start filling out the user experience.

Here is a video from a series by Docstoc of Yarone describing why they encourage customers to go through this process before starting to build anything.


Read more about this video on the Iteration Group blog

Just like Michael Bourque, Yarone believes strongly in wireframing the complete application before a single line of code is written.

We would rather spend a ton of time up front wireframing than in development.

We would rather spend a ton of time up front wireframing than in development. Development is hard, it's costly [in terms of time], it's expensive. You should never build something until you have a really good feeling that it's something that people actually want. For us, wireframing makes all the sense in the world.

We do mockups of every screen. We're militant about it, every permutation of every screen. Then we meet with a visual designer and make it look good, slice it up for CSS, etc. Balsamiq is 90% of what we do.

In this video Yarone talks in more detail about his design process.


Read more about this video on the Iteration Group blog

I then asked Yarone why he uses Balsamiq Mockups.

Balsamiq for me changed everything. Finally there was a product that gave me what I wanted.

I used pencil and paper for probably 10 years. I used Visio for the longest time. I used Powerpoint. All of them had their problems. With pencil and paper, I used to cut out screens and use a copy machine to tile them on top of one another. [With Visio] once you start putzing around with alignment, colors, icons, images, it looks too real, so it was a problem.

Balsamiq for me changed everything. Finally there was a product that gave me what I wanted. I hit myself, thinking 'why didn't I come up with this years ago'.

Balsamiq is low fidelity enough that no one's going to assume that it's final work. But it's clean enough that it's presentable and respected. Balsamiq has been the backbone of our business, it's been great.

He also mentioned some things he'd like to see in the product that aren't there now.

The number one issue is definitely controls. [Mockups] really doesn't have support for [modern mobile] interfaces and interactions. [The Google mobile app] bounces, shows tiles, it flips, you can swipe to remove. I don't know how to express that [in Mockups].

We're starting to do more user testing.

That's one opportunity, more controls, more types of buttons. It may hurt the product, it may benefit the product, I don't know. I'm complaining that I don't have enough controls with Balsamiq, but, on the other hand, I don't want it to go too far.

What I'd like to see more of, aside from controls, we're starting to do more user testing, it would be great if you could improve your tools for taking mockups and turning them into something testable.

Thanks, Yarone, for opening up and talking about your process and workflow. You are a Champion! If you enjoyed Yarone's videos, you can view the other two in the series on his blog (part 3 here, part 4 here).

Are you a Champion who wants to be featured on our Balsamiq Champions blog? Send an email to champions@balsamiq.com with your stories or blog posts!

JR Harrell on the State of Design in 2013

· Posted by Leon in Interviews and tagged , , , , , · 1 Comment

JR HarrellJR Harrell is a Denver‐based UI/UX designer. He regularly uses Balsamiq Mockups in his design workflow. He contacted us by email and wrote:

As a UI/UX designer, I have used Balsamiq as my wireframing tool for a couple of years and am amazed over and over again at how flexible it is! Trends come and go, but Balsamiq is here to stay in my box of design tools.

Lately he has been using Balsamiq Mockups to create "flat"-style wireframes. Here are some examples:

Sign up page
Samples from JR's dribbble site (click to enlarge)

JR's website is drawnn.com. I interviewed him recently to learn about his process and the secrets of his success, and to get his perspective on the state of digital design in 2013.

Q&A with JR Harrell

What is your title or job description?

UI/UX Web & App Designer

What industry do you work with?

It varies quite a bit. I have worked with startups at Y Combinator, techstars, Startup Chile and other ambitious startups as well as medium to large sized organizations that have been featured on TechCrunch, Mashable, ABC, FOX, NBC, USA Today and more.

What interesting trends do you see in your role or industry?

Undeniably, the world is moving towards 'mobile first' design as Luke Wroblewski so famously said. Depending on their needs, I am suggesting to more and more clients that we start our Balsamiq wireframe workflow with a mobile-centric mentality.

Interestingly enough, starting our UI within mobile screen sized constraints actually yields better website results. I believe the reason why (as Luke also argues) is that this forces you to make important (and often tough) design decisions up front regarding what you can do away with and what you must keep.

Also, flat design is a huge trend. I will talk more about that later. [Editor's note: JR's thoughts on flat design are featured on here our UX blog.]

Almost everyone is asking for responsive design even if they don't know exactly what it's called.

As far as trends go, responsive design has to be right up there with flat design. Almost everyone is asking for responsive design even if they don't know exactly what it's called. Clients often articulate it to me something like this: 'the website design needs to automatically change its shape and content based on which device my users are on or which way that they turn the device.'

My favorite responsive design platform by far is Twitter Bootstrap. It's fast, fluid and fun. Beautiful apps and websites can be built with it versus traditional approaches. I can only hope that amazing apps like Jetstrap will eventually offer a Balsamiq Mockups extension whereby users can import their .bmml files to create turnkey Twitter bootstrap CSS & HTML. I would love that. I would go crazy over that. Responsive design makes me want to delve deeper into front end development. Maybe I will.

Also, regarding shifts in what clients are asking for, as of two weeks ago, I started getting new and existing clients asking me to take existing designs and make them into a flat design. I am even redesigning my own iPad app called Showboat (which hit #23 in just 2 days in the App Store) into a flat style design.

What suggestions do you have for someone looking to succeed in your role or industry?

First things first: it's all about audience. If you don't have access to or if you don't build an audience, you simply won't have the kind of leads that you want and you simply won't thrive.

If you don't have quality leads you can't even begin to think about all the other things that come after that.

If you don't have quality leads, and an ample amount of them, you can't even begin to think about all the other things that come after that like optimizing your design workflow, setting up efficient invoicing methodologies, focusing on customer satisfaction and so forth.

Let's talk about audience. There are three ways to gain access to an engaged client audience. One is to buy it. The second is to earn it. The third is a combination of the initial two. You must have all three in order to be successful.

Sortfolio is, in my experience, the best way to buy access to a captive web and app design customer audience. The quality and quantity of the click through traffic and leads are excellent. The site is laid out nicely so that it's sticky. It has lots of credibility with customers all around. It offers the best bang for your buck when you are looking to buy access to a client audience in this industry.

Secondly, you can earn an audience through portfolio sites like Behance. If you can score a coveted dribbble invite, it can serve as a magic carpet ride towards building an audience as a designer if you work diligently at it. Also, I can't emphasize enough the importance of a well diversified, well managed and well earned social media presence. It probably goes without saying, but, I would also classify repeat business and referrals as part of your earned audience too.

Lastly, you should be constantly improving on your wireframes and designs that you post on all of these sites or you just won't earn the leads that you truly want from the first two audience channels.

Work on all three audience approaches every day if you can. Then gather metrics on it and repeat the process until you are booked solid with good work and stay that way consistently.

What sets you apart from other people that do what you do?

Hopefully, my portfolio work first and foremost. I want it to be able to stand on its own and serve as that bridge to me for my audience.

Regarding my portfolio, people tell me that they love seeing my before and after wireframe to Photoshop designs the most. My before and after Balsamiq wireframe drawings are designed to put a handle on concepts that are otherwise quite difficult to grasp. They give folks something solid to grab onto.

Balsamiq wireframePhotoshop compBalsamiq wireframes to Photoshop (click to enlarge)

Balsamiq wireframes and the experiences that I can depict with them to potential clients are a huge part of what attracts the audience, builds the bridge and then generates leads for me.

After that, what sets me apart is my self developed engagement and design workflow that I have spent five years refining. It's streamlined, comfortable and just simply works. I take the same workflow approach every time and then tailor it to the project's specific needs. This approach has been well received across many disciplines, cultures and organizations of varying shapes and sizes around the world. This approach allows customers to bolt me right onto their existing organization with ease.

I typically start delivering work for folks within one or two business days after our initial contact. Most of the time, the initial work involves Balsamiq Mockups wireframes of some sort.

Why do you use Balsamiq Mockups?

I use Balsamiq Mockups for three reasons: it's accessible, flexible and extensible.

As I mentioned before, Balsamiq wireframes are very accessible and easy to understand. They give my potential clients something that they can grab onto and bring to me in one way or another to help build a bridge when we first talk.

For my existing clients, it provides a consistent approach for me to quickly take their verbal and written ideas and turn them into wireframes, user interfaces and user experiences in a way that they are very comfortable with and understand.

Balsamiq Mockups is very flexible because I use it in so many ways to visually convey so many things. It's an all in one tool that I can use over and over again to draw sitemaps, wireframes, workflows, you name it. That's incredibly valuable to me.

Lastly, Balsamiq Mockups is extensible. I use the Mockups output for video walkthroughs, user acceptance testing and for many other use cases.

A video walkthrough using Balsamiq Mockups

Which Balsamiq product(s) do you use (Mockups for Desktop, myBalsamiq, etc.)?

I use Balsamiq Mockups for Desktop on my dual screen iMac and Thunderbolt display setup.

What other tools do you use for your job?

I skin my Balsamiq Mockups drawings in Photoshop. I also use Illustrator quite a bit. I collaborate on Balsamiq wireframes with my clients using Basecamp, Skype and iPhone. I have an entire box of tools that I use side by side with Balsamiq and Photoshop. The tools that I use daily are Slicy, ColorSchemer, LittleSnapper, Screenflow, Candybar, Preview, Photobulk, Fontcase, Analog and, most recently, Coda.

What is your favorite Mockups feature?

The humble geometric shape tool is my most used Mockups feature nowadays.

With flat design becoming ever more popular, the humble geometric shape tool is my most used Mockups feature nowadays. It allows me to create mockups that are an unbelievable facsimile of what a final flat design will look like. I have even begun to post my flat design wireframes as standalone portfolio pieces thanks to this feature and the flexibility of Balsamiq.

What has Mockups allowed you to do for your customers that you were not able to do before?

Mockups has allowed me to be able to quickly and consistently transform even the faintest of notions into tangible frameworks that are designed with all of the respective project stakeholders in mind.

These stakeholders can be developers, marketers, sales people or even C Level people. Each stakeholder has specific goals in mind. Mockups empowers us to all literally get on the same page and meet the project goals.

I have gone around the wheel with a number of mockup tools, but none of them hit the sweet spot for me or my clients the way that Balsamiq Mockups does. It allows us to get to a meaningful, honest 'yes' sooner than later.

What has been your best experience using it?

My best experience has been designing a mobile first app called TrainingAlone for Sue Aquila. Sue is a world class Ironman competitor, Triathlete, USAT Certified Coach, USA Cycling Coach, and successful restaurant chain entrepreneur.

She wanted to develop a web based app that would help prevent tragedies like the well known Aron Ralston story that was depicted in the movie "127 Hours" featuring James Franco.

The app runs on the Ruby on Rails platform and has an incredibly robust, smooth and intuitive Twillio SMS integration.

Designing the experience and interface for that app was my best Balsamiq Mockups project yet not only because of how great it is to work with Sue, but because I believe that it will help so many people in so many ways to prevent tragic, unnecessary outdoor training accidents.

What has been your experience showing your mockups to other people, for instance team members or clients?

As mentioned earlier, Balsamiq mockups are often my best sales tool.

Balsamiq wireframes do a lot of the talking for me before I ever even speak with a potential client. They help frame the initial discussion.

Balsamiq wireframes do a lot of the talking for me. They help frame the initial discussion.

When most folks contact me, you can literally hear the relief in their voice that they have found not only the right person for the job, but also the right tool for the job through Balsamiq. Once we get into the project, I often get feedback like "amazing, splendid, just what I was hoping for, it's spot on,'" and so forth regarding the Mockups. It feels so great to hear that.

Do you have any Mockups tips or tricks that you'd like to share?

I create a huge workspace from the start so that I can give my ideas plenty of room to run. I typically add a geometric shape, select the square shape and then size it to 4000px X 4000px. That way I have lots of space to design with.

Do you have any feature ideas or suggestions for how we can improve our product(s)?

It would be amazing to be able to group drawing sets from my 4000x4000 screens into individual PNG outputs with preset pixel space sizes.

Example: Highlight drawing bits > group as an export set > file > export all sets > Balsamiq exports 5 individual PNG files all optimized for 1024px x 600px in landscape and / or portrait.

Thank you, JR, for sharing your insights and opening up your design process! You are a Champion!

Are you a Champion who wants to be featured on our Balsamiq Champions blog? Send an email to champions@balsamiq.com with your stories or blog posts!


Next Page »