Lean UX without skimping on the meat [video]

In October, I gave a talk at WordCamp Baltimore on assembling better project requirements through analysis and user focus. The talk was fairly well-received and the video recording was just posted on wordpress.tv for viewing!

Video

Worksheet

My worksheet can be found on Google Drive: http://is.gd/emb8g0

Slides

My slides are also posted on SlideShare.

mobile2-mast

Mobile Only: How to build and launch a website from your phone

As a thought experiment, I wondered if it was possible to design, develop, and launch a custom website from my phone, without touching a tablet or computer.

Spoiler alert: I could.

In fact, not only was it possible to build a website from my phone, but I was able to do it in less than a couple hours of research and work, using only free apps. The following post will give you the step-by-step on how to launch your own mobile-only website.

For this experiment, I used an iPhone 4 running whatever the last version of iOS was it supported. I didn’t use any external displays or input devices.

Preparation

There are a few things you’ll need to prepare in advance of actually building your site, and all can be accomplished from your phone. Just as with any website you’re building, you’ll need to:

  1. Purchase a web host
  2. Create a database and a database user
  3. Give SSH access to your host user
  4. Download an app for SSH access
  5. Optionally, purchase and configure a domain
  6. Optionally, download an app for web inspection (to view source on your website, for theme development and bug testing)
  7. Optionally, download an app for photo editing
  8. Optionally, take and edit some photos for theme artwork

Hosting

I have a GridServer account with MediaTemple I use for my sandbox experiments. I prefer it because I can easily create a new site and DNS zone without buying another domain or adding cost. 

As an added bonus, MediaTemple launched a new mobile interface for their account center in August of 2014—making this experiment that much easier.

My environment is a standard LAMP stack with phpMyAdmin.

Apps

ServerAuditor (iOS, free)

This free app replicates the functionality of your Terminal command line and will let you connect to your host to do the initial file management and installations.

WebInspector (iOS, free)

This free app is just a front-end source viewer. I’m sure there are better alternatives, but it was the first one I found that allowed me to view source on my website, to make some theme customizations.

PicLab (iOS, free)

There are many free photo editors. This was simply the first I grabbed. It allowed me to crop and adjust a photo from my phone, to create theme artwork.

Three Apps

Selecting a CMS

If you want to be old school, you already have everything you need above to get started. You could SSH into your server, create an HTML file, and compete with tilde.club. However, the point of my experiment was to see if I could build a website of high enough quality to sell to a client.

WordPress (MySQL/PHP, free)

I selected WordPress for this experiment for a variety of reasons including my intimate familiarity with it and the fact it plays nicely with my existing hosting environment. Most importantly though, WordPress is the most progressive of the open source content management systems in having self-contained extension and update management, which was critical in this early experiment. Here are just a handful of the many native features that helped:

  • Mobile-friendly admin area (2013, v3.8)
  • Automatic core updates (2013, v3.7)
  • Live previews for themes (2012, v3.4)
  • Theme browser and installer (2009, v2.8)
  • One-click core update system (2008, v2.7)
  • Plugin browser and installer (2008, v2.7)
  • Theme and plugin text editors (2005, v2.0)

WordPress also keeps a latest stable version URL to make it easy to directly install to your host without having to download and upload files to your host—i.e., they never land on your cellphone’s hard drive.

http://wordpress.org/latest.zip

http://wordpress.org/latest.tar.gz

Installing WordPress via SSH

In this section, we’ll be directly copying the latest WordPress archive from wordpress.org to your host. Then you’ll unpack the archive, move the files within the WordPress directory up to your web root, and finish with some file cleanup.

Warning: If you’re new to the Terminal, be warned the command line can be dangerous if you don’t know what you’re doing. If you’re working in a live production environment, at minimum you should be making a backup of everything.

Have your credentials ready:

  1. Your development server URL
  2. Your SSH username and password

Step 1: Transfer and unpack WordPress

Launch ServerAuditor and connect to your server. The welcome screen has the ability to add a new connection and save the bookmark, or to “quick connect” without saving. I recommend saving a bookmark.

After adding your login and server credentials, you should be at the command prompt.

Before we jump in, there are some basic Terminal commands to know:

  1. ls = lists all files in your current directory
  2. cd = changes directories and is given paired with a directory command like “cd ..” to move to the parent directory, or “cd wordpress” to move down into the WordPress directory relative to your current position—i.e., you would see /wordpress/ listed if you ran the “ls” command.

In my case, I need to change directories from my user directory down into my sandbox domain’s web root:

cd domains/tasteofhot.com/html

Now we grab the latest WP archive from their server:

wget --no-check-certificate http://wordpress.org/latest.tar.gz

Note the “--no-check-certificate” may not be necessary for you. I needed it to mitigate an error message I was getting from MediaTemple.

If you “ls” from here, you should now see the latest.tar.gz file in your file listing.

Unzip the archive:

tar xfz latest.tar.gz

If you “ls” again, you should see a new /wordpress/ directory in addition to your archive.

Change directories into the new /wordpress/ directory:

cd wordpress

Move all of the contents of the /wordpress/ directory up a directory to your web root:

cp -rpf * ../

Change directories to get out of the /wordpress/ directory and into the parent web root:

cd ..

Delete the empty /wordpress/ directory:

rm -rf ./wordpress

Delete the packaged WordPress archive:

rm -f latest.tar.gz

Now your web root is ready for the famous 5-minute install.

Step 2: Install WordPress

The shortest step, WordPress has a pretty simple install interface that will walk you through in a jiffy.

Have your credentials ready:

  1. Your database and host names
  2. Your database username and password

In Safari, or another mobile browser, browse to your dev server. Follow the WordPress on-screen instructions, then log in with your new username and password.

Step 3: Permission server for uploads

This may or may not be the case for everyone, but in the way I unpacked WordPress, I discovered my theme and plugin directories weren’t permissioned correctly for direct uploads and installs.

If you want to test your permissions first, skip to the next section and attempt to install a theme. If the theme installs successfully, you don’t need to modify permissions.

To fix permissions, log back into your SSH app and reconnect to your host.

Change directories to your root WordPress directory

cd domains/tasteofhot.com/html

List the files to make sure you’re in the correct directory and can see the /wp-content/ folder but are not in it.

Change all the directories within wp-content to 755 (-rwxr-xr-x):

find wp-content -type d -exec chmod 755 {} \;

Change all the files within wp-content to 644 (-rw-r--r--):

find wp-content -type f -exec chmod 644 {} \;

Alternately, you can manage permissions via the MediaTemple file manager in the Account Center. The trouble with this approach is it seems to be missing a recursive feature—i.e., you have to set permissions on each file and folder individually.

Customize your website

For this experiment, I wasn’t about to develop an entire theme from scratch because—well, nobody does that anymore. There are an abundance of amazing responsive themes and WordPress has built-in tools for browsing, previewing, installing, and configuring.

I did, however, want to show that custom theme development is an option, so I went ahead and forked a “parent” theme to create a child theme and modify its code as a proof-of-concept. (It’s best practice to not modify the parent theme directly, to allow for system updates.)

Step 1: Find and install a parent theme

Under your administrative menu in Appearance > Themes, you can browse featured or popular themes. There are even search tools if you have specific criteria, but those search tools are primarily relevant for desktop sites—i.e., the number of columns.

I have a theme I’ve already used that I quite like the simplicity of, so I went ahead and searched for “Editor” as my parent theme.

Tips when reviewing mobile-only themes:

  • Thumbnails – Unfortunately, the thumbnails for WordPress themes are desktop screenshots, so they are less relevant for mobile-only shopping. However, when you select a theme, you can preview it.
  • Collapse Info – The way the theme previewer is laid out, the desktop info sidebar for the theme’s information appears to be the entire layout on mobile. There’s a collapse button at the bottom and it is a bit finicky on mobile. However, if you click it a couple times and are patient, it will hide the sidebar so you can see the theme.
  • Responsive – If the theme does not look right on mobile, it is not responsive. Move on to the next one. If you switch away from featured or popular, chances are it is an older theme that isn’t as responsive.
  • Usability – Focus on layout you like and ignore artwork, fonts, or colors. It’s relatively easy to correct those and your mobile-only audience is more interested in utility than beauty.
  • Load Time – If the theme seems slow, it probably will be for your users also. Pass.
  • Live Preview – To preview a theme with your content in it, you have to first install the theme. You can preview it without having to enable it.

After installing the parent theme, you can preview it with your own content and set a bunch of your site settings through the theme configuration before enabling it.

Enable the parent theme and optionally create any artwork for the theme in PicLab (or other app) while you are at it. You may need to reselect some of this content after you create your child theme, but if you’re trying on this parent theme for the first time, it’s worth the preview.

Step 2: Create a child theme

Now that we have a usable parent theme, let’s create a custom child theme. There are a few ways to do this. If you already have an FTP or other file management app, you can duplicate the theme directory there. You could use the MediaTemple (or equivalent) Account Center’s file manager. You could even turn back to your SSH app. However, I’m trying to show how this can be done by non-developers, so I used a WordPress plugin called Child Theme Configurator.

Add any necessary plugins:

  1. Browse to the plugins area in your WordPress admin area.
  2. Add New to search for and install Child Theme Configurator.
  3. Activate the new plugin after install.
  4. Optionally, do some plugin cleanup and delete the Hello Dolly plugin.
  5. Optionally, install any security plugins. My favorites for a fresh install are Block Spam By Math ReloadedLimit Login AttemptsBroken Link Checker, and Disqus to replace the native registration/commenting system.

Use Child Theme Configurator:

  1. Under Tools > Child Themes, create a new theme.
  2. You need only add the slug and theme name. All other settings can remain default.
  3. Browse back to your theme management area to preview your child theme, set any metadata, and activate your new child theme that—for the moment—looks exactly as it did before.

Step 3: Modify your theme

To customize the code o your new theme, again you could modify this via SSH, your hosting file manager, an FTP client, or other file management app. However, WordPress has a built-in editor included under Appearance > Editor. The downside of this approach, is of course version control, but this post won’t get into that.

In my example, I simply changed a few font colors to demonstrate the capability. I used WebInspector to view source on my site and get class names to modify.

Publish your content

The last thing I did to prove this is possible end-to-end is, of course, publish some content. By default, WordPress creates one placeholder page and one blog post. I updated both to be information about this website and even added a photo from my phone via WordPress’ built-in media management.

 

It’s not the most gorgeous of sites with only a few minutes of theme customization, but you’ll see it works as expected. Imagine sitting on a bus, building a website, and drafting a blog post. That’s what we just accomplished: http://tasteofhot.com.s35377.gridserver.com

Conclusion

When I originally considered this experiment, I was pretty sure it was possible, but I didn’t imagine how easy it would actually be. This is a long article because I wanted to have enough detail and screenshots in here for you to easily reproduce—but in reality if you are familiar with WordPress and the command line, the process was quite trivial. Add to that all of the mobile-friendly administration interfaces within the last calendar year and we’ve reached a pivot point, where tools will only continue to better, become more sophisticated, and increase efficiency.

We’re on the cusp of a fascinating and scary change—away from the mouse and keyboard mental models we’re used to. For more information on where we’re headed, read Part 1 (below) of this pair of articles, where I show how demand for this type of website and designer will only increase for a multitude of reasons.

mobile-only-mast

Mobile Only: Rise of the computer-free web designer

Around twenty-five years ago, I was resting my right hand onto my first computer mouse. A cognitive bridge formed between an external input device and an Apple IIe monitor, positioned on an upright plane. I utilized that unnatural mental model to create digital pictures in MacPaint, followed by Kid Pix. Little did I know, that intimacy with the mouse and its keyboard sibling would be foundational to my career as a website designer all these years into the future.

With that, I’m humbled and amazed that within the last five years, my lifetime of personal computer training has been upended by today’s handheld, touch devices—and that within the next five, our industry of “desktop” designers and developers will be eclipsed by tweens designing and deploying websites from their wrists. They’ll publish as such, because they’ll have not formed the same cognitive bridge as we contemporary adults did.

By 2020, many of our interactive design competitors will have never owned, touched, nor seen a personal computing device as we know them today.

The age of the designer in a task chair will have effectively rolled out the door, into obsolescence. Ludicrous? Science fiction, even? Let’s review the trend…

Desktop versus Mobile Traffic, 2010 through 2014

StatCounter GlobalStats mobile versus desktop traffic trends

Source: 2014, StatCounter

In 2010, just five years ago, we were slowly adopting our smartphones. Most of our clients didn’t own one yet. BlackBerry was still king of the business world. As web designers and developers, we were a religious bunch—reading Ethan Marcotte’s Responsive Web Design (2010) and soon after, Luke Wroblewski’s Mobile First (2011)—but that newfound knowledge was a hard sell among tight client budgets. The mobile consumer hadn’t amassed yet, and finance departments weren’t signing the dotted line to design for two screens, let alone everything in between.

2015, the tipping point

Today, the figures speak for themselves and responsive is the barrier to entry. This month, StatCounter revealed worldwide mobile Internet traffic has surpassed 33% on a trajectory that isn’t slowing. Personal computer sales plateaued in 2010 (Jun 2013, USAToday) and budget smartphones are increasingly being introduced to new consumer majorities. If we extend that StatCounter graph (below), we’ll have reached a 50/50 traffic split by the end of 2015, and a complete inverse of the graph before 2020.

Desktop versus Mobile Traffic, extended through 2020

StatCounter GlobalStats mobile versus desktop traffic trends projected

Original source: 2014, StatCounter

These numbers reek of hypothetical, but you’re likely reading this post from a Western culture, where US census data (e.g.) reveals we own more personal computers than we have citizens. That’s greater than a 100% saturation rate, in addition to our smartphones. Compare that to the larger economies, China and India, where saturation never reached a 17% average and smartphones are only beginning to be price-accessible.

Population
Computers to People
(2012)
Internet Access
(2014)

USA

320 mil
(4.4% of world)
1:1
(114% of pop)
86.8% of pop
(18 mil new users YOY)

India

1,260 mil
(17.5% of world)
1:10
(11% of pop)
19.2% of pop
(30 mil new users YOY)

China

1,370 mil
(19% of world)
1:5
(22% of pop)
46% of pop
(24 mil new users YOY)
Sources: 2012, TekCarta computers per householdTekCarta average household size | Internet Live Stats

With today’s total Internet users totaling a mere 40% of world population at 3 billion, Asian influence on the Internet marketplace is only beginning.

Enter Xiaomi

In 2011, Xiaomi was introduced to China as a budget smartphone, not so subtly copying many aspects of the Apple brand. By 2012, China’s mobile Internet usage surpassed its computer traffic. (Aug 2012, TechInAsia) In 2014 the manufacturer leapt over competitors Huawei, Lenovo, and LG to become the third-largest smartphone manufacturer behind Samsung and Apple—selling 17 million units in the third quarter. (Nov 2014, PCWorld)

By the end of 2015, Xiaomi will have sold more smartphone units in China than the US has total smartphone owners. (Jul 2014, TechCrunch)

The introduction of Xiaomi is sweeping China, putting the smartphone (and the Internet) into the hands of billions of previously untapped consumers. Additionally, Xiaomi plans expansion into similar markets like India, the world’s second largest population pool. Combined, India and China comprise more than 36.5% of the world population, with 2.2 billion consumers who have never owned a personal computer before—a mobile-only population eclipsing the entire US by seven.

This mobile-only trend doesn’t end in “the East.” The US reached 50% smartphone saturation in 2014. More than 40% of Hispanic Millennials are mobile-only. (Jun 2014, comScore) Worldwide, there are already 400 million Facebook users who only log into their accounts on mobile devices. (Jul 2014, TNW) That 50/50 split in 2015 is all but guaranteed, and the hypothetical “mobile-only” climate of 2020 is wagerable.

Birth of the mobile-only designer

As China, India, and following markets become smartphone-enabled, and as the US and other Western cultures continue to decline in personal computer usage, a new breed of design “agency” will appear. Tomorrow’s entrepreneurial 16-year-old web designer will make a career of designing, developing, and launching websites from their phone or other hyper-portable device, without having touched a traditional personal computer. Gone will be today’s hive of desks.

This shift won’t come because those devices are inconvenient, or even expensive. This shift will come via demand. Just as we had to arm-twist in 2010 to convince clients they needed a mobile site to deliver content, we will be attempting that same twist to save the art of desktop-sized designs for an ever-shrinking consumer base. In markets where personal computers never existed, where bootstrapped designers have never used a device that didn’t fit into their pocket, there will be no need to design “up” because smartphones are the ceiling that matters.

Conclusion

It’s mildly scary where we’re headed—we the affluent designers with dual-monitor standing desks and Wacoms. Design for the desktop will still exist for productivity systems—hospital displays, projected war-room analytics, and the like. But for the rest of the world—the billions of small businesses catering to the average consumer, and the design agencies that cater to those small businesses—2015 will be a year of change. My Apple IIe mental model is shaken, and by embracing my beginner’s mind, a new foundation is hastily being lain.

I hope you’re as excited as I am!

Geeks eat more pizza in smaller groups

Back in 2008 or so, I got involved in DC’s burgeoning tech meetup community. Fast forward a couple years to 2010 when my office moved into a new space with a great venue for hosting my favorite meetups. We started with DC PHP and immediately after, WordPressDC. Then DCjQuery (now DCJS), followed suit.

With three related meetups going, we were getting a lot of traffic and cross-pollination of members. There was also no shortage of sponsorship for food and beverages—though we were typically, BYO. Pizza is common fare for a meetup, just because it’s easy and doesn’t require too much in the way of incidentals like plasticware.

Problem

Over the next few years, I kept guessing at the number of pizzas we needed based on the number of RSVPs. Then, in weak effort to be more accurate with each order, I tracked leftovers. As a general practice, we took head counts and calculated regular percentages of attrition (RSVPs to actual attendees).

In 2012 or so, after being left with a dozen too many pizzas at an event, I sat down to crunch two years’ worth of trend data. It turns out, there were a couple of conflicting graphs observed:

  1. The higher the RSVPs, the higher the number of drop-out attendees; we saw roughly 80% attendance in groups around 100. Inversely, if the group was small—say ten—the attendance was near 100%.
  2. The larger the group of actual attendees, the less pizza per person was consumed. Smaller groups ate a tremendous amount more pizza per person.

Hypothesis

Now, I have theories about why these trends are the case, just based on social norms:

  • Attrition – Smaller groups tend to be a higher percentage of regulars. That means they know it will be noticed if they don’t attend. In a larger group, however, it is easier to say “Eh, nobody will notice if I don’t go.”
  • Consumption by tenure – Regulars tend to expect food (or confirm if it exists) and thus don’t eat beforehand. Also, regulars are less shy about eating in front of their friends. No judgment for taking the extra slice. Newcomers, on the other hand, often eat ahead of time and may have a higher sense of politeness toward the group.
  • Consumption by group size – Smaller groups can more easily survey the pizza-to-person and determine if their taking another piece is going to keep someone else from getting enough. In a larger group, many factors are at play. A person may be conservative about grabbing extra slices in case the food runs out, or because of perception. Often, this leads to attendees grabbing too few slices before the talk, then when the talk begins, not wanting to interrupt by going back for seconds. That’s not a problem for smaller groups, where eat eater may have hit the pizza multiple times before the event began.

Meetup Pizza Calculator

If I had an abundance of time on my hands, it would be fun to dive more deeply into the study of social pizza-eating, but instead I addressed the problem by coming up with the following algorithm:

$attendees = $rsvps > 10 ? (.8*($rsvps-10))+10 : $rsvps;

$pizzas = $rsvps > 10 ? ($rsvps/(20/3))+1.5 : $rsvps/(10/3);

The first calculates the number of actual attendees based on RSVP count. It says if there are 10 or less RSVPs, we’ll likely get 100% attendance. Anything above 10 will be a gradient closer to 80% as your event gets larger.

The second takes the number of actual attendees and calculates the number of pizzas you’ll need based on consumption averages of that group size.

In tandem, they form the Meetup Pizza Calculator I’ve found to be fairly accurate—or at least much more so than guessing or assuming the false two slices per person.

http://www.stickielab.com/sandbox/pizza/

Meetup Pizza Calculator

Closing

There’s a disclaimer on the calculator, but I’ll repeat it here. The calculator assumes a lot of constants like: working professional adults, on a weeknight, at around the same time in the evening, with average-size large pizzas, etc. We’ve observed radical numbers when the weather is particularly bad, for example.

Other than that, if you’re organizing an evening office party, this might be useful to you. Also, I tried to be funny and hide Easter eggs in the numbers—but it’s geek humor. Just because I snort doesn’t mean you will. ;)

vector-lines-mast

Setting default stroke preferences in Photoshop CS6

Adobe’s last native version of Photoshop includes an obnoxious default stroke setting that puts a 50px dot border on every shape you draw. It’s tremendously annoying to have to remove it in every layer you create.

Photoshop stroke preferences demo before

Before

To change your defaults:

  1. Select your shape tool, but don’t draw anything yet.
  2. Ensure the type dropdown in the upper-left is set to “Shape”.
  3. Change your fill and stroke settings to whatever you want your defaults to be. In my case, I want to default to no stroke by setting no color, but have my default line styles be 1px and a solid line. That will additionally save time when I do want to add a stroke.
  4. Feel free to draw a shape, or close your document without saving. Your preferences are already set.
Photoshop stroke preferences demo after

After

mens-suits

Did the Internet kill suits? Dressing down for success

Times have changed. Ready-to-wear suits are out, not because we don’t like them or don’t have money, but because we can work in our underwear. For better or worse, today’s brand interaction is primarily in digital dress, replacing the door-to-door salesperson of yesteryear.

If you’re an investor, you’ve likely heard buzz about the possible consolidation of budget suit retailers Jos. A. Bank and Men’s Wearhouse. Mergers, acquisitions, and bankruptcies have little to do with the usual topics on the Brain Juice blog, but I feel the health of the suit industry does.

In last night’s Marketplace segment, the cited primary driver for the budget suit industry being in decline was the diminishing middle class. In fact, the middle class has seen a 25% reduction since 1970:

Decline of Middle Class

While I won’t deny that has some relevant impact on the number of suits being sold, I’ll hypothesize it is one of the most minor of drivers in this shift. What the chart above fails to note is that US population has grown by more than 50% since 1970, offsetting the decline in percentage with an increase in middle class workers.

A more telling chart is that of the increase in technology jobs, increase in online consumerism, or even this graph of the number of computer science related degrees:

Degrees Awarded to Computer and Information Sciences

That chart shows two peaks, following the introduction of the personal computer, then the introduction of the internet. We are in a third peak right now, following the rise of mobile devices and social media, with a 30% bump in computer science degree enrollments in 2012. In other words, since 1970, there have been a ton of computer science professionals entering the workforce every year and that number keeps growing.

Perhaps it’s causality, but it seems the rise of the technology industry is much more to blame for our reduced reliance upon suits. The business to consumer relationship of Mad Men era agencies and sales relied upon face-to-face interactions on doorsteps, in storefronts, on sidewalks, and with physical handshakes. The business suit, in many ways, was critical to professional success and considered an investment. Today, our mobile devices and social media channels are our smiles, slicked hair, buttoned-up brand, and digital handshake. We’ve traded runners and briefcases for today’s lovable geek and their toys that make our customers swoon:

Developers Comic

Is any of this bad? Not from my perspective. Unfortunately for the Jos. A. Bank and Men’s Wearhouse businesses of the world, suits are in decline. They won’t go the way of Blockbuster or Best Buy, but the suit will re-emerge as a fashion novelty for the dapper gentleman/gentlewoman (see the wristwatch) rather than acting as a catalyst for success in the consumer marketplace. Instead, businesses and professionals will continue to clamber to stand out as taller, shinier, and sharper in the increasingly congested digital neighborhood that is the Internet. Brands, suit up!

goldilocks-mast

Consumer engagement via the Goldilocks parable

This week, my wife and I shopped for a new car—a thorough process of “try and buy” I’d not undertaken before. In both excitement and intimidation, we ran an exhausting 8-hour marathon, kicking the tires on a dozen cars. In retrospect, it was apparent our final selection was impacted more by the brand courtship than the product itself, with all recommended cars fitting neatly into our minimal criteria. The consumer engagement styles divided into the following three approaches.

Style 1: Too hot

The first dealership swooped in as soon as we parked. We were greeted, asked a few intake questions, then excitedly shuttled around the lot to be impressed with the variety and options. We selected a couple cars to try and the salesperson rode shotgun, acting as tour guide. He gave the complete rundown on current discounts, safety ratings, things that make this dealership better than its siblings, passively insulting other car manufacturers, and making us feel as if we’d won the lottery by stepping onto this lot and into this prize. As soon as we identified our favorite among the fleet, he went by the book, walking us down the conveyor belt of closing the deal, discussing the finance process and evaluating our trade-in.

I halted the process there, politely letting him know we’d like to try some other dealerships and return by choice rather than settling on our first love. At this point, the relationship shifted. Threatened by the possibility of a lost sale, the dealership became clingy. They offered more discounts, not realizing it wasn’t about money. They tried to loan us their car to drive to other dealerships, convinced we would want to return (but requiring us to return regardless). The managerial big guns were pulled in to give additional incentives and pressure. The sell went from friendly to borderline aggressive. Like a bad date, our focus shifted from the building the relationship to finding an escape route.

Ultimately, what had been a positive sales experience we’d have likely returned to, we were relieved to escape from and intimidated to re-enter.

Style 2: Too cold

The second dealership we pulled into was refreshing in light of the previous. The lot was not swarming with salespeople—in fact, we probably could have browsed without ever being interrupted. We snagged a gentleman who was as pleasant as he could have been. We let him know what we were seeking and he handed us a few sets of keys, allowing us to take cars for a spin without his hovering or oversight.

We enjoyed this shopping experience, but without any sales pitch, we didn’t fall in love with the product. We didn’t know if there were any deals. We weren’t presented with notable differentiators. Walking away was so easy, it was also not memorable.

Style 3: Just right

We considered another couple cars and brands before landing in our final dealership. We weren’t intercepted in the parking lot, but were greeted on the sales floor. Our criteria were coaxed out of us with discussion of what we’d use the car for, rather than specifications. When the salesperson understood our goals, one appropriate recommendation was made.

The car was pulled around to us and was the only car presented. The salesperson initiated the test drive as the driver, giving an introduction to the features he already knew we were interested in. We pulled into a parking lot where we circled the car and traded spaces. The “test drive” then concluded the sales pitch and became conversational. We talked hobbies, football, and world events while winding through neighborhoods. My wife forgot she was test driving a car and the car became transparent. It was already hers.

Back at the dealership, he offered an opportunity for any additional questions before he left us in the lot to discuss privately. If we decided to buy, he’d be inside waiting, but otherwise he thanked us for the time we spent together and hoped we’d refer others even if the car wasn’t right for us.

We went back inside and we bought.

Lessons learned

In the end, none of the dealerships did anything particularly “bad”. They were all likely executing their corporate guidance and proven sales tactics. The techniques employed have all closed many deals and I cannot assume the final dealership gets any more business than the other two. However, building a positive brand relationship generates advocacy and loyalty more perennial than a near-term conversion. With that in mind, I can say what the final dealership did right:

  1. Account for a variety of user types, engaging them at their own pace. Identify passive browsers versus surgical, goal-driven users—adjust your tactics accordingly. Don’t overwhelm them with information they may or may not care about. Step away from the rehearsed sales pitch.
  2. Listen and make informed recommendations. Ask minimal questions, but the right questions. Remember your user often doesn’t speak your language, or know how to phrase what they are looking for. They’ve come to you for advice, not a referral for Google.
  3. Make your website or product invisible. It isn’t about the car, the website, or the service. It’s about carrying the user to where they need to be, and allowing them to enjoy the ride without worry over how the tool does its job.
  4. Don’t be clingy. If you’ve connected to your user thus far, you can walk away with your door open. Allow the user to come back and validate the brand relationship without stalking them via reminder emails, notifications, or late-night phone calls.
  5. Foster sharing. A user not needing your product or service today doesn’t equate to abandonment, despite what your analytics say. By following the above tips, you build brand advocates who promote referrals, and prime themselves to be qualified leads tomorrow. A positive experience is naturally viral.
pork-butts

OSS BBQ 2013: Setting the bar high for summer fun

This summer we held the 3rd-annual open source software barbeque (#OSSBBQ) in DC‚ an event many in the local tech crowd (including myself) get excited about ever year. It’s a social event for the DC PHP, jQuery, and WordPress meetup groups borne out of convenience (or inconvenience, rather).

In the spirit of open source, this post should give you a behind-the-scenes tour of how we pull it off. You can do it too!

Backstory

June is a historically difficult month to attract meetup speakers. In 2011 two of my groups suggested taking a month off, in lieu of skipping the month we decided to merge three meetups for an oversized social event that would cross-pollenate our memberships. We had a trailer smoker, sponsor connections, space provided by Fathom Creative, giveaway/swag submissions from a dozen vendors, and of course a lot of volunteers. OSSBBQ was born! We had no trouble maxing out our guest list. Feedback was nothing but positive.

OSS BBQ 2013, the chefs OSS BBQ 2013, the venue OSS BBQ 2013, food OSS BBQ 2013, the guests OSS BBQ 2013, beverages

Browse the full photo album of the event on Facebook.

Set a scope

The size was set by the venue and allowed around 250 people, so about 300 could RSVP and then we accounted for people coming and going at different times. Finding space for all of the food bought and cooked is always something I forget until I get home with it.

For your event you can decide to go bigger, but be sure to take into consideration the storage and transport of all of your supplies.

Scheduling

Our event encompassed a smoking day where the organizers bonded over a bonfire, beer, grilled snacks, dips in the pool, tending the smoker, and great conversation. That meant the chef needed to buy the meat on Saturday to rub and marinate it overnight so it was ready for smoking in the morning. The official event then kicked off on the following Monday or Tuesday evening, drawing a crowd of 300 into the hip Fathom Gallery and rooftop patio in Logan Circle.

Following the smoking, we have a pulling party to get it shredded with load balancing across people. It is very tiring work, so having a minimum of one person per two shoulders is ideal. We wet the pork with a bit of sauce, but not enough for flavoring.

On the day of, several of us take a half day. We set the time of the event to around 5:30. That gives us setup time after lunch and starts the event at a time striking an important balance: having patrons enter in a steady stream without all hitting at once, and without having reception twiddling thumbs. The average patron is getting off of work around 5:30 and they’re at variable distances from the event. You don’t want a dozen people to show up and have so few patrons the party seems lame, but you also don’t want to set the event for 7pm and have 275 of the guests hit at the same time.

We set an end time for the event, but that is a soft ending. Those who came only for free food will leave when it runs out. The friends will stick around afterward for the conversations and cleanup. In DC, meetups tend to break at 10pm, when you reach only the organizers and closest friends remaining for cleanup and picking over the refreshments. That timetable is magically no different for this big event.

  • For 300 people, we smoke around 100lb of pork shoulders from Costco. That ends up being eight packages, each around a dozen pounds, with two shoulders per package. We’ve gone up to 130lb and down to 80lb. We’ve never run out of meat 100%, but leftovers are good.
  • This year we underbought buns because we’ve had so many left in previous years. My original math was for 2 rolls per person, rounded down to 250 people. That ended up being entirely too liberal. This year, I went with 80% of 1 roll per person, rounded down to 250 (around 220 buns). We ran out of buns, but I heard no complaints about it happening too soon, so I’ll likely reuse that number next year.
  • For sides, we generally do a vegetable that keeps (bagged carrots are great), a fruit that keeps (grapes are good, berries get moldy quickly), lots of beans in a crockpot (we keep them vegan), multiple cookie/brownie trays, bags of chips (including veggie straws), tubs of bulk potato salad, and tubs of bulk coleslaw. If you can’t find slaw, find a restaurant to buy it from, or have someone make it.
  • Be sure to account for coolers and ice in your budget.

This is the loose budget we set for our event this year, based on actuals from last year:

  • $250 – Insurance
  • $100 – Firewood for smoker
  • $700 – Food & dinnerware
  • $750 – Beer
  • $100 – Incidentals (nametags, trash bags, etc.)
  • Total = $1900

For food and dinnerware, we came out to $530 this year, using a lot of supplies left from last year. That broke down as follows:

  • $200 for the pork shoulders
  • $80 for condiments (BBQ sauce variety, hot sauce, mustard, ketchup, salsa)
  • $50 for cookies & brownies
  • $50 for burgers (for non pork eaters)
  • $40 for grapes
  • $35 for foil & plates
  • $25 for buns
  • $20 for potato salad
  • $20 for cheese slices
  • $20 for beans
  • $15 for chips
  • $10 for Boca burgers

Getting sponsorship & swag

For monetary sponsorship, lean on your local community. Our organizers and members generally know companies who are always looking for opportunities to engage. We’ve never had a problem getting someone to step up. Allow for someone to either sponsor the who thing, or sponsor “food” or “beer”. Account for a sponsor promotion budget, if necessary, to make signs and banners. Fortunately, Fathom has provided that for our event.

For giveaway sponsors, Twitter is the best venue to solicit. Message all of your favorite open source projects and service providers (web hosts, registrars, version control systems, libraries, etc.) and ask if they are willing to donate. Most of them have swag in storage they will ship to you for just these types of events. The more giveaways, the better. We regularly get books, conference tickets, shirts, laptop bags, stickers, mugs, pens, cloth grocery bags, lanyards, bottle openers, and more.

  1. For big ticket items, do a business card bowl at registration and contact winners after the event. We tried raffle tickets in year one, but with a crowd that ebbs, this doesn’t work out well.
  2. For limited quantity items like shirts and bags, put a table at registration and allow first-come-first-served registrants to pick one.
  3. For all smaller items in bulk, scatter then in bowls and piles throughout the event to encourage wandering.

Other considerations

  • It’s too big of a crowd for games, but if you have some space, a lawn game of cornhole (e.g.) is good and people will use it.
  • For us, with the rooftop patio space, the weather is always a gamble. Account for all possibilities. We are going to invest in a tailgating tent to allow grilling in the rain. Two years in a row we’ve had spotty rain hassling us.
  • Buy event insurance if your venue doesn’t have it. We’ve never had to use it, but I don’t want to find out what happens when we do. We get ours from K&K, an online outfit.

Hopefully this collection of somewhat organized learnings gives you a sense of what it takes to pull off such an event and inspires your meetup group to give it a go. If you end up doing this, invite me. ; )

Recognition

A big thanks to this year’s event sponsors:

And swag donors:

Of course, props to all of our organizers:

beer-selection-mast

This beer, that beer, which beer: satisfying en masse

This week, I fired up my grill for the first time in 2013. That makes it BBQ season, soon to be beach season, and ultimately summer beer season. Choosing the right beer to use as your social event entrance fee, or to cater to your own guests, can sometimes feel like a special kind of PR strategy. What seems expensive, but not too expensive? What is fancy, but not too fancy? What has mass appeal, but still feels special? Before giving up and reaching for [brand] Light, here is a getting started guide based on my experience.

I’ve been active in the DC and Baltimore tech meetup communities for several years. Before that, I organized many (very large) college “off-campus social events”. My wife and I continue to host and attend a lot of reasonably-sized gatherings. The common thread among them is the difficulty in choosing an appropriate beer selection for a crowd—as an organizer or a contributing patron.

Getting the total volume of beer right is one chore, but getting beers the larger group will covet and compliment you on is another—because everyone has different tastes. It isn’t practical to get a dozen 6-packs for a small gathering, so most assume a couple 24’s of Joe Schmo Light is the safer choice. It isn’t. Not only will a lower volume of beverage be opened (affecting fun to be had), but you’ll find partial bottles littered about—because as the nickel beer warmed, it lost its refreshment and revealed a lack of flavor. Worse, as the beer enjoyer you are, you’ll be left sipping the cases of sad beer you’d hoped to burn through.

Over time, I’ve compiled a fairly solid mental list of beers that are both popular and easy* to find—having unscientifically observed the ice chest and which bottles are consumed first, last, or never. Each list is roughly ordered by popularity.

* I’m going by prevalence around DC/MD, but these are all nationally available brews. There may be a regional favorite I am not representing.

Default foundation (most popular)

  1. Yuengling
  2. Sam Adams (normal, Boston Lager)
  3. Dale’s Pale Ale (comes in a can)

Seasonal combo packs (great buy!)

  1. Sam Adams Seasonal (combo pack)
  2. Flying Dog (combo pack)
  3. Heavy Seas (combo pack)
  4. Dogfish Head (combo pack)

Pro tip: Seasonal combo packs from local breweries are often great choices because they quickly add variety and flare with very appealing price tags.

Additional light/medium selection

  1. Blue Moon
  2. Stella Artois
  3. Dos Equis
  4. Red Stripe
  5. Pabst Blue Ribbon
  6. St. Pauli Girl
  7. Negra Modelo
  8. Michelob Ultra Amber (the “Amber” is important)

Additional medium/dark/hoppy selection

  1. Sierra Nevada Pale Ale
  2. Yuengling Black & Tan
  3. Dos Equis Amber
  4. (anything by Flying Dog)
  5. (anything by Heavy Seas)
  6. (anything by Dogfish Head)
  7. Guinness

Something special

  1. Storm King Stout
  2. Sierra Nevada Stout
  3. (anything with a punny “hop” name like “Hopocalypse”)
  4. (anything by Rogue)
  5. (anything by Brooklyn Brewery)
  6. (anything regional and known to be good)

Seasonal/Fruity (buy very sparingly)

  1. Corona
  2. Mike’s Hard Lemonade (any flavor)
  3. Woodchuck Cider (any flavor)

In general, it is better to get one beer from several categories rather than multiple beers in the same category, as categories are grouped by type of drinker—thus an individual will often be attracted to most of a category. As you add variety, run through the categories in order, looping back to the top. For example, grabbing Yuengling, Blue Moon, Sierra Nevada Pale Ale, Storm King Stout then back to Sam Adams would make a very reasonable selection for a crowd you know little about. It isn’t perceived as a cheap selection (though it is budget-conscious) and there’s something for everyone.

Avoid

  1. (the usual budget/college/kegger beers)
  2. (oatmeal/cream stouts; their audience is too specific)
  3. (crazy stuff like blueberry, peppermint, etc. beers; pumpkin ales are the exception in autumn)

Pro tip: Though I enjoy them on my own, buy only minimum quantities of Becks, Heineken, Hefeweizen, and Lord Chesterfield Ale—for some reason, I’ve found them to be last-picked among a selection.

Cheers, prost, salut, and happy drinking! Don’t light the porch on fire.