Perspective, tips, and insight

Articles to help you improve your digital marketing

Two key steps for successful design and development project collaboration

Here at Indianapolis website design firm TBH Creative we have resources for all aspects of website development from discovery through design; from application development to website buildout. From time to time we run into a situation where our client is already tied to a development group and is just coming to us for our design expertise (or vice-versa).

How can you help separate design and development teams work well together? 

Here are two lessons from TBH Creative's experience.

1. Clear communication from the start

It's important to make sure that everyone has the same expectations from the very beginning. We recommend setting up a meeting to discuss:
  • What format of files does the developer need from the designer?
  • How will those files be transferred?
  • When will the designer have access to the pages for testing and review?
  • How will design tweaks and revisions be handled during testing?
  • What is the process when the developer has suggestions on the design related to performance or simplification in development time?
  • How closely will the final website match the design compositions?
Real life example: IUPPI
The Indiana University Public Policy Institute came to TBH Creative as they were undergoing a significant brand shift. In order to best communicate their expertise and services, they wanted to completely redesign their website making it easier to access their extensive database and presenting a more professional look.

The database is the core of the IUPPI website and is managed by a university development team. As part of Indiana University, the Institute was tied to this application development resource. The challenge was for TBH to work within the university constraints while also meeting the Institute's marketing challenges. TBH Creative worked on the strategy, design and created the HTML/CSS/JQuery and passed to the IU database team. They took the page code and connected to a robust CMS and database for easy client management.

We were successful because we started working with the database team from the very first meeting. They were in the loop long before their services were needed so they knew exactly what was coming and how to prepare their team. "Having the developers involved in the design presentation meetings was a huge help," notes Project Manager Barb Ruess. "They could see what features we were proposing, make recommendations on how to make those work seamlessly, and eliminate any surprises through the process."

Check out the final result: http://policyinstitute.iu.edu/


2. Present a unified front

It's likely that you know ahead of time that you'll be working together. Make a point of contacting your new partner on this project and schedule a meeting before you meet with the client. Things to discuss at this initial meeting:
  • Division of responsibilities: It's important to be clear to each other and the client so everyone knows who is responsible for key components. Discuss the details for transferring files, reviewing, feedback, scopes of work, etc.
  • Best way to communicate: Will you set up a shared Google Drive? Plan on weekly email updates? Talk on the phone every week? We also recommend you plan for "internal" reviews before showing the client so that the client never sees any differences of opinions and you present a more professional image.
  • Client knowledge: What do you each know about the client and the project? If you're going to be working together, you don't want to leave your partner in the dark (or be the one that's left behind). Share what you know - especially if you've worked with the client before. It will make for a better collaboration.
Real life example: Metropolitan School District of Lawrence Township
Sometimes the client finds a strong development group and that team seeks out TBH Creative as a design partner. Such was the case with the Metropolitan School District of Lawrence Township. MSD Lawrence came to BitWise to develop a robust, flexible website that could accommodate all of their schools and offices - a sum total of 21 different websites. BitWise knew that the design of these websites would be just as important as their development so that they presented a unified front to users. That's when they called TBH Creative.

Bjorn Carlson, Business Development Manager at BitWise notes, “The MSD of Lawrence Township project was a unique collaboration between the school district, the technical and functional expertise of BitWise Solutions, and the user experience and web design capabilities of TBH Creative. While these scenarios can often present distinct challenges, the partnership between BitWise and TBH Creative to deliver an outstanding product for the school district of Lawrence Township proved to be very fruitful.  With an extremely well-received and successful end result, Tatum and her crew really demonstrated why TBH Creative is a thought leader in the web design space.”

BitWise and TBH Creative came into the project as partners from the very beginning. They clearly understand each other's role in the project and were able to develop a work schedule and divide responsibilities to accomplish the client's goals.

Learn more about this project: A case study for flexible, functional design. 



Collaboration between designers and developers can be a positive learning experience where everyone is happy at the end of the day. What happens when it doesn't go quite so smoothly? Stay tuned next month when we reveal some lessons learned from projects that could have been handled better.



The pros and cons of hero graphics

Designing a website that will make an impact on its viewers can be tricky. There are lots of ways to capture attention and engage your audience, and choosing the best method for your website can be a challenge. One increasingly popular attention-grabber is the hero graphic.

A hero graphic is an introductory-type area of a website that generally consists of a large banner image accompanied by a minimal amount of text and/or a call to action. This typically is the first thing a user encounters on the homepage of a website.

Examples

Apple is well-know for a large hero area featuring their products.

Pottery Barn uses a hero area to promote important content such as sales.

Campbell's Kitchen Australia incorporates a recipe search into their hero area, while enticing users with photos of prepared recipes.

The Terra Nova Church website uses photos within its hero area to make an impact.

The Doris Research website incorporates its marketing message into its hero area.

Pros & Cons

As with any design element, the hero area has its pros and cons. Here are some things to take into consideration:

Pros

  • Focus viewer attention. A hero graphic creates one large focal point. This allows users to focus in on and connect with that particular piece of content, as opposed to multiple content areas competing for their attention. This makes hero areas great for displaying a call to action.
  • Make a first impression. A hero area should contain a meaningful message. This will generally be the first bit of content a user encounters on your site and associates with your business.
  • Encourage users to view more. A well-designed hero graphic will capture the attention of users. Once you've generated interest, users will be more likely to browse further into your site to find out more about your business. 
The Frangrance.ly site prompts users to view more by placing an arrow at the bottom of their hero area.
  • Flexible content. Hero graphics are a flexible design element. They can be used to put the focus on your most important content, whether that's a marketing message, advertisement, or featured product.

Cons

  • Takes up space. Most hero areas are very large, taking up a good amount of screen real estate. This can be an issue if it would be pushing down important content that users need to find quickly.
  • Hides additional content. Depending on how large your hero area is, it may be unclear to users that there is additional content below.
It may not be clear to users that there is more content below the hero area on the Alto Labs website.
  • Not as impactful for mobile devices. Another downside is that if your website is responsive, once your hero graphic is taken down to a size fit for mobile, it may lose it's visual impact.
  • Large loading time. If you're using a large banner image in your hero area, this could increase the loading time of your site.

Want more hero graphic inspiration? Check out some creative examples in our unique hero graphic showcase.

A case study for flexible, functional web design: Metropolitan School District of Lawrence Township

What do you do when you have 21 different websites and want them all to have a common appearance but a distinct identity? That was the challenge that the Metropolitan School District of Lawrence Township brought to TBH Creative and their partner on this project, BitWise Solutions.

The MSD of Lawrence Township consists of four early learning centers, 11 elementary schools, two middle schools, two high schools, and a Center for Innovation & Technology. Each of those school facilities needs its own website - and the district needs its own website that ties them all together. "The real challenge wasn't coming up with a consistent look and feel that best represents their image," notes TBH Creative President Tatum Hindman. "The real challenge was keeping that consistent look and feel while also giving each facility the opportunity to use their own pictures, logos and school colors."

Partnering for success

MSD of Lawrence Township called on BitWise Solutions to develop a website platform for all of their schools and the main district website. BitWise recognized the design challenge inherent to this project and called on TBH Creative to create a design that was attractive, flexible, and functional. These two Indianapolis website development firms have worked together before when they come across projects that best fit each other's strengths. Together they worked with MSD Lawrence Township to develop a website solution that met each school's needs while also best representing the district as a whole.

Bjorn Carlson, Business Development Manager at BitWise notes, “The MSD of Lawrence Township project was a unique collaboration between the school district, the technical and functional expertise of BitWise Solutions, and the user experience and web design capabilities of TBH Creative. While these scenarios can often present distinct challenges, the partnership between BitWise and TBH Creative to deliver an outstanding product for the school district of Lawrence Township proved to be very fruitful.  With an extremely well-received and successful end result, Tatum and her crew really demonstrated why TBH Creative is a thought leader in the web design space.”


The end result

A design that works well for all schools and offices
TBH Creative created a design that is flexible enough to give each school the freedom to share school colors and pictures of their students and school buildings. At the same time the design layout is the same across all 22 websites so that important information is easy to locate on any school website.

TBH Creative also designed a mega menu that is used on all sites making it easy to navigate between schools  – a great feature for parents with students in different grades.

A new way for the district to share timely information
One of the top needs for MSD Lawrence Township was the ability to use their websites to quickly and clearly inform their parents and partners of delays, schedule changes or weather cancellations. TBH Creative developed an alert that feature that does just that on all of the district's websites and is easy for staff to update whenever it is needed. Announcements, events, and news articles can be posted on the Global level (all 17 websites), District level (just the District site), or any individual website or combination therein.

A communication tool that is easy for the schools to use
BitWise used Kentico as the content management system behind the website. This easy-to-use, robust, and flexible CMS empowers each school and office with the ability to make their website truly their own. It was important the content management system was designed to accommodate various user roles and permissions. We were able to build a system that clearly gives access to multiple users:

  • Primary Webmaster – can edit, approve, administer all sites including global
  • Secondary Webmasters – have access only to their school’s static content
  • Associates – can create, edit, and remove the following for one or more locations: calendar entries, news articles, staff members, announcements, lists of extra-curricular clubs, and post documents to newsletters section.

TBH Creative was particularly thoughtful in the home page design to give each school flexibility and plenty of places to easily add current information. From the home page of each site you can see that BitWise and TBH were successful! The schools are making great use of the content management system. Each site profiles news, events, awards and more that are happening in their school community.

District home page composition with placeholder images, news, slider, and showing mega menu.

School home page example with alternative color following template.

Interior page sample with optional right column and announcement graphic template.

About the Metropolitan School District of Lawrence Township

Located just outside of Indianapolis, the Metropolitan School District of Lawrence Township serves approximately 15,000 students across four Early Learning Centers, eleven Elementary Schools, two Middle Schools, two High Schools and a Center for Innovation and Technology. Learn more at: https://www.ltschools.org/

Do you need to pull many different divisions together under one website roof? TBH Creative can help. Our services range from website design to application development, from mobile solutions to social media strategies. Learn more about our Indianapolis website design firm and share your Internet challenge with us. We look forward to helping you.

Top places your business should be on Social Media

Social media has been a fantastic marketing tool for small-medium size businesses. Customer relations, marketing, public relations and even market research can all be done on these free social networks. As social media channels explode in growth, you might be asking yourself: "Which social media channels should my business be using?" 

The answer varies a bit depending on your industry. A training company should certainly be posting videos on YouTube but may not fit the demographic on Pinterest. A jewelry designer should be on YouTube and Pinterest but may not see good results from Twitter. The bottom line is that you need to pick 1-3 social media channels that fit your marketing communications goals. It is far better to be smart and strategic - to do social media well - than it is to scatter yourself on every hot social media site and hope for the best.

Top Four Social Media Channels

aka the places where you should consider an active presence

Facebook It's one billion+ users are hard to ignore. Use Facebook to share your hours, engage with your customers, post special offers and share some behind the scenes fun. It's a great place to have some personality.

  • Who will you reach? Everyone. Though users tend to be primarily female and in the 18-29 year old age range. But trends are showing that age range getting older each year. According to a Pew Research study last fall, 71% of all adults are using Facebook.
  • Who's doing it well: Burt's Bees https://www.facebook.com/burtsbees You'll find related content (read: not just product promotions), coupons and high interactivity. No wonder they have over 2 million likes!
Twitter is built for short, clear communication - share offers, incentives and events. And you might be surprised at just how effective those 140 characters can be: A recent Twitter survey shows that 60% of respondents have purchased something from a small-medium size business because of Twitter and 43% intend to purchase regularly.


  • Who will you reach? Twitter seems to be the great equalizer of demographics. It is equally used by men and women, it trends higher in the 18-29 age group but the 30-49 age range isn't far behind.
  • Who's doing it well: Etsy @etsy Etsy posts customer reviews, highlights new products and uses Twitter as a direct connection for customer service. 
LinkedIn: Let's get down to business. Company announcements, employee connections and more all belong on LinkedIn.


  • Who will you reach? Professionals with college degrees or higher. More men use LinkedIn than women and it should come as no surprise that most of its well-educated users fall between the ages of 30-64.
  • Who's doing it well: NPR https://www.linkedin.com/company/npr Yes, they post career information and give a sense of their organizational personality. But they also post interesting, truly valuable information. Fits with the culture and helps connect with people all at the same time.
YouTube The home to video tutorials on anything under the sun and clips from your favorite tv shows - YouTube is a great tool for businesses to post their own video communications.


  • Who will you reach? everyone. Over three billion hours of video are watched on YouTube each month. These videos are shared across other social media channels and websites. 
  • Who's doing it well: Kraft https://www.youtube.com/user/KraftCookingSchool Kraft has done a remarkable job featuring itself and its products on YouTube. It's main channel includes cooking demonstrations with recipes, television spots and uploaded videos from "fans" of Kraft. They also have set up channels for each product line. 

Our Social Media Honorable Mention

Are there other social media channels you should consider? Sure! Talk to your customers and ask them what social media options they use and start exploring your options. Here are a few you might want to check out:

Pinterest: Think of Pinterest as a series of bulletin boards. People "pin" things they want to try or do or buy. If you have a product or service that is communicated well with pictures this could be the place for you.

Instagram: Instagram is a photo networking service. Similar to Facebook, you have a bit more space to share your ideas in a caption but the focus is all on the picture. For an example of a company that's using Instagram well - check out Starbucks: http://instagram.com/starbucks

FourSquare: Perhaps the best way to describe FourSquare is as a social city guide. If you operate a retail business or restaurant, you should definitely look at how you can leverage FourSquare to increase awareness and attract more customers.

Google+: has gotten a bad rap in some circles and with Google scaling back on its involvement in this social tool, it's not worthy of the top five. Still, it can be helpful as an SEO boost. It's tools are also excellent to use for customer engagement and to host a live video conference

The Bottom Line

No matter where you choose to be - follow good communication standards. Post regularly. Target your message. Ask for engagement. Promptly respond to queries. Remember that hard selling doesn't work on these communication channels - participation and sharing are where it's at. Want to learn more? Check out these great articles:

Note demographic data taken from Pew Research Center Study 

Want to know how you can make the most of social media? We can help you with everything from developing a social media strategy to writing ghost posts. TBH Creative is an Indianapolis-based Internet Strategy Agency. Our services include web strategy & planning, website design, mobile solutions, application development, and analytic reporting. Contact TBH Creative and ask how to get started with your social media plan.

Using web analytics to improve your website

So you have analytics set-up for your site - but now what? Consistently evaluating your analytics data will help you to better understand your website’s audience and adjust your marketing strategies and objectives as necessary. Analytics reports provide valuable insight into a website’s strengths and weaknesses, and can help you to pinpoint the areas on your website that could benefit from improvements.

This article will help get you started analyzing your website's data by providing interpretations of common analytics statistics, such as: audience demographic, returning visitors, traffic sources, keywords, page views, visit duration, exit rate, and user technology. It will focus specifically on Google Analytics, one of the most popular choices for web analytics.

Goals

Before diving in to interpreting your data, you’ll need to set some Goals for your website. Goals will help you to monitor how successfully your website is meeting your objectives by tracking Goal conversions. As Google explains, “a Goal conversion occurs once a user completes a desired action on your site, such as a registration or download.” So, you must determine what a successful visit to your site should entail, and set up your Goals accordingly. For example, you may set a Goal that tracks purchases from your website, or how much time a user spends on a page. Once your Goals are set, you can use your analytics data to determine what aspects of your website are successful, and what areas need to be improved to better support your objectives.

Audience demographic

Google Analytics can tell you all kinds of facts about your website visitors: geographic location, age, gender, and more. Take a close look at these statistics, and determine if they align with your website’s target audience. If not, adjust your site to attract the right demographic. For more information about understanding your audience, check out our post on developing audience personas.

Returning visitors

If your goal is to keep users frequently visiting your website, then the amount of returning visitors is a useful piece of data. If you don't have a high number of returning visitors, first narrow down what aspect of your site is the culprit. Sometimes, this is a result of users being driven away by design flaws such as a poor navigation or a confusing layout, requiring improvements to the website’s design. Other times, it’s caused by lack of engaging content on the website. One way remedy this is to increase the amount of dynamic content. For example, implementing a blog or a news area that is frequently updated will increase the chance of a user consistently coming back for new content.

Traffic sources

Google Analytics can tell you how users are getting to your site. They might be going there directly, finding your website in search engines, or following links on social networks or other websites. This information will help you to determine if one of these sources is not generating enough traffic, thus showing you where to focus your efforts. For example, if you find that you are not getting many users coming to your website from search engines, you might need to improve your website’s search engine optimization. Or, if you find that a large number of users are coming from social networks such as Facebook, consider focusing your efforts on promoting your website through social media.

Search keywords

Another key web traffic statistic that Google Analytics generates is what keywords users are searching for to get to your site. It’s important to evaluate this list and determine if you are targeting the appropriate keywords in your content. If any of your major keywords are missing from this list, investigate why users are not getting to your site using those search terms.


Sessions / Users

A session is the period time a user is actively engaged with your website including screen views and events. Sessions are counted multiple times whereas Users are counted as one session within the selected date range for both new and returning users. The Users metric is more valuable to evaluate an accurate number of visitors during a period of time.

Pageviews

The pageviews statistic is the total number of pages viewed. Repeated views of a single page are counted. Google Analytics also provides pages per session, which can be more useful in that it filters out multiple pageviews by a single user per visit (e.g. if the user refreshes the page, this isn't counted as a new pageview). It also gives you an idea of how many pages a user is looking at (on average) per visit.

By looking at Behavior > Site Content, you can determine what pages on your site are the most popular as well as where users start and leave the site more frequently. If users are not visiting certain pages on your site as frequently as you would like, you should make those pages easier to find, and consider implementing call-out areas across your site that link to those pages. Also, you can use the most visited pages on your website to promote important content, making it more likely to be seen by users.

Session duration

Session duration provides the average length of time a user stays on your website. As with the returning visitors data, session duration can be improved by implementing more engaging and dynamic content. If your content is interesting, users will be more likely to keep browsing. A low visit duration could also mean that users aren’t finding the content they need and thus are leaving too quickly. Make sure your site is easy to navigate and that users can easily access important content. Rich and engaging web content tends to increase the session duration as well as improve the user experience. Videos on your website are one type of content that help increase session duration.

Exit rate

The exit rate for a page tells you how many users left your site on that particular page. This is not necessarily a bad thing, as it can indicate that users are finding the content they need on that page, and then leaving the site. However, if a page has a high exit rate, consider adding content to that page that will promote further site exploration. For example, if it’s a page with product information, include links to related products that users might be interested in viewing.

(CC0 1.0 - Alejandro Escamilla)

User technology

Google Analytics provides information about the technology used by your website’s visitors, including details such as device, browser, and operating system. This data is crucial in determining if your website is meeting the technology needs of all users, and you can use these statistics to improve your website’s overall user experience. For example, if you find that a large number of your users are using a specific web browser, ensure that your website is fully optimized for that browser. Furthermore, if the majority of your users are accessing your website from a mobile device, make sure your website is mobile accessible. You can look at the different types of devices your visitors are using to help determine what mobile solution would work best for your website.

These tips should help you get started with evaluating your website data and putting your findings to use. User these metrics and compare them over time to see the trends of your users and evaluate the effectiveness of your marketing tactics. And this is just scratching the surface of what can be done using Google Analytics. Learn more at www.google.com/analytics.

Receive articles in your inbox