👋🏽 We wrote a book! Order Wireframing for Everyone today →

Balsamiq

Toggle navigation

JR Harrell on the State of Design in 2013

· Posted by Leon in Case Studies 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!

Do you have a story to share about the awesome things you do with Balsamiq? Send an email to champions@balsamiq.com with your stories or blog posts!

Leon for the Balsamiq Team

Leave a Comment

Comments (1)

  1. Quote:
    “It would be amazing to be able to group drawing sets from my 4000×4000 screens into individual PNG outputs with preset pixel space sizes.”

    I agree.