Jane Portman Cooks Up UI Breakfast

Jane PortmanJane Portman is the creator and author of UI Breakfast, a practical resource full of UX design and business lessons based on her extensive experience with both. It also contains an amazing column called UI Practicum where she tackles common UI problems in a useful and digestible way.

We're big fans of UI Breakfast at Balsamiq because of the clarity of Jane's writing and her love of wireframes. Jane describes her rationale for choosing wireframes over interactive prototypes in this Q&A post about translating an idea into an actual product.

As a developer, you’ll have a natural urge to skip wireframes and jump right into code (I used to be the same way as a designer, doing high-fidelity mockups right away). But wireframes create that 10,000 ft view to objectively revise your functionality.

This wireframe from one of her blog posts demonstrates her expert use of wireframes to convey all the right information.

It's a perfect balance of generic and specific. The use of breaklines and annotations conveys to the viewer what they do (and don't) need to know about in order to build it, without relying on color or interactivity.

Lots more goodies from Jane in our interview below.

Q&A with Jane Portman

What industry do you work in, and what is your title or job description?

I’m a UI/UX consultant who helps SaaS founders build focused, profitable products. My role is to identify critical design flaws in web applications — causing unreasonable churn or high support volumes — and help fix them. Previously a creative director at a large agency, I also enjoy doing visual design, but lately I’ve chosen to focus on most strategic, "expensive" problems in the UX domain.

What kinds of things are you excited about in your industry?

Now everyone understands the value of well-designed, quality software.

The state of things in the SaaS world is very exciting! As opposed to its early days, now everyone understands the value of well-designed, quality software — both the users (as a business tool) and the founders (as a source of income). The users have also matured enough to learn the basic UX patterns, which designers can now safely rely on.

It’s also amazing that flat design and minimalism are now a big trend. Ten years ago it was nearly impossible to sign off such designs with clients. Today, everybody is hyped about keeping things clean and simple — which I love!

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

The key is to approach design problems from the business standpoint. In addition to polishing your key UI/UX skills, you also need to teach yourself essentials from other relevant areas: entrepreneurship, product management, copywriting, and marketing. People ask me about that all the time, so I put together a special content guide which includes free (or very affordable) resources on each of these topics.

In addition to polishing your key UI/UX skills, you also need to teach yourself essentials from other relevant areas.

It’s also a great strategy to work on your own products: you’ll be able to polish all of the above skills in practice, diversify your income streams, and understand how exactly your clients feel while running their business. My own biggest success so far is my third book, The UI Audit (help yourself to a sample chapter here).

What are some common “rookie mistakes” that you see in UI design?

Overuse of dashboards is the curse of modern web apps!

Overuse of dashboards is the curse of modern web apps! They make an app seem cool, while being not necessary in most cases (unless you run a mission-critical service). Users want to dive into their work instead of observing bells and whistles. Imagine if Gmail showed you a fancy dashboard instead of your inbox?

For startups with limited resources, what’s the best return on investment in terms of improving UX?

For a bootstrapped startup, the best roadmap is the following:

  • Learn about some best UI/UX practices yourself: spend a week or two reading topical UX blogs and books. Product strategy is a big topic here, too.
  • Do plenty of user research on your own.
  • Inspect Behance and Dribbble to get an eyeful of modern visual trends.
  • Get a theme or a template. For that, hire a good designer who’ll help you pick a decent one and customize it for your needs.
  • If you’re willing to invest a bit more, ask a good UX consultant for recommendations.
  • Learn to handle everyday UX issues yourself by doing more self-study. UX Stack Exchange is a good free resource where you can ask for help.
  • If you have a whole team of developers but can’t afford in-house designers, it helps to train the developers on UI/UX essentials. That’s been my own hot topic lately, as I launched a dedicated training program for teams.

Why and how do you use Balsamiq Mockups?

Balsamiq is my primary tool for wireframing! I use it for wireframing sessions with clients, and also in educational blog posts. UI Practicum is my weekly article series where I solve challenging UX problems in web applications. Illustrations for these articles are made entirely with Balsamiq Mockups, like this article on scheduling.

I don’t rely on the interactive part too much, but I love the ability to create detailed, style-agnostic layouts. And I also dig the cute look of arrows and explanations!

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

Don’t have any critical ones. But I’ve been working on a wizard lately, and had to hack it together with great difficulty (see the wireframe below). It would be awesome if such component was pre-baked in Balsamiq.

Who do you look up to (or follow on social media) for inspiration?

My feed includes Paul Jarvis, Shawn Blanc, Joanna Wiebe, Brian Casel, Amy Hoy, Seth Godin, and a handful of “girly” lifestyle blogs about psychology, fashion, makeup, and interior design.

Among fellow UI/UX writers I can highly recommend Sarah Doody and Samuel Hulick.

How do you see UX changing? Do the principles stay the same while visual trends change, or are there fundamental aspects that evolve as well?

Global principles stay the same, but the library of common patterns evolves.

Global principles stay the same, but the library of common patterns evolves. Users learn fresh patterns as new software products appear in the mass market. The whole UX industry is maturing, while still being a hot subject.

Exciting times!


For more, head on over to UI Breakfast. Thanks, Jane, for all you do to help rid the world of bad software. You're 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!

    Scott Gallant on Adapting to Succeed

    scott and jordanNot long ago we received an email from Scott Gallant in response to our blog post about our new Hugo-powered documentation site. He said he was building a Content Management System (CMS) for websites running on Hugo and Jekyll, and asked us for some feedback.

    From the beginning of our project, one of our hesitations had been moving away from our existing CMS to a solution that required more technical know-how from the contributors, so the idea of using a CMS on top of our new platform was enticing.

    Since then we've been beta testing the product Scott has been building with his partner Jordan (both shown above) - Forestry.io - and have used it for some of our documentation updates. (Note: Forestry was recently accepted to the Techstars NYC 2016 accelerator program and will be available to the public very soon.)

    Scott happens to be a long-time Balsamiq user, so we asked him for some feedback on our product, as well as his thoughts on launching a new business. Read his answers below.

    Q&A with Scott Gallant

    What is forestry.io and what problem does it solve?

    Forestry.io is a CMS for Jekyll and Hugo sites. Upload your project and forestry.io will automatically build a CMS tailored to your site...no more mucking around with PHP :) When you or someone from your team edits content via your forestry.io CMS, your website gets re-compiled and published to your host (S3, Github, FTP, etc).

    Web developers know that static site generators improve their workflow by 10x.

    Web developers know that static site generators like Jekyll and Hugo improve their workflow by 10x. But until now, you had to fire up the command line in order to edit anything on your Jekyll or Hugo site. This meant that Dean from marketing had to ask the dev team every time he wanted to make a small content change to a website. With Forestry, you can use Jekyll or Hugo AND get a CMS for your team and/or clients. Want to keep everything under version control? Just connect forestry.io to your Github project and all content changes will be committed.

    If you're not familiar with Jekyll, Hugo, or static site generators, there's a great article on Smashing Magazine about them.

    Why did you decide to start this project? Do you have a particular expertise in this domain, or did it come out of frustration with existing solutions?

    My partner, Jordan, and I used to run a web design agency, a hosting company, and we even built a tool to manage multiple WordPress sites called WP Status (RIP). We became really frustrated with dealing with LAMP-based CMSs. Many sites got hacked, we had to spend a ton of time updating plugins and our sites were slow and bloated. Then we fell in love with static site generators but it was obvious to us that we needed a CMS to use these amazing tools for larger sites...so, we decided to build one :)

    What was your design process for forestry.io? How did you decide which features to include, and what existing sites or apps inspired the layout and workflow of it?

    We decided the biggest void in the market was around the CMS, not hosting.

    Great question! We started in a different direction; building a hosting platform on top of AWS for static sites. We posted our project to Hacker News and people were most excited about a small CMS "side-feature" that we offered (see traffic spike). We thought about it, and decided the biggest void in the market was around the CMS, not hosting. This was also what we were most excited to build so we "pivoted" and haven't looked back :)


    The traffic spike from Hacker News

    Our design process tends to go like this:

    • Dream up crazy ideas
    • Wireframe (Balsamiq to the rescue!)
    • Mockup design work (Photoshop)
    • Start coding
    • Show our work to users
    • Course correct
    • Show our work to users
    • Course correct
    • Show our work to users
    • Course correct
      ... see the trend?

    See the screenshots below for an example of the interface. We're using Brian Rinaldi's very cool demo site for these.

    The forestry.io UI

    We love software that turns the complex into something simple.

    We have many inspirations. We love user-friendly software that's intuitive and elegantly designed. We love software that turns the complex into something simple. Big inspirations are: Dropbox, MailChimp, Github, Medium.com, and Stripe. These are all amazingly designed pieces of software.

    What tools do you use for your job?

    • Macbook Pros (I'm due for an upgrade)
    • Standing and sitting desks
    • Balsamiq, Photoshop, Sketch
    • Sublime Text
    • Github

    Tell me about your experience with Balsamiq Mockups. What have you used it for and what problem has it solved for you?

    We've used Balsamiq for virtually every software project. It helps us rapidly visualize our ideas without going too far down the design path. We used to use it a lot when we ran a web design agency too. This really helped our clients see what they were buying from us and it helped us lock down the scope without getting caught up in the aesthetic design.

    Some of the mockups for Forestry

    What's missing from our tool that you'd like to see added?

    I'm probably a "light" Balsamiq user and you guys seem to keep ahead of my needs with product improvements. But I'd like the ability to add just a single line of text, not a heading and not a full paragraph, but a single line of text (this may already exist). And more icons :)

    (Editor's note: We recently introduced the Line of Text control for this purpose. Regarding icons, our current version has the Font Awesome icon set with WAY more icons than before.)

    What kinds of things are you excited about right now?

    The future web is secure, fast and makes use of 3rd party tools.

    I'm super excited about the future of the static web. The days of the traditional LAMP stack are few. The future web is secure, fast and makes use of 3rd party tools. Need comments? Use disqus.com. Need a survey? Try Wufoo. Need to sell a product, use Stripe Checkout and AWS Lambda. And of course, forestry.io is the CMS that allows you to maintain all of this ;)

    Why the name "Forestry"???

    My partner, Jordan, and I used to drive 2 hours to meet our team every Monday at our old startup. We conceived of the idea on one of these drives and the conversation went like this:

    Jordan - "So what are we going to call this thing?"
    Scott - "I don't know, some cool .io name?"

    We passed an RV that had a "Caravan" logo on it

    Scott - "Like caravan.io"
    Jordan - "That's stupid"

    We passed another RV that had a "Forestry" logo on it

    Scott - "Or forestry.io"
    Jordan - "That's stupid too"

    I did a search that night, caravan.io was taken but forestry.io was available :)


    Thanks, Scott, for taking the time to share your story!

    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!

      Kate Toon Uses Balsamiq to Transform The Copywriting Process

      Kate ToonI recently returned from the Write the Docs 2016 conference in Portland, where people who write documentation, marketing copy, and more gather to talk about the state of all things documentation.

      As a designer and writer, I came back inspired. One of the themes of the conference was how content writing is gaining appreciation as a core piece of the customer experience. Many organizations no longer treat writing as separate from the other visual elements of the user experience (some have even merged it into their design team).

      Kate Toon is a web copywriter who embraces this philosophy with Balsamiq Mockups. It allows her clients to see her work in the context of the visual layout and design of their sites. This helps them understand the value of what she does and set expectations for how it will look and feel in the finished product.

      Q&A with Kate Toon

      What industry do you work in, and what is your title or job description?

      I’m a copywriter, information architect and SEO trainer.

      What kinds of things are you excited about in your industry?

      I enjoy helping clients to create easy to use websites that give their customers an enjoyable seamless web experience. I’m excited by beautiful design and clever, creative copy.

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

      It’s not just about good quality writing.

      As a copywriter, it’s important to understand that it’s not just about good quality writing. A copywriter, especially for the web, needs to be:

      • A great listener, so you can absorb the client’s tone of voice, and understand their goals
      • An awesome project manager, to ensure you guide your clients through the whole process easily and with zero stress
      • An SEO expert, to understand the impact that keyword research, readability and other tech issues can have on the client’s copy
      • A usability guru, understanding mobile-first design, microcopy, site structure, calls to action and so much more


      Kate uses Balsamiq Mockups to create a mix of wireframe elements, images, and annotations in one deliverable for her clients.

      Why and how do you use Balsamiq Mockups?

      Although I try to structure my copy deck in a way that it’s easy for people to work out what goes where, I’ve found that for many people, they just can’t picture how the words on the page will work on the website.

      So, especially when I’m writing Home page copy, I’ve started to use Balsamiq.

      My clients love it – it transforms the way they see the copywriting process.

      Balsamiq helps me lay out the copy and create wireframes for clients, showing how the copy will work on the page. I can highlight header copy, buttons and menus, outline the navigation and plan the footers and sidebars. My clients love it – it transforms the way they see the copywriting process.

      I find it makes life easier for the website designers and developers too.

      Balsamiq has an easy learning curve. I’m not a huge fan of watching tutorials, so was delighted by how easy it is to get started.

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

      I’d love your product to incorporate a sitemap function, so I don’t have to use separate software. (Editor's note: We do have this! Check out our documentation on working with site maps.)

      I’d also like to be able to save created elements as templates, and then use these templates on other pages. (Check out our Symbols feature, which is even easier in Balsamiq Mockups 3.)


      Thanks, Kate, for sharing your insights and process. You're 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!

        Danielle Tate: The "Elegant Entrepreneur"

        Danielle TateDanielle Tate is the author of "Elegant Entrepreneur: The Female Founders Guide to Starting & Growing Your First Company", which she wrote "to lower the barriers to entry and success for female founders."

        In it she teaches topics relevant to starting a company, such as:

        • Market research
        • Business planning
        • Funding
        • Building your team, and
        • "Timing your leap"

        She mentions Balsamiq Mockups in her list of tools that can "help women grow from idea to exit." One of the mentions is in a section on finding a technical cofounder that shows the depth of her experience and research. Some good advice here:

        "To pique a potential technical partner’s interest, differentiate yourself from the endless hollow pitches. Be sure to have a wireframe or other documented presentation, and the working vocabulary around the technology you need for your project."

        She also promotes Balsamiq Mockups to reinforce the mantra we often hear on this blog, that wireframing early saves a lot of time down the road when it comes to the testing and development phases.

        Her book comes at an interesting time for female founders. An article titled "What The Evolution Of Women's Roles In Stock Photos Says About Gender Equality" cites that Getty Images has seen a fourfold increase in searches for "woman entrepreneur" in the last year. Meanwhile, "only 4% percent of S&P Fortune 500 companies have female CEOs." Danielle's book is working to bridge that gap.

        We asked her some questions about her book and the story behind it.

        Note: Danielle has generously offered a free copy of her book to the first 5 commenters. So add your thoughts or experiences below!

        Q&A with Danielle Tate

        What industry do you work in, and what is your title or job description?

        I work in the wedding tech industry as the founder and CEO of MissNowMrs.com, an online name-change service for brides.

        What inspired you to write a book?

        As an accidental entrepreneur, I always looked for a book that would teach me the steps to building a business without assuming that I had an MBA. I also wanted a book that discussed the emotions and psychological barriers that happen in entrepreneurship to know if what I was experiencing was “normal.” I never found that book, so I wrote it. My mission with Elegant Entrepreneur is to lower the boundaries to entry and success for female founders.

        As an accidental entrepreneur, I always looked for a book that would teach me the steps to building a business without assuming that I had an MBA.

        What's in your book that's not covered in other books on starting a business?

        By demystifying entrepreneurship and providing a window into the lifestyle, I hope to get more women to startup and scale up!

        Elegant Entrepreneur is 1/3 my personal experiences as an entrepreneur, 1/3 research, and 1/3 insights and advice from 25+ prominent women entrepreneurs. My book covers the 12 business steps from idea to exit (which many other books do) and shares elegant insights from myself and others to make spanning those steps easier for the reader. I also wrote about “how it feels” to be living each step of the entrepreneurial journey. By demystifying entrepreneurship and providing a window into the lifestyle, I hope to get more women to startup and scale up!

        How has entrepreneurship changed in the last decade and what changes do you see ahead?

        I’ve seen a shift in the societal view of entrepreneurs and entrepreneurship. It is much more acceptable to launch a startup instead of following a more traditional career path. Television shows like Shark Tank and the Profit have peaked America’s curiosity about startups and entrepreneurs.

        There are more women entrepreneurs now than when I founded my company ten years ago. While we are still a small fraction of the entrepreneurial ecosystem, our numbers are growing and our ideas and companies are making a difference in the world. As more women entrepreneurs become investors, I hope we will see even more female-founded startups receiving funding to scale their businesses.

        Any person who intends to work for a company should learn the basic steps to starting and growing a business.

        The educational system is starting to “wake up” and shift colleges from centers of research to centers of innovation. I believe we will see more entrepreneurship curriculum within high schools and colleges in the future (and can’t wait for that to happen)! Any person who intends to work for a company should learn the basic steps to starting and growing a business, as it will help them better understand their role within the company.

        What has experience taught you that you think new entrepreneurs should know right off the bat?

        You need to have a good idea daily. Many new entrepreneurs are so wrapped up in the one big idea that launched their company that they forget how important new ideas are. Generating new ideas and implementing them is how a company grows, improves, and stays ahead of competition in an ever-changing market.

        What mistakes have you made along the way and how did you recover or learn from them?

        Invest in a good business lawyer from the beginning.

        One of my biggest mistakes as I started my company was not proactively protecting my intellectual property. We had several copycat companies mine our service for forms and coding processes. After numerous lawsuits we added stronger terms and conditions to our purchase process and also devised a security mechanism that shuts down accounts with suspicious activity. My advice to any entrepreneur is to invest in a good business lawyer from the beginning and write terms and conditions that include a no derivative works clause for users.

        Why and how do you use Balsamiq Mockups?

        Balsamiq is a must-have tool for any entrepreneur

        As a non-graphic designer, Balsamiq is a tool that allows me to communicate my ideas to my cofounders, designer, and team in a much more elegant fashion than the stick figures I used to scan and email to everyone (they’re tragic). Having something clean and concrete to work off of speeds our project collaborations. Balsamiq is a must-have tool for any entrepreneur, and I recommend it and purposefully included a Balsamiq draft of the MissNowMrs website in my book.

        One of Danielle's wireframes for the MissNowMrs website

        What (or who) inspires you?

        I am inspired by many people and things, but currently my son is my inspiration. He lives in a household where ideas become companies and mamas write books on entrepreneurship. I want to continue to make sure he lives in a world without traditional limits, and strive to set a good example.


        Thanks, Danielle, for writing the book you couldn't find. You're a Champion!

        Danielle has generously offered a free copy of her book to the first 5 commenters. So add your thoughts or experiences below!

        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!

          Ankit Bhangar: Wireframe Specialist

          Abigail RumseyWe were flattered to receive an email recently from Ankit Bhangar praising our little tool. Ankit is a UI/UX specialist currently working for inoltrotech.com. He is a long-time Mockups user and has used it for over 40 projects large and small in scope.

          Ankit meets our "Champion" criteria both because of his expertise in using our product and because, as he put it, he has "convinced a lot of my clients to use it as well." Word of mouth is our primary marketing tool, so we are proud that Ankit has felt compelled to recommend Balsamiq to others.

          It was also gratifying to hear Ankit talk about Balsamiq Mockups not just as a design tool, but also an ideation and communication tool, which is how we describe and use it internally.

          Here is Ankit's list of things that you can do with Balsamiq Mockups:

          1. Turn your imagination into visible form.
          2. Convince investors to fund your project.
          3. Explain to your designers/developers the “things” inside your head.
          4. Collaborate with colleagues and your development crew to create or update existing products
          5. Flowchart a system that you want to develop.

          He sent us some great examples of screens and flow diagrams that he has designed (shown below). We followed up with him to find out more about what he does and hear some of his first-hand stories.

          Q&A with Ankit Bhangar

          Who are you and what do you do?

          My name is Ankit Bhangar, and I am a wireframe UI/UX specialist.

          I have now been in the business of wireframing for 4+ years, working on both simple and complex applications. My role varies and often takes me in to the depths of the user experience.

          I love what I do, it's a fantastic job and also a career that allows me to earn a comfortable living as a virtual freelancer. I have worked for both small and large corporations assisting with UI/UX improvements and redesigns.

          We are developing a whole division for wireframing and prototyping.

          Currently I am with a team at inoltrotech.com which is a Branding, Marketing, and Web Development company. We are developing a whole division for wireframing and prototyping due to our belief that the UI/UX industry is becoming a key role in the IT field; particularly for small start ups and entrepreneurs who are bootstrapping their way to the top.

          UX-FlowMobile app flow (click to enlarge)

          What kinds of things are you excited about in your industry?

          Great programming needs to be complimented with simple design and flow.

          The depth of new concepts, but also the simplicity of applications. I am fortunate enough to be exposed to a number of brilliant projects, many of which I create rapid prototypes (wireframes) for. The UI/UX industry, I think, is finally receiving the credit it deserves. Great programming needs to be complimented with simple design and flow.

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

          Practice, and form good partnerships. Creating high level wireframes is a tough job, but it is rewarding. What is even more rewarding is continuing the journey with a team and watching things come to fruition. I work with a great team of freelancers who have come together to create inoltrotech.com so I am lucky.

          To practice I suggest downloading apps and reviewing websites and then wireframing them your way, trying to simplify the process, reduce steps, and minimise potential errors,

          To practice I suggest downloading apps and reviewing websites and then wireframing them your way, trying to simplify the process, reduce steps, and minimise potential errors, particularly in this mobile responsive age. This needs to be taken into consideration for a quality wireframe specialist - what will it look like on mobile.

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

          The most challenging part is understanding the exact requirements of a project, covering all use cases, and then depicting them using Balsamiq. A simple list page can have 7-8 variations based on the UI/UX needed and at the end you go with the 9th one!

          Why and how do you use Balsamiq Mockups?

          I use Balsamiq as my livelihood to mockup projects for clients to understand their projects better, and to help my development team as well. I also use it for my team to convey any messages from clients, to show their exact needs and limit errors; I have found this reduces the turnaround time for the project.

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

          The experience has been overwhelming. The interactive mockups give a clear view of how things will go ahead with the project. I can create mockups quickly, so clients are impressed with the outcome and they end up taking the time to understand how Balsamiq works. :)

          Some of Ankit's work (click to enlarge)

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

          Well there are a lot of projects where Balsamiq has been useful but one particular project was a mobile application where the client found that creating sketches was simply just time consuming. So he put up the job on Upwork and I took it. I showed him some mockups and told him about Balsamiq and how to use it. After few days he got used to it and was very happy that he met me and got to know Balsamiq.

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

          1. I would really love to see Balsamiq integrate with InVision or provide transition effects like InVision does. (Editors note: Not currently planned. Native apps are our top priority right now.)
          2. Many of my wireframes span up to 70 pages, so a search will be great. (We're working on it!)
          3. The rounded rectangles; When I fill in the colors the edges are not fully filled. Is that something that can be fixed? (We'll look into it. Thanks!)
          4. BMPR support in myBalsamiq (our online version).(Coming. See this blog post.)
          5. Pinch-to-zoom support for Macs. (It's on our list.)

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

          1. Use shortcuts as much as possible, it speeds up work by a factor of 2.
          2. If you create a lot of different projects, create a base project with all assets imported and just start editing that.
          3. Use Symbols for repeated assets, so that you just need to change things in one place.

          Lastly I thank a special friend, Balsamiq, my clients, my family and friends for supporting me to become a champion :)


          Thanks, Ankit, for the good work you do to rid the world of bad software!

          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!

            Danelle Bailey: Using myBalsamiq as a Project Hub

            Danelle Bailey"Our team uses myBalsamiq a lot," writes Danelle Bailey in her blog post "How our Design Team uses Balsamiq as a Project Hub". But rather than showing off her team's design work, she describes how myBalsamiq has become a central repository for a variety of common project artifacts.

            A typical myBalsamiq project for her team will start with an overview page created in Mockups describing the project and listing the other assets in the project folder. Think of it as the cover page and table of contents in one. It then progresses deeper into specifics, from user flow diagrams, to UI wireframes, and finally architectural and database details relevant to the developers.

            Project Overview and OutlineA sample overview page

            We are often asked about the difference between Balsamiq Mockups for Desktop and myBalsamiq. Our short answer is usually that the first is installed locally on your computer and the other runs in a web browser, but Danelle's blog post highlights how the built-in collaboration features of myBalsamiq can be used to make it more than just a tool for wireframing. It's a great case study and we're thankful she took the time to write it.

            Q&A with Danelle Bailey

            What industry do you work in, and what is your title or job description?

            I work on the Blackboard Community Engagement solution for K-12. I’m a Sr. UX Designer in our Product Design and Innovation Team. I have been designing on the web for 12 years and for the past few really focused on mobile. I am passionate about designing experiences that integrate seamlessly into everyday life.

            schoolwires mobileMobile Interaction Design work for Schoolwires mobile feed, collaboration with Sara Hardy

            What kinds of things are you excited about in your industry?

            Within the design and technology field, I’m excited to help push technology into becoming a truly helpful enabler of daily lives outside of highly technical users. When I focus on how many don’t have high speed internet and just need to get simple tasks performed, automated, or enabled, I think there is so much opportunity to innovate using common sense backed with technology. It’s a matter of being better informed, which I’m learning to do better myself.

            Using technology by deeply engaging community and families can change our future.

            Within the education technology space, it’s awesome to see how learners are expecting to guide their own educational pathways. This expectation raises the bar for not only design, but for content providers and learner results. One thing we want to facilitate is strong support of learner organizations. When these organizations are enabled to their potential, everyone wins. To get there, it helps to think about the end goals which can be higher learner output, or as simple as more time with family. Using technology by deeply engaging community and families can change our future.

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

            Think of design as more than simply visual design.

            Learn ways to research users. Listen. Try out new tools constantly. Listen. Learn to learn, and network. Think of design as more than simply visual design. Listen.

            How do you envision the future of K-12 education? Is it radically different than today, or is it a series of gradual changes?

            Education is typically slow moving when it comes to changes in methodologies and technology. I think consumption of learning material is already changing drastically (on demand), but there is also much room for community engagement innovation. Whether that is facilitating conversation about changes or simply being involved and aware of student success, that's where our team focuses.

            Why and how do you use Balsamiq Mockups?

            Our team uses myBalsamiq online because we have a lot of remote collaboration and cross-platform sharing that needs to happen on a regular basis. As a visual designer, I really like the simplicity of the low fidelity tools. It’s easy to convey designs and interactions without getting caught up with the width of a line, or specific typographic hierarchy early in the process. Further, it helps everyone to focus on how a design works.

            Our team uses myBalsamiq because we have a lot of remote collaboration and cross-platform sharing that needs to happen.

            Another way we use this tool is as a project hub. You can read more here, but basically we have a method (by modifying reusable Site Assets) that promotes consistency across designs. This allows engineers and stakeholders to know what to expect and where to find what they need for their part of the project. The elements we provide each time is ever-evolving as process and business needs change.

            Project Model TypesThe model templates created by Danelle's team

            While each project is different, these are the different types of models we use over again:

            • Overview: Contains information on the "why" and goals of a design and links to assets and specs. Also important notes.
            • User or App Flows: Sometimes we pull in more detailed diagrams that were created in other apps or teams.
            • Interactive Mockups: These are the designs that allow users to interact with screen and complete tasks.
            • Business Layer: Architectural explanations of underlying technical frameworks, libraries and functions needed to achieve functionality.
            • Data Layer: Database and storage details needed to deliver functionality.

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

            1. Import your own assets sparingly. Once you come up with a system, you can reuse many pieces without having too much to sort through.
            2. For now, I suggest color coding projects by project phase using the cover customizations in myBalsamiq.
            3. Keep as much history available as possible. Use the Propose Alternate feature to prevent overwriting potential winning ideas down the road. After you test, you may find an original idea works better.
            4. Use the Prototype link when sharing outside of your team.

            Danelle using myBalsamiqDanelle at work. Photo credit Katie Carpenter of Ryn Creative.

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

            I am involved in the Balsamiq forums regularly, pushing for ideas to help shape the future of this software we use as such an important piece of our process. A few ideas we have submitted and are eager to see facilitated in the online version are:

            You mentioned on your blog that you've been inspired by the book "The Best Interface is No Interface" and the the #NoUI mindset. What is it and what excites you about it?

            Too often designers think about solving problems using apps.

            Basically, this book points out how too often, we designers think about solving problems using apps. It encourages the reader to think about problem solving from a wider mindset and not to use the screen for the sake of making a "cool interface" or "having an app". There is so much we can leverage with technology that our device already know abouts us. Apple Pay is an example of this and I hope to see more of it as a consumer and in my own work where it is the best solution.

            I also read on your blog that you own a 1968 Chevelle. Do you have any photos of it to share?

            Danelle's Chevelle

            Sweet ride!


            Thanks, Danelle, you're a Champion! Thanks so much for sharing your process.

            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!

              Plantwise: Using Wireframes to Test Software for Farmers in Developing Countries

              Abigail RumseyThis is another great story of a Champion who blogged about a project we couldn't have imagined our software being used for. Abigail Rumsey wrote a blog post called "Mocking up the Plantwise Knowledge Bank" that described the process of creating, improving, and testing web and mobile applications for farmers in developing countries. Balsamiq Mockups was used for the wireframes.

              Abbie works at a non-profit called Centre for Agriculture and Biosciences International (CABI) that helps farmers around the world protect and grow their crops by spreading scientific agricultural knowledge.

              She is involved in a program called Plantwise, which she describes this way:

              Plantwise is a global programme to help farmers lose less of their crops to pests. The programme assists countries in setting up a ‘plant health system’, which mirrors a human national health system, involving ‘plant doctors’ that diagnose farmers’ crop problems at plant clinics, and other stakeholders such as diagnostic services and research organisations.

              This three-minute video gives an overview of the program and the people it benefits.

              Personally, I loved learning about this project through my correspondence with Abbie. I also found it interesting how the experience of designing, refining, and testing software felt so familiar, despite the context being so unfamiliar. The lesson being that, regardless of the purpose or personas of your software, there's nothing like putting some concepts in front of users and getting their feedback on something they can actually see. It's always eye-opening and teaches you things you never would have predicted.

              Read on for my interview with Abbie...

              Q&A with Abigail Rumsey

              What is your role with Plantwise and what do you like about it?

              My official job title is ‘Content Developer (Technical Solutions), Plantwise Knowledge Bank’ but that’s a bit of a mouthful! The Plantwise Knowledge Bank (PWKB) provides information and tools to people within the plant health system, both online and offline. I work on, among other things, translating the user’s requirements into specifications for IT.

              It took me a long time to realise that playing around with new tools on the internet could be more than just a hobby.

              I started off working in the content side of things for the PWKB, managing the quality monitoring of factsheet records and text mined distribution records for our database. I have been fortunate that my team has allowed me to follow my interests in technology and contribute my skills and knowledge in this area to the Plantwise programme. I always considered playing around with new tools on the internet as just being something I did in my spare time and it took me a long time to realise that it could be more than just a hobby.

              Tell me a little more about the project you wrote about in your blog post

              Currently, plant doctors collect data on the crops that farmers bring to their clinics either on a paper form or, as part of the ‘e-plant clinic’ pilots that we are running, on a digital form on an Android tablet. For the e-plant clinic pilots we have been using an off-the-shelf data collection app but, as we scale up and as we want to do more with tablets, this is becoming an unsustainable option, so we are now designing our own app.

              We wanted to know if plant doctors wanted a data collection app that looked like a form or if they wanted an app that was less obviously a data collection form, which still collected all the same data but, for example, instead of checking a box that said ‘leaves affected’, they would touch a picture of leaves on a plant. The wireframes were printed out on coloured paper (different colours for different versions of the app – form or pictorial) and laminated, then the plant doctors were asked what they thought of each wireframe.

              GeorgeMwembeRoseMuinde
              Image credit: ©CABI
              Users liked the wireframes where there were icons and checkboxes that would limit the amount of typing they had to do. They also suggested things we hadn’t thought of.

              We got a lot of feedback from this session. They quite liked the idea of clicking parts of the plant but it didn’t seem viable because they see a lot of different crop plants so the picture wouldn’t like the crop that they were looking at. They liked the wireframes where there were icons and checkboxes that would limit the amount of typing they had to do. They also suggested things we hadn’t thought of like the option to get a summary of their clinic session (time taken, number of farmers seen etc.) and send this to their supervisor.

              plantwise-mockup-1plantwise-mockup-2
              Wireframes for the Plantwise app

              We have now found a company to work with to develop the app, and plan to release it by the end of the year. Obviously the real test will be when the plant doctors get to try it out and let us know what they think of it! In the future, we hope to add more features to the app so that the plant doctors will have many tools and reference materials on their tablet and won’t need to carry lots of paper around with them. Possible future features include peer-to-peer messaging and assistance with diagnosis.

              What did you do before Plantwise?

              Before Plantwise I studied for a Masters degree in biodiversity and conservation, and got a fair amount of work experience both in the office and in the field with conservation NGOs. I ended up at CABI because I wanted to follow my interest in scientific writing and editing, so was looking for jobs with scientific publishers.

              What kinds of things are you excited about?

              We are seeing so many examples of citizens of less developed countries using and developing tools that are specific to their needs.

              I am excited about emerging internet tools and the opportunities that they are opening up for a more connected world. We are seeing so many examples of citizens of less developed countries using and developing tools that are specific to their needs. For example, the mapping of the Kibera slums and monitoring of national elections in Kenya using crowdsourcing techniques.

              Anything else you want me to know about you?

              I think my colleagues realised I was a nerd when I applied for the job with a QR code on my CV that linked to an interactive website about me.

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

              It's difficult when our users are in remote places with dodgy internet connections.

              It’s tricky working out what users want! We have got a lot better at connecting directly with the users of our tools but it is still difficult when they are in remote places with dodgy internet connections and when there are language barriers. We sometimes ask colleagues or partners in-country to help us with user testing.

              What other tools do you use for your job?

              The Technical Solutions group uses Trello to manage our Agile workflow, which I find to be a really nice tool to visually keep track of my tasks. We have also been experimenting with Slack for team communication. For creating mockups of tools, apart from Balsamiq, I use the free image software package GIMP. When I’m working with data from different parts of the internet I write a Python script or use a tool called Kimono to create a quick API.

              How did you discover Balsamiq and why did you start using it?

              I discovered Balsamiq when I started making wireframes as part of my job. One of my colleagues recommended it last year and I haven’t considered using anything else since! We recently tried out myBalsamiq when my team quickly wanted to draw up some designs for a mobile app. It was brilliant how quickly we could all put something together (even those people who hadn’t used the software before), and it was so easy to collaborate and comment on mockups.

              What trends do you see in your industry right now?

              Mobile is really taking off in agriculture in developing countries. We have gone from a small pilot of using Android tablets in plant clinics in Kenya last year to a large number of plant doctors using them this year. We are also running pilots in Rwanda, India and Sri Lanka, which are going well and greatly speeding up the data collection process. The majority of farmers in the areas where we are piloting have access to basic mobile phones, and many of them are using these to handle money transactions and to keep up-to-date with market prices.


              Truly fascinating stuff. Thanks for your time, and keep up the good work!

              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!

                Jay Bennett Uses myBalsamiq for Video Game Prototyping

                Jay BennettOne of the things we do for fun around here is keep an eye out for the Balsamiq wireframes that people share online in order to learn more about how people are using our tool and what they're building with it. We even send out high fives to some of our favorites and customers showing off their first mockups, because it takes some courage to put your work out there for anyone to see.

                One of our recent favorites was a surprising and impressive use of myBalsamiq wireframes as an overlay in a multiplayer video game prototype created by Jay Bennett from Vancouver, Canada.

                Check it out. It's great how he explains everything he's doing along the way.

                This one is pretty cool, too. It shows more live game play.

                I contacted Jay because I wanted to tell him how much we all enjoyed his videos and asked him if he'd tell us a little more for this blog. Read on for our interview.

                Q&A with Jay Bennett

                How did you get into game development?

                Game development started out as my hobby while pursuing my computer science degree. I liked to practice coding using Unity3d and the C# language.

                What do you like about it?

                I love the technical challenges. Testing out a new idea by making a prototype is useful in game development and I have been using Balsamiq to create quick mockups to go along with that.

                What is Honey Badger Games?

                Honey Badger Games is my project where I have been creating a multiplayer online game. I also create tutorials about game development and post them on my YouTube channel.

                How did you discover Balsamiq?

                I took a UI Design course as part of my computing science degree and had a great professor, Paul Hibbitts, who also worked as a UI/UX consultant in the industry. He stepped us through the standard UI design process and we used MyBalsamiq to turn our requirements and sketches into mockups. I liked it a lot. Later on I was working on a UI for a game and turned back to Balsamiq because it let me create good results in a short period of time.

                How does it fit into your workflow?

                Let’s say I have a new game with no UI. Now I want to build a new user interface that goes on top of this. My character might be standing in a forest somewhere near the middle of my screen. How can I do it easily?
                First I will take a screenshot of the game and create a black and white copy (I found this helps the screenshot to blend well with Balsamiq’s widgets). Then I import this screenshot as an image into my Balsamiq project and lay it out as the background. Working on top of the game screenshot lets me get a good feel for the layout and proportions.

                I will usually have some paper and pencil sketches to go off here. I’m ready to lay out the idea with Balsamiq widgets. I’ll play around with the tool for a while and get something that I really like. You don’t have to be picky – just use a rectangle placeholder for parts that aren’t fleshed out yet.

                Balsamiq is like a gateway between paper-and-pencil mockups and the final game UI.

                From there I export a PNG of the mockup and add that to my Unity project as a texture file. It is so awesome - being able to use the mockup in the game itself. In that way, Balsamiq is like a gateway between paper-and-pencil mockups and the final game UI. I have used the “paper prototyping” UX technique and this is like “paper prototyping” within the game engine itself. It’s so easy that I can usually lay the interactive widgets directly onto the mockup and then wire them up with real functionality.

                The other great part about this approach is how easy it is to create new iterations in Balsamiq and see the result before making any big changes to the application. Everybody knows how painful it is to alter a product in the final stages, and this kind of situation can lead to a bad user experience making it into production. Anything that can help ease that pain is great, in my opinion.

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

                I had a tough time setting a transparent background in myBalsamiq. The reason I needed it was to use the mockups as a UI overlay like I showed in the video for the game's HUD. I gave up trying to find a way in the program and used an improvised “green screen” technique to remove it in Photoshop instead. It kind of works but could be made so much easier with support in the myBalsamiq app.

                What other tools do you use regularly that you really like?

                Visual Studio. I think it is the gold standard development tool if you are on Windows. The Unity3d game engine is also great for indies. I actually don’t use too many web apps besides Pandora and my online banking, so I was surprised to find out how much I liked working with myBalsamiq.

                What trends do you see in game development right now?

                I think we have seen the free-to-play model become mature and accepted in the last few years, especially for mobile games. 10 years ago, giving away a $60 game for free seemed like lunacy. But people made it work and we are now seeing players spend hundreds of dollars inside in-game currency shops instead. Plus, it reduces the barrier to entry and increases the growth of your player base. This is doubly great for indie publishers who don’t need a massive marketing budget to convince someone to download and try a free game.

                Two trends on the horizon would be Virtual Reality and multi-platform gaming.

                Two trends on the horizon would be Virtual Reality and multi-platform gaming. With Virtual Reality I think there are a lot of challenges still to go, but the technology like Oculus Rift are here and bringing the development costs down to a reasonable level. But multi-platform gaming is something that I’m really more excited about. What I mean by the term multi-platform are games that involve both your PC and a mobile phone or tablet to play. The UI/UX with ideas like HTML5 and Google Material Design is to have a scalable experience across all devices. I would love to see a game that utilizes this possibility in a unique and interesting way.

                What are the characteristics of a good multiplayer online game?

                It comes down to competition against other real humans and the opportunity to come out on top.

                I think it comes down to competition against other real humans and the opportunity to come out on top. Winning is truly an addictive thing. By extension of that, I think you need to build a fair and balanced game. If you look at what is happening with Riot Games and League of Legends, they are filling out stadiums full of fans who want to watch these young guys play a multiplayer game against each other competitively. League is a game where you have a simple set of rules but a huge number of possibilities about how it plays out. It's like an electronic combination of chess and sports.

                What games do you like to play yourself?

                I’m a big fan of League of Legends as well as EA’s FIFA and NHL series for consoles. Recently I’ve been pretty hooked on Boom Beach for my phone. It’s a good one to kill some time on the train to work!


                Thank you, Jay. Keep up the good work! 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!

                  The Most Important Skill of the Decade: Jeromy Wilson on Prototyping Techniques

                  Jeromy Wilson"How do you know you're coding the right stuff?"

                  That's the central question in Jeromy Wilson's recent blog post called "The Most Important Skill of the Decade". He believes that for a technology company to be successful they need great programmers, but even more importantly they need to know how to prototype and test what they want to build before creating it.

                  Jeromy says that prototyping is a skill that must be learned, that it's not "just putting pretty pictures together." He writes that learning prototyping includes developing "listening skills, innovation skills, UX skills, critical thinking skills, and tech savvy skills."

                  Successful prototyping is what leads to successful products today, which is why he calls software prototyping "the most important skill of the decade." He also believes it's a skill that everyone involved in the process of creating software should learn, not just designers and developers.

                  He has developed a comprehensive course on software prototyping called Master Software Prototyping on the learning platform he created, Niche Academy, which he built as a place for people to teach their own "niche" subjects that may not be available elsewhere.

                  I spoke with Jeromy, a long-time Balsamiq user, about prototyping as well as his recent leap from corporate employee to entrepreneur, which he described to me as "the right time and the right thing."

                  Q&A with Jeromy Wilson

                  Who are you and what do you do?

                  My name is Jeromy Wilson. I’m the founder and CEO of Niche Academy - which is a Software As A Service (SAAS) platform which allows anyone to create their own “niche” online learning academy. I’m also an instructor at a Niche Academy called “Everything but Coding”, an okay ping pong player, a lousy singer, and a Balsamiq aficionado.

                  Why did you start your own learning academy and what are you hoping to accomplish with it?

                  There are a lot of people out there with their own niche expertise to share.

                  I built Niche Academy because it was something I wanted to use but couldn’t find. I wanted a better way to teach software prototyping and other related skills. Hence, my “Everything But Coding” academy. I know there are a lot of other people out there with their own niche expertise to share. Education is changing because of the way eLearning tools like Niche Academy are making knowledge more accessible than ever before.

                  What makes Niche Academy different?

                  We want to be the best at helping individual and business experts teach what they know. We want the software to essentially disappear in front of their students eyes and have them only see what they need to do to learn. We have made it extremely easy to create your “niche” academy, create your courses, and reach your learners. We are doing everything we can to make the platform disappear and help the instructors and learners shine.

                  We are also infusing creative ways for the learners to learn. Like allowing the learners to learn based on their current learning style (which isn’t necessarily the same day to day).

                  It’s a process, but our development style is ever striving for simplicity, clean interfaces, essential and effective features, and happiness. :)

                  How did you discover and learn about software prototyping?

                  My first experience with prototyping was at a company called Dynix (now SirsiDynix). I took some requirements I had written to one of the lead developers. After looking them over for a few seconds he handed them back to me and said, “Could you draw me a picture?” I immediately went back to my desk, grabbed a pencil and a blank piece of paper and I drew him a picture. By the time I had finished that first wireframe, I was hooked. The creative and inventive process of coming up with something new was irresistible to me. I eventually graduated to PowerPoint and Visio.

                  Lesson learned about high fidelity prototypes: make sure everybody knows it's just a prototype.

                  I worked for Dynix for several years before accepting an invitation to join a startup called Alpha Bay. I was the first official employee at Alpha Bay and one of my first tasks was to create a high fidelity prototype of the retail system we intended to build. That prototype was too good, as it turned out. The first time we showed it to a customer, they wanted to know how long it would take to roll it out in their stores. They were ready to buy. When we told them it was just a prototype, they felt like they’d been tricked. Lesson learned about high fidelity prototypes: make sure everybody knows it's just a prototype.

                  When and why do you use Balsamiq Mockups?

                  When I’m creating a new product or design, the Balsamiq mockup is the first thing I create after going through the understanding and brainstorming phase. When I first start building a new product, new design, or new feature I start by first understanding my audience and what they are trying to accomplish. I then brainstorm about how I will solve their issue or fulfill their need - which usually includes a whiteboard with initial workflow and layout ideas. I then create my first Balsamiq mockup, get feedback, change the mockup, further validate, etc. Then I write the acceptance criteria after the mockup and validation are complete.

                  It’s so much easier to look at a picture than to read a bunch of requirements, use cases, or user stories.

                  I put together mockups because it is the best way to get everyone on the same page and the only way to start getting real feedback. Plus, it’s so much easier to look at a picture than to read a bunch of requirements, use cases, or user stories. That being said, I write some great user stories - filled with plot twists, suspense, and sometimes humor (which my bosses hated, but the developers and customers loved).

                  I also used Balsamiq to create a test for graphical designers we were interviewing. They had to create a functional webpage based on the balsamiq mockup. Here it is:

                  DesignerTest

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

                  It’s been helpful with every project I’ve worked on. Here’s a good example though. I built an app for the Apple App Store several years ago that didn’t do very well. Great product, but I didn’t market it very well. So, to solve that problem for my next app, I found a blogger that had a lot of influence in her market and asked her if I could build an app based on her approach. She had written a book as well. So I bought the book, read through it, and then put together a Balsamiq based on what I had learned from the book and how I proposed to convert that into an app. She gave me feedback and I made the proper adjustments and then we built it. It did much better than my first app and even broke into the top 30 in it’s category.

                  AppScreens

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

                  I use the quick add religiously. You can get to it by simply hitting the “+” or “/” key and then type name of the UI component you want to use. So simple and fast. I also use the markup components quite a bit. You can make notes and put arrows all over the place to remember decisions you made and why and then with a click of a button you can hide them.

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

                  Besides Balsamiq I use Basecamp for project management, Camtasia for screen recording and video editing, SnagIt for screenshots and quick videos to send to developers explaining bugs, Dropbox for all my files, Pixelmator for image editing and manipulation, and ProtoShare for medium fidelity prototypes to name a few.

                  Why is software prototyping so important?

                  When done right it gets the right product out faster, it fuels innovation within a company or for a startup, and it unites teams with a process that helps everyone be successful.

                  Describe the different types of fidelity you mention in your course, how they differ, and when to use each.

                  In my course I teach about three types of fidelity in software prototyping. Low fidelity (LoFi), medium fidelity (MeFi), and high fidelity (HiFi).

                  LoFi prototypes are rapid sketches, mockups, and wireframes. It’s everything from drawing on a whiteboard or napkin to putting mockups together in Balsamiq. It’s where ideas are born and begin to be fleshed out. It’s very iterative and fast changing.

                  MeFi prototypes incorporate a look and feel closer to what the actual product will look like with links, buttons, and UI elements that actual work, but data isn’t being saved. Look, but don’t touch.

                  HiFi prototypes allows actual users to use the prototype as they would in real life. Not everything may work perfectly and some things might not work as they will in the actual product, but this gets you the feel of the product or feature.

                  What are some common misconceptions about software prototyping or mistakes people often make when creating them?

                  The first mistake people make is falling in love with their prototype.

                  I think the first mistake people make is falling in love with their prototype. They put all this effort into creating something and then get defensive when someone gives constructive feedback. Prototyping is all about validating, failing fast, iterating, and eventually getting to the right solution.

                  One of the misconceptions is that prototyping slows the process down. Why not just start coding and make changes along the way? Prototyping actually speeds up the process to getting the “right” solution done. It’s much more difficult and expensive to make changes to code.


                  Note: If you are interested in Jeromy's master prototyping course you can save 50% using this link.

                  Thank you, Jeromy. 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!

                    John Bethke on Process Before Product

                    John BethkeOur latest Champion, John Bethke of Bethke Consulting, LLC, contacted us to tell us about how he uses Balsamiq Mockups in his work. What I like about his story is that it's a reminder that software is frequently only one part of the solution to a client's problem. In his consulting practice John makes a point of analyzing the client's entire process, of which the software interface is only a piece.

                    It is often too easy to focus only on the software aspect and specifically the user interface. But improvements to the experience can be made at many points along the way. John described to me how a key part of his success has been to take the time to understand his client's world. He even makes sure to use the specific language his clients use. He told me: "It's important to maintain the vocabulary used by the people in the business process roles and keep a glossary of all terms used."

                    Read on for my interview with John.

                    Q&A with John Bethke

                    Who are you and what do you do?

                    I'm a self employed management consultant with 15 years experience working at the strategic level (Product or Process Vision, Enterprise Analysis, Workflow modeling) and tactical levels (User Stories or Use Case, Product Management) for business process improvement and software development initiatives.

                    What trends do you see in your role or industry?

                    Requirements elicitation and stakeholder review is being done virtually more often which means effective techniques and communication mediums used for discussion, review and confirmation are crucial.

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

                    Before interviewing a stakeholder, find out about what they do and what gives their work purpose.

                    Before interviewing a stakeholder, find out about what they do and what gives their work purpose, i.e., understand relevant business rules, key business events, company policies, process documentation, industry regulations. It will inform your interview questions and the stakeholder will appreciate you took the time to understand their processes and problems. In return, they will be more likely to give you information to do your job because they know you are trying to solve their business problems.
                    Business Process DiagramJohn creates business process diagrams to show that he understands how everything is connected.

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

                    I use techniques I've developed to efficiently organize the reams of information for understanding and analyzing a business process, identify problems and succinctly describe the process as well as create the artifacts used for the scoping and implementing the software solution. I continue to deliver and my clients continue to engage me to be a resource on their projects.

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

                    Each project brings its unique set of problems to solve and stakeholders that have the problems. The initial weeks on a project are about getting the stakeholders to trust me that I will deliver the correct expression of the problems that they need solved and effectively communicate it to the project team members that will scope and build the solution.

                    Why do you use Balsamiq Mockups?

                    I've used Balsamiq since 2012, mostly for elicitation and confirmation of user and system needs. When ever I'm assigned a new project, I take inventory of all the business events, domain objects, business rules and workflow states. If applicable to the engagement, I build wireframes in Balsamiq and use the list of events the UI supports and any related process or workflow state model to create the story of who, what, why and when. The combination of Balsamiq mockups and related user events supported is well received and really advances the conversation to get to meaningful requirements for development.

                    It is 6 times cheaper to fix a requirements defect before code is written.

                    It is 6 times cheaper to fix a requirements defect before code is written. Balsamiq helps users clearly understand and articulate their problems and see the solution before building it. This leads to more useful requirements and reduced development time.
                    Workflow State DiagramAn example of one of John's workflow state diagrams.

                    What other tools do you use for your job?

                    I use Enterprise Architect and Gliffy diagrams for modeling Business Process, Actor models, Business Domain Models and Workflow states. I use Atlassian Confluence for text documentation and collaboration. I use Hipchat and Lync for instant messages and screen sharing.

                    What is your favorite or most-used Mockups feature?

                    I use the datagrid quite often for tables. I like using the the field set to group functionally related items. The export to PDF is handy when executive stakeholders want to see a printed version.

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

                    Very positive. The simple view of a mockup created in Balsamiq is disarming and helps keeps the conversation about user needs and problems to solve rather than about detailed and final design, which can derail a work session.

                    The simple view of a mockup created in Balsamiq is disarming.

                    When I show the mockups with a list of events the UI supports and related diagrams for context in the business process, it is well received and makes review sessions very productive. Designers can take the mockups I've created and quickly design in the intended software knowing the user needs are understood and requirements are well developed.
                    Mockup exampleA mockup for one of John's projects.

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

                    • Another markup feature: be able to draw a circle or box around a group of items
                    • A better line drawing markup tool (like Snagit) - it would be helpful to have a straight single arrow to use, instead of having to manipulate the double arrow
                    • Be able to control a single column width in the data grid /table [Editor's note: this feature is described here]
                    • Project assets stay with file if the BMML file is moved to another directory [Editor's note: stay tuned... ;-) ]
                    • Text wraps on a button
                    • Spell check - if it does not slow it down too much, the lightweight nature of the tool is one of its best characteristics

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

                    I screen share the tool and make updates on the spot during review sessions.
                    1. Keep the directories for files well named and organized. It will help when asked to produce PDFs of mockups or when necessary to create a quick update.
                    2. I screen share the tool and make updates in the tool on the spot during review sessions.

                    Thank you, John, for sharing your tips and suggestions. 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 »