Book Archives

The biggest reason a site or app launch is delayed for marketing reasons comes down to content. Do not underestimate how difficult and tedious it can be to assemble everything needed to go on a web page or mobile app. The “gotchas” crop up if you’re not planning.

Here’s a quick checklist for a workflow for building digital properties to make sure this doesn’t happen to you:

1. Get Approved. Have sitemap approval for the main pages and blog categories, all creative, and interactive wireframes. Do this in writing with the key stakeholders. It’s like approving blueprints before breaking ground on a new building.
2. Start Collecting. Following approval on design, begin assembling the assets according to the sitemap. These include things like SEO ready copy, compressed image files, downloads, and video.
3. Load Ahead of Time. If your team will be administering the digital property, ask for early access to the Content Management System (CMS). This is what will serve up the content. Being able to seed the CMS with content ahead of time makes it easier to spot bugs and develop a workflow between the development, creative and marketing teams.
4. Test. Test. Test – across all devices. Everything digital is driven with code. Code inevitably has bugs. Work closely with your development team to capture and fix these in a way that makes sense for them. Tip: A screenshot, the browser, and a URL if it’s on a website is super helpful for developers to go in and quickly identify the problem. “The website is broken” is like dropping your car off at the mechanic leaving a note that says it doesn’t work. Be as specific as possible.
5. Underpromise and overdeliver. Give yourself a few weeks or even months lead-time on the launch. Set an internal date for the team but keep it private from management. Whatever management hears for the day the new site or app is live is what they’ll expect to see. Inevitably there will be some delays. If these are major hiccups it can be very stressful to try and troubleshoot under a blown deadline. Build this into your timeline and you’ll look like a rock-star for hitting the launch date with the head honchos.

All types of digital technology creation typically follow a predicted emotional flow:

1. Architecting the sitemap and the user experience quickly gets tedious and boring. “Can’t we just get on with how it will look?”
2. Next, comes creative and everyone loves the colors, fonts, and interactivity. “This is going to be the best website every built.”
3. This quickly subsides when it comes time to collect all the content per the sitemap. “What goes on this page again?”
4. Over time anxiety builds, as the development inevitably takes longer. “Aren’t they done coding this thing yet?”
5. Euphoria on launch date. “Whoo hoo, this is going to change our business”
6. Apathy. Nobody thinks about the site or app again until the next budget cycle. “We’re done!”

Key Takeaway: Getting a site or app launched is indeed a major milestone. But it’s really just the start of the race not the finish line. It takes ongoing focus and dedication to make the digital property perform. However, using a solid process and workflow for building digital properties will make sure you arrive at the finish line ready to use the new digital properties to their fullest.

How to Prototype a Website

Our goal with using tools like sitemaps and wireframes is to think through and deliver a solid user experience using our User Persona as a guide. This level of abstraction helps us communicate with key stakeholders like management and most importantly the development and design teams.

As the digital marketer you’re often expected to wear many hats and having the tools to communicate to different audiences is critical.

Interactive Wireframes as Quick Prototypes

Once you’ve roughed out the wireframes and sitemap, your development team might use a tool like Twitter Bootstrap. This free framework allows the dev team to quickly code up different page layouts and essentially “prototype” a website or app with very little time invested. We tend to call these interactive wireframes.

As a result, an effect called the “browser epiphany” starts to occur. This is where the flaws in the wireframes and the architecture suddenly emerge when the site or app is interacted with on the desktop or mobile device. Ideally, a company has strong relationships with existing or potential customers and these prototypes can be put in front of these existing users for instant feedback.

Key takeaway: You will save money and deliver a better experience if you adopt this workflow for developing technology. Software development is expensive and you want to minimize wasting programming resources by ensuring you have mapped out a great user experience before it goes into final production.

Polishing Wireframes

Following an “interactive wireframe” stage, the designs are ready to get polished up. This is where a talented design team can play a critical role. Remember the goal of a digital property is to integrate into the overall brand experience. Things like brand identity, color palette, copy, images, etc these all have to be carefully aligned with the brand’s other marketing collateral.

Usually, a website or app has repeatable elements used throughout the experience. Often times there will be the following templates:

• Homepage or welcome screen on a mobile device – can include a login.
• General information or text page with a sidebar to the left or right.
• Blog summary page showing a short snippet of text and an image for that post.
• A media page layout for pictures, video, social feeds.
• Forms page for logging in or submitting contact requests.
• Social feed for either pulling in feeds or clicking into the brand’s other social properties.

As the design team works through these page templates, the tested interactive wireframes serve as an excellent guide.

From here the creative will get handed off to the development team, commonly known as coders. To stay on deadline, solid wirefames and call outs of interactivity elements are critical for communicating back and forth across the technical divide.

Key Takeaway: You can set yourself apart as a digital marketer by not being intimidated by the technology and instead delving into understanding as much as you can and being fluent with these communication tools.

Using our sitemap we can lay out the architecture of our new website. A couple key things to keep in mind:

• Simplicity wins in digital.
• No more than 5 -7 major sections should appear in the main navigation.
• Strive to keep drop-downs to a minimum.
• A Blog can become a site within a site using blog categories to keep the navigation clean.

Wait…what is a blog?

Originally coined as a phrase “web log” in the late 1990s, blogging has risen to prominence as a fundamental disruptive media technology. With the ever-ongoing ease of Content Management Systems (CMS) and easier and easier interfaces, blogs have become a powerful way for everyday people to publish content on the web and get their voice heard.

Why is this so?

With the fundamental laws we’ve seen of Moore’s Law (technology gets cheaper and faster) and Long Tail (an audience for everything), niche blogs are proving to be every bit as influential as traditional media outlets. Their power lies in their ability to attract a passionate audience by focusing on niche topics.

Say you’re into tech startups – TechCrunch.com would be the blog you’d follow on social media to stay in the loop and click thru to their posts. If you’re into Thai cooking, well there’s authoritative blogs on that as well.

Note: Technically speaking, blogs are no different than a website. It’s still just good old HTML that has been pushed out using some slick code. Whereas on a website it has “pages”, a blog has “posts”. To a search engine or a user, they look just the same. Bloggers publish their posts under different “categories” – think of them like file folders.

For example, TechCrunch might have a category on their blog called “Web Startups” – any blog post related to that would get filed under Web Startups to make it easy to search and organize all that blog’s content around that topic. Much like a file folder.

Many companies and causes are launched and gain notoriety through nontraditional blogging outlets like TechCrunch, Mashable, and The Huffington Post. Each of these digital properties has the ability to drive massive amounts of high-quality traffic and have made blogs the new frontier in public relations.

Back to the User Persona and empathy – companies who employ blogs to produce remarkable content for their target market in turn boost quality traffic from Google. Marketers can also approach blogs of a similar nature and offer to write a guest post or two (if their writing quality is superb) and in turn get links back to their website, which also drives more traffic.

We know from our SEO section, that getting links to your website is one of the most powerful ways to rise in the Search Engine Results Pages aka SERPS (and one of the most difficult tasks to do given the time intensity).

What blogging means for digital marketing:

1. The main site can maintain a clean architecture by using Blog Categories to organize less important information that should not appear in the main navigation.
2. Search engines love constantly updated websites – blogs fill this demand perfectly for Long Tail phrases and over time can pull in significant amounts of quality traffic as they earn links and a following.
3. Over time, the blog can start to exert an influence within a specific audience and establish the brand as a thought-leader in the space.

Key takeaway: blogging has become the center of online marketing efforts for its ability to pull in good quality traffic through organic search results. Companies can maintain clean architecture on their websites and still cover a wide breadth of topics utilizing a blog format within the website’s sitemap. Over time the brand can establish itself as a thought leader in the space and exert influence.

Knowing our business objectives and having developed a clean sitemap, we can breakout the dry erase markers yet again and head to the whiteboard to create what web designers call wireframes.

Wireframe: A basic “sketch” of a web page that focuses on interactive functionality and rough layout as way to quickly execute web design.

Wireframing may or may not fall under your responsibilities as a digital marketer. Many user interface (UI) specialists will take this on or a savvy web designer that has deep expertise in the field.

However, knowing the process is yet another tool to add to your marketing kit so it is worth being familiar with the concept. Being able to communicate visually, be it crudely, can make it much easier to collaborate with creative talent. And as a digital marketer, you are by default the keeper of the flame for the user. Without somebody representing their voice in the design conversation and tirelessly advocating for providing value in exchange for their time on the site, the user experience can quickly drift into the weeds in the pursuit of “amazing web design”.

Here’s an example for a wildlife conservation nonprofit’s homepage for version one. This was built using a software tool called Balsamiq Mockups but a whiteboard and a camera works just fine too. Notice how crude it is?

How to do wireframing:

1. Have your well-researched and user tested sitemap handy. Start with the homepage and begin by setting up the main sections on the page. In our above example for a sample homepage, we have a large background image and three sub columns for News, Featured Project, and FAQ’s. Above that will appear a short mission statement. This will most likely be refined many times but being visual makes it much easier for collaboration.
2. Off to the side, include any special notes regarding how the page will work (these are the yellow Post-It notes with arrows in the example). You might want to call out a rotating slideshow or how one of the sub columns will pull out the most recent blog post on the homepage. Any clues you can give on this type of interactivity avoids costly mistakes in the design and coding phase. Do not assume anything here and spell out every “gotcha” you can think of for the web team. A simple fading slideshow is actually quite a bit of work if it’s being custom built into a Content Management System (CMS).
3. Not every single page on a website will be unique. Usually there are just a handful of templates that get reused over and over. The sub-pages or “innerpages” will most likely have a single page template with different content. These usually contain a main text area with a sidebar. The ratio of real estate is usually ⅔ main and ⅓ sidebar or ¾ main and ¼ sidebar. The same method as above applies for laying these out. Below is an example website innerpage for the adventure tourism industry:

The same process is repeated throughout all the unique page templates as based on the sitemap. In the end, you may have anywhere from 3 – 10 unique page templates – usually more if you are laying out a large ecommerce site.

Use your sitemap as a checklist to make sure each and every page has a look and feel for handing off to your web designer.

Most importantly gut-check this to make sure each feature and layout serves your target market.

Image: http://astuteo.com/slickmap/

It all Starts With Your Website

The hub at the center of your online marketing efforts is your website. Execution online starts with having a website that can be easily maintained. Everything else spins out from there and in turns drives traffic back to your website. With the rise of social media platforms visitors can spend time outside a website interacting with the brand but the ultimate goal is to drive them back to a website. For example, you may post a blog with tips about a topic your user would be interested in. Next, you might push this post to your Facebook page or on Twitter – with a link back to your site. Content goes out and the user (hopefully) comes in.

As we saw in Dr. Fogg’s research on web credibility, design is critical here. With open-source platforms like WordPress, Joomla, and Drupal it is becoming increasingly easier and more affordable to publish content online and have it look well designed.

But great design starts with restraint in laying out the pages on a website – commonly called the site architecture. Let’s breakdown how to do this effectively.

How to build a Sitemap
Since we have our user persona and data on what users are looking for when they search, we can start to assemble the key parts of our web presence using a tool called a sitemap.

Sitemap: a list of all the pages on a websites organized in a hierarchical fashion.

When planning a new website, the blank canvas can be intimidating. Mapping out all the pages and the interactive functionality can seem like a daunting task. Aside from content creation, this is usually the toughest part in the process of launching any new digital property.

Here are five simple rules for how to create a sitemap

1. List out all the topics and ideas using your user persona and the keyword search term data for what this visitor wants from your website. Remember time is the true currency online – how will your site reward a website visitor for giving this up?
2. On a whiteboard, list the major sections of the site. A simple brochure website for a business might include the following: Home, Services, Projects, About, and Contact.
   Tip: Strive to keep the major sections to no more than seven sections. When a user lands on your homepage, you want to make easy for them to navigate the site and not feel overwhelmed with choices.
3. Break out any topics by areas of common interest. For example, under the “About” section might include pages on company history, philosophy, staff, and goals.
4. Almost every website today includes a blog. This is almost a “site within a site” in that categories can be created to hold specific topics. This helps keep the main site’s architecture clean and uncluttered. For example, a small business might have blog categories like Tips, Customer Spotlight, Common Questions, Photo of the Day, etc. If these were to exist in the main sitemap it would quickly become cluttered and the navigation would be a mess. WordPress is particularly good at setting up and managing site content and breaking out the blog with specific categories.
5. Once you have all the pages flushed out in the order with the main headings, pull in a few people from your target market if possible. Hide the sub-pages and ask them what they would anticipate getting when they click on the main headings. You want these to be dead-simple and very intuitive in relation to your target market.

Everything that follows for executing will flow out of this site map. Nailing the architecture with as much simplicity as possible is critical for getting users to move thru the site. Tracking visitors’ experience through web analytics packages will quickly reveal if this is not done correctly.

Again, it comes back to common sense. We’re lazy and do not like to think when we’re online. Your job as the digital marketer is to do the hard thinking up front before any Photoshop files are produced so when someone shows up at your website they can lazily click their way to being educated or delighted.

This all starts with a clean sitemap.

Where we’ve been so far…

We’ve covered how the web world works in the Foundations section and explored some fundamental online laws like Metcalfe’s and Moore’s Laws which tells us about growth in online networks and change. Next, we covered how to study and research your target market using a design tool called a User Persona. This simple exercise helps us empathize with our ideal user and ensures we take off our personal filters for what our digital presence should be. In short, we get as close as possible to understanding what they want online from us and not what we want for them.

Next, we learned about the Long Tail and how it rules everything online from inventory turns on Netflix and Amazon to keyword search volume. The Zero Moment of Truth (ZMOT) lays out why the world is ruled by search and how a customer is influenced by the first page of results on Google. This is the battleground for brands today. From our search engine optimization section we now understand how the power for driving quality traffic comes by targeting these Long Tail keywords. While we may never rank for the first three results for the “fat head” of a topic, which makes up roughly 30% of search volume, we can indeed rank on the remaining 70% of traffic for the trailing keyword phrases around that subject.

All this research around keyword search trends further helps us empathize with our ideal user – a nice added benefit for tweaking our user persona. We start to get a sense of what they want when they are online based on search trends using tools like Google Keyword Tool, Insights for Search, and Trends. This further informs part of our hypothesis on the user persona (the Art of marketing) and the data we’ve collected using keywords and social technographics (the Science of marketing).

We also learned how marketing is critical to the success of a business by driving sales – it is really no more complicated than that. ZMOT research shows that digital marketing in particular is an initiative that can have tremendous impacts on a business’s bottom line given how B2B and B2C consumers start almost every purchase decision by researching on a search engine.

The Strategy section covered how to take apart different business models and think more entrepreneurially about how to identify business drivers like profitability through customer retention (bearing in mind, this is where you must dig in and ask insightful questions of your colleagues on the business drivers). As savvy digital marketers, we have the opportunity to think beyond fuzzy terms of “building brand equity” and drill down to the concrete details of how to move the business forward. This ensures we always have employment and the trajectory of our career moves up and to the right.

By understanding these business objectives, we can begin defining a smart strategy for how digital marketing can help achieve these goals. We used the POST and SMART frameworks as filters for helping us think through ideas and also use these as tools to communicate with our colleagues. Part of the job of a digital marketer today is educating colleagues on the technology and how it can help achieve a business goal.

Let’s dive into the fun stuff – executing on all these ideas.