Small town business are at the heart of our client base. When Bippus State Bank, a Huntington-based bank in northeast Indiana, said they needed a refresh, we were excited to work with them! Their long history and commitment to their community in Huntington, Roanoke, and Manchester, Indiana is laudable. In a time when banks merge with each other to gain profits, BSB stays independent and local.

One thing was clear – BSB needed and wanted a content management system so they could be in control of their content. Instead of editing static HTML in Dreamweaver, we upgraded them to ExpressionEngine, a PHP-based CMS complete with CSS styling to promote a consistent, modern look and feel, with beautiful, bold typography.

Beautifully styled tables with easy-to-update rates and product matrices.

Some other great features:

• Special content types for bank and ATM locations, that dynamically interact with Google Maps to provide custom directions. This increases the scalability and longevity of the site, as BSB expands and adds locations and ATMs.
• Specially-styled rate tables that display interest rates, product matrices, and structured information in a consistent and easy-to-read manner.
• A Javascript rotating banner and promotion carousel on the homepage, so BSB can constantly display new and refreshed information.
• A restyled portal to their online banking system — allowing customers to login from the homepage without interrupting their user experience.

We’re glad we can help the great staff at Bippus State Bank take control of their content and stay on the leading edge with their website.

Check out their site at BippusBank.com! And click below to see some additional screenshots from Bippus Bank’s website.

We had the opportunity to help them create their first website. When we built it out in ExpressionEngine, we knew they needed some strong photography, clear messaging and a straightforward navigation. We did just that. With simple, easy language, vivid pictures and bold primary colors, they emanate stability, rationality and friendliness; all the staples of a good insurance agency.

Be sure to find the automatically updated articles posted via Trusted Choice, an authorizing agency for independent insurance agents, and a custom “Meet the Team” page that expands contact information for each of their agents and staff!

Check them out!

Some screengrabs:

If you are a social media professional, or really even just follow me on Twitter, none of this is a groundbreaker to you — I’ve expressed my thoughts pretty well as I went along. But this could be a useful summary if you can or want to use social media like I do — enthusiastically.

Most useful social media service: Twitter

I really ramped up my Twitter power usage when I was an online community manager. This was my main method of customer outreach and discovery, and I learned a lot about targeting keywords to monitor, detecting trends and interaction rates — and most importantly — paring down my thoughts and words into 140 characters or less. I learned and accepted that Twitter isn’t meant to be a medium for meaningful conversation, but a great conversation starter, and one that allows users (both marketers and personal tweeters) to look out into the world and find lots of content that’s relevant to their interests.

There’s an online community for just about everything — wooden pencil enthusiasts, typewriters, underwater basket

Most fun social media service: Tumblr

I’ve had Tumblr for a long time — I signed up just four months after it launched in February of 2007, and I’ve loved it ever since. While I admit it isn’t the most useful platform for a business, it is just a great way to be a fan and to celebrate your fandom. I follow blogs about Doctor Who, office supplies, fashion, NPR, general memes, politicians, celebrities and friends. I’ve started blogs about sweatervests, alternate universes, and more. It’s messy, it’s casual and it’s wonderful. And after I installed a browser extension called “missing e“, it’s gotten a lot easier to navigate the Dashboard, Tumblr’s internal community interface. Tumblr, Y U NO buy them out and integrate this into your dashboard natively?!

Prettiest SM interface: Path 2

Path has been around for a couple years, but only last month did they completely change their interface. And change it they did! It’s quick, it’s pretty, and it’s simple. Our lead designer, Aaron Bushnell, blogged about the “+” button to add a status update, a picture, a check-in, or what-have-you. And their website features a huge video that really makes it come alive, but stays simple.

The trouble is, I don’t find Path particularly useful or fulfilling in any ways other than as a pretty interface that integrates with some of the more establish mediums: Facebook, Foursquare, Twitter, or Tumblr. It’s fun to have a little elite network of maybe 20 or so friends who are “in the know” on Path so I can share pictures and check-ins with them (I’m talking to you, @theamazingben), but I think its exclusivity is it’s downfall — it limits users to just 150 friends. I understand their reasoning, but I’m not sure I agree with it.

Most Impactful: Instagram

Instagram, the iPhone-only photo sharing app, has been around for only since October of 2010, but as of August of this year, had 150 million users! While there are those out there who are not a fan of morphing your photos with filters to make them look like vintage film cameras, I think they look great and can really convey the personality of the photographer.

It’s a cliche to say that a picture’s worth a thousand words, but Instagram really puts that theory into practice. I can follow everything from cute cat photos from a friend of mine to photos by ABC World News foreign correspondents. And with great, smart integration into Twitter, Facebook, Tumblr and Foursquare, you can reach a broader audience with it, not just those who use iPhones.

And according to Kevin Systrom, Instagram’s CEO, they’re working on an Android app!

Most Disappointing: WordPress

I want to be careful here, because I use WordPress A LOT. My personal blog is in WP, my pencil blog is in WP, THIS blog is in WP, and sometimes we develop in WP. It’s still one of the most cathardic social mediums for my journalist’s soul, as I can share my long form writing in the most uninhibited way possible.

I should preface it by saying that WordPress really does a lot of great work, and if you use a self-hosted WP blog it lets you tweak to your heart’s content. The nice thing about it is that self-hosted WP blogs (distinguished from the WP-hosted blogs as WordPress.org rather than WordPress.com) is that they’ve always been free and open source.

While they haven’t necessarily made their intentions clear, WordPress seems like it’s moving WP.org to more of a WP.com way of business. They have a new service called Jetpack, which will integrate your .org blog more with the .com service, and on the .com service, they’re charging more and more just to use anything more than the basic blogging functions. New users who want to integrate their WP.com API key into their WP.org blog (To use the spam-blocking plugin, or to get detailed site stats) have to pay. It’s starting to feel a lot like the antiquated TypePad or the expensive SquareSpace blogging platforms.

That being said, I’ll probably keep on using it, barring any major changes or new blogging platforms. I simply have more control over my blog than, say, Tumblr, and the themes are WAY prettier than anything you can find on, say, Blogger.com.

To wrap up

You’ll notice some of the big players isn’t on here — Facebook and Google Plus, to name a couple. That’s not to say that they haven’t innovated or been extremely relevant. I just don’t think they’ve really caught my attention like the media above.

What did you use most in 2011? What do you think think 2012 will bring for you?

We recently had the privilege of creating the website for Fort Wayne Trails, a brand-new nonprofit in the Fort Wayne area that fundraises and advocates for this extensive trail system. Merged from three separate nonprofits: Aboite New Trails, the Greenway Consortium, and Northwest Allen County Trails; Fort Wayne Trails has the unique challenge of working with the Fort Wayne and Allen County governments in building these trails and raising public awareness.

So when we got the chance to create Fort Wayne Trails’ website, we jumped at the chance.

Because of the widespread community support, Fort Wayne Trails has some great partners in the community. One Lucky Guitar, a groundbreaking local marketing and design boutique (with some of the best work coming out of Fort Wayne), created the brand identity and print collateral for the Trails. Read about the design process on OLG’s blog, The Dial, here and here.

Working closely with the FWT Promotions Committee, we took a design created by designers on the committee, tweaked it a bit, and adapted it to fit with ExpressionEngine, our CMS of choice.

Some great features to note:

• A “Photos” page, aggregating pictures from a predefined set in FWT’s Flickr account
• A rotating slider on the homepage, displaying photos and messages set by the client
• Popovers with explanations of the many uses of the trails, with icons ingeniously created by One Lucky Guitar
• A made-from-scratch mapping functionality that overlays Google Maps’ KML files over a map. Users can turn each layer one and off, depending on what they want to route
• Blogging functionality
• Events calendar

While FWT’s outdoor events on the trails are on hold until the weather gets warmer, they’re hard at work, planning, coordinating, raising money, and making sure as many people as possible are connected to each other and points of attraction!

Why don’t you go over to their new website and take a look at who they are and what they do! And if you are able, please consider giving a gift of support — every penny they raise goes to a great cause!

This is only the beginning of our work with Fort Wayne Trails. While we can’t get into our future plans, stay tuned!

Visit Fort Wayne Trails, Inc: fwtrails.org

Our designers have been talking a lot about responsive web design, a concept we became excited about after reading A Book Apart‘s book on Responsive Web Design. On their website, they quote John Allsopp’s article, “A Dao of Web Design“:

The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things.”

Basically, he calls for an end to thinking of a website as an extension of a static, print brochure, and acknowledged that web traffic is trending to a higher percentage of mobile browsers. So many websites that are “optimized for mobile” are pieced together, as a stripped-down afterthought to a desktop browser-width site.

Responsive design changes that. A responsive website designs a layout for a desktop/laptop, tablet, and mobile browser alongside each other, and uses media queries to determine what type of browser is loading the site. Best yet, it’s a fluid, dynamic layout. If you resize the window in your desktop browser, it will reorder and rescale in front of your eyes. (Click the website screengrab and try for yourself! If you make the window narrower, you can see how it scales and reorders information.

If you scale the Jeffrey-Mohr website smaller, you can see how the header image, slow-loading on a browser running on 3G, switches out, and the phone number displays more prominently on the screen. And if your mobile browser is a phone, the phone number becomes clickable so you can call their office right from the website.

This is the future of web design. We’re making a commitment to make as many of our web projects as responsive as we can to give a site longevity. Right now, we’re at the forefront of this technology, and we hope that more in the industry will follow. We’ll be talking more and more about responsive design here.

Meanwhile, we’re excited to launch this site! If you ever need a dentist in the Van Wert Area, go meet Dr. Jessica Mohr. She’s friendly, gentle, and community driven. Cruise on by her and her father’s website, whether on your desktop, laptop, tablet, or phone, and check them out!

UsabilityHub.com is a great tool for designers and developers, and one we just started using. In a nutshell, it lets you (for free or a nominal charge) run a few different kinds of tests in order to gain feedback on how intuitively your site works! With UsabilityHub, there are three different kinds of testing options:

• The Five-Second Test: Helps you fine tune your landing pages and calls to action by analyzing the most prominent elements of your design.
• The Click Test: Tweak your interfaces by finding out exactly where your users click when interacting with them.
• The NavFlow Test: Helps you improve your conversion rates by analyzing how people navigate around your websites and applications.

Just last week, we had a project for a great company with a wide network of independent sales reps covering different territories. The client wanted an easy, useful solution for locating these reps, so their customers could find a rep and his/her contact information via location, industry, or both.

We started with this design:

And decided we wanted to run it through the Click Test. It would record where our test subjects were intuitively likely to click, given very little context. We presented users with a simple scenario (“Imagine you are looking for a mining equipment dealer in Ohio”) and started the test.

Test 1 Results

A short few hours later, we had 50 results, and this is what it looked like:

Neverminding all the people who clicked on the “Find a Sales Rep” button in the navbar, since we were on that page already (our mistake for including that in the test — we shouldn’t assume that the test-takers would know that already.), we noticed that people were clicking the “Locations” dropdown, but not really the “All” dropdown, which sorted by industry. Our goal was to have an equal amount of clickers on each of those options.

Why was this? After staring at it for a while, we realized we needed to change the wording. Since our users just saw “All” as an option, they had no idea what the “All” was for! All reps? All locations? All pants sizes? We had to add a bit of context so users realized this is where we’d ask them to sort by machine types or industry served by the rep.

After a quick change from “All” to “All machine and industry,” we tried the test again.

Test Two Results

After a short wait, we got our results back:

It worked great! There was still a majority of clicks on the By Location tab, but these results were much closer to what we were trying to accomplish, demonstrating that the interface was much easier to interpret and more user-friendly.

Amazing what change minor word edit can make. We are usability test believers now.

Have you run usability tests on your web projects? Did it help?

That’s why we were thrilled to be featured on EllisLab’s ExpressionEngine showcase this week, of the best new ExpressionEngine-equipped sites on the web! Our newly-launched solution for Ideal Suburban Homes caught their attention, as an example of how many different types of data can interact with each other (see our launch post, here).

A quote pulled by ExpressionEngine from our lead design, Aaron Bushnell:

Having custom content types allows us to ask only for the important information and then display that data on the site in numerous locations automatically. It, simply, allows the client to spend less time in the CMS and more time focused on their business.

Thanks, EllisLabs, for putting us in the spotlight!

Read more about ExpressionEngine here.

The boring, yet needed, introduction

We recently launched a site that utilizes Solspace Super Search and Malsup’s jQuery Form plugin for a handy AJAX filter. The filter simply gathers homes that fit certain parameters such as “number of bedrooms”, “number of bathrooms”, “square footage”, etc.

Luckily, Super Search and Malsup’s Form Plugin takes 99% of the work out of all this and you get to look like you know what you’re doing.

For this tutorial, I’m going to assume a few things:

1. You know your way around ExpressionEngine
2. You have a “Homes” channel setup and some entries with custom fields like “Bedrooms (select dropdown)”, “Bathrooms (select dropdown)”, and “Square Footage (text input)”
3. You know how to setup jQuery plugins on your site
4. You have no clue how to setup AJAX anything (I didn’t when we set this up)

A note: Within Super Search, you need to change your “Square Footage” field to an integer. This will allow you to search the value numerically rather than textually.

So, let’s get started.

The business

Demo: A (more developed) example of the final product.

Your basic template with filter (search/index):

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Search for a Home</title>
    <meta charset="utf-8">
    {!-- jQuery, Malsup's Form Plugin, script for the Form Plugin --}
    <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
    <script src="http://jquery.malsup.com/form/jquery.form.js"></script>
    <script>
        $(document).ready(function() {
            var options = {
                target: '#results',
                beforeSubmit:  showRequest
            };
            $('#filter').ajaxForm(options);
        });
        
        // Show loading message and submit form
        function showRequest(formData, jqForm, options) {
            $('#results').prepend('<span>Searching</span>');    
            return true;
        }
    </script>
</head>
<body>
    <h1>Search for a Home</h1>
    
    {!-- This is where the results of the filter will be placed into. You can insert stuff in here initially, but it will be replaced by results when the form is used. --}
    <div id="results">
        <p>I will be replaced when you search. Sad day.</p>
    </div>
    
    {!-- The form to filter your results. Note the template I am using in the action parameter in the form tag --}
    <form id="filter" method="post" action="{path='search/results'}">
        {exp:super_search:search}
            <label>
                Bedrooms
                <select name="bedrooms-from">
                    <option value="1">1+</option>
                    <option value="2">2+</option>
                    <option value="3">3+</option>
                    <option value="4">4+</option>
                    <option value="5">5+</option>
                    <option value="6">6+</option>
                    <option value="7">7+</option>
                    <option value="8">8+</option>
                    <option value="9">9+</option>
                    <option value="10">10+</option>
                </select>
            </label>
            
            <label>
                Bathrooms
                <select name="bathrooms-from">
                    <option value="1">1+</option>
                    <option value="2">2+</option>
                    <option value="3">3+</option>
                    <option value="4">4+</option>
                    <option value="5">5+</option>
                    <option value="6">6+</option>
                    <option value="7">7+</option>
                    <option value="8">8+</option>
                    <option value="9">9+</option>
                    <option value="10">10+</option>
                </select>
            </label>
                    
            <label>
                Square Footage (Min)
                <select name="square_feet-from">
                    <option value="">All</option>
                    <option value="200">200</option>
                    <option value="400">400</option>
                    <option value="600">600</option>
                    <option value="800">800</option>
                    <option value="1000">1,000</option>
                    <option value="1200">1,200</option>
                    <option value="1400">1,400</option>
                    <option value="1600">1,600</option>
                    <option value="1800">1,800</option>
                    <option value="2000">2,000</option>
                    <option value="2200">2,200</option>
                    <option value="2400">2,400</option>
                    <option value="2600">2,600</option>
                    <option value="2800">2,800</option>
                    <option value="3000">3,000</option>
                </select>
            </label>
            <label>
                Square Footage (Max)
                <select name="square_feet-to">
                    <option value="">All</option>
                    <option value="200">200</option>
                    <option value="400">400</option>
                    <option value="600">600</option>
                    <option value="800">800</option>
                    <option value="1000">1,000</option>
                    <option value="1200">1,200</option>
                    <option value="1400">1,400</option>
                    <option value="1600">1,600</option>
                    <option value="1800">1,800</option>
                    <option value="2000">2,000</option>
                    <option value="2200">2,200</option>
                    <option value="2400">2,400</option>
                    <option value="2600">2,600</option>
                    <option value="2800">2,800</option>
                    <option value="3000">3,000</option>
                </select>
            </label>      
            <input type="submit" name="submit" value="Search" />
        {/exp:super_search:search}
    </form>
</body>
</html>

									

Your results template (search/results):

{exp:super_search:results channel="home"}
    {if super_search_no_results}
        <p>No homes were found for your search. Try being less specific with your filter.</p>
    {/if}
    <div class="result">
        <h3>{title}</h3>
        <p>This home has {bedrooms} bedrooms, {bathrooms} bathrooms, and is {square_feet} square feet.</p>
    </div>
{/exp:super_search:results}
									

The End

So, that’s it. Again, it’s the wonderful developers who make complicated things really easy. Massive props to Solspace and Malsup.

We just launched the Ideal Suburban Homes site yesterday, and we’re all very excited to see it in action! It’s one of the most detailed sites we’ve done yet.

Utilizing the power of the Expression Engine content management system (our CMS of choice), we wanted to make sure we had an attractive, functional website for this organization that makes and sells attractive, functional homes.

Ideal Homes has built more than 35 communities around northeast Indiana, and is unrivaled in their craftmanship, style and stability. They came to us wanting a system with highly-connected relationship matrix for its data: Realtors, prices, floorplans, locations, communities, and more. On top of that, they needed something highly visual with an eye-catching design. We got our good friend Matt at Matt Ayers Photography to take some amazing snapshots of these homes.

A sampling of the features of this site:

• Filter homes by number of bedrooms, bathrooms, price, square footage, and more
• View homes in a list or a map
• News and events listings
• FAQ page for current or soon-to-be homeowners
• A detailed testimonial page and the ability to submit your own, and reference your home community and/or realtor
• A payment calculator
• Share homes, communities and floor plans via email or social network
• Get agent information from the house pages

One of our favorite functionalities is the banner that pops down when you click the “View our Communities” button at the top. Sometimes we just sit at our desks and click it. Try it out for yourself!

IMAGE GALLERY: