We’ve been through a rigorous process that has ensured a successful project – on budget and on schedule. Looking back:

• Part 1 explains the planning and strategy that goes into creating a website,
• Part 2 goes through the prototyping and wireframing process,
• Part 3 showcases the fruits of Parts 1 and 2 with design concepts,
• Part 4 puts the rubber to the road with the development process.

Launch Preparation

We like to do our public launches on Fridays. It gives us the chance to do a soft launch and release it to you and your team as well as any visitors that may happen across the website. If any issues occur, we can fix them in real time as well as assess the website over a weekend.

Then Monday comes along which is a prime time to issue a press release or an email to alert your family, clients, and vendors know of your new fantastic website. With a lengthy Alpha and Beta test schedule, we’re 100% positive that that email will be met with compliments to go around. All of the bugs will be squashed and the website will be pixel perfect.

Post Launch

There’s a few more things on our checklist post launch. We like to alert the search engines of your new website structure. We provide Google, Bing, and Yahoo with sitemaps that give it a full architectural analysis of your website so that the next time a crawl occurs, the engines will be sure to pick up every last piece of content on your website.

We also install Google Analytics allowing you to see who’s visiting and from where.

Ongoing Hosting & Maintenance

Many of our clients choose to retain us to host and maintain the website. With this plan (usually, $75 – $150 per month), we take care of all the technical details of your website and ensure that your site is up and running at all times. If something happens to the website, we’ll fix it. If you have a general question about how to operate the CMS, we’ll answer it. Unless there’s a design or functional change to the website, there’s nothing that you will pay for out of pocket outside of the monthly retainer. We become a part of your team.

This concludes our 5 part series on our web design and development process. We hope that this sheds some light into how we craft a website from planning to launch. Even if you’re not an O3 client or don’t intend to become an O3 client, you should use this guide as a standard of measure against the vendor you eventually choose. Obviously, we’d love for you to come on board with us. In fact, we spill the beans on our typical project budget. We leave nothing to mystery for our prospective clients to figure out.

So we’ve laid the ground work with Research & Planning, crunched the data and produced your Architecture & Wireframe, made it pretty during Design, and now we need to turn that design into a website. This process is all about the nerds. But hey, someone once said that the nerds will rule the world. I don’t know about the world, but we sure do understand the Internet!

Here’s where resident nerd (aka Genius) Brian Onorio turns a Photoshop file into a fully functional and turn key website masterpiece!

Content management

Virtually all of our websites are put onto a content management system which is an application allowing you to control the information on the website without having to be technically proficient. Our content management system of choice is WordPress, but we’ve worked with Joomla, Drupal, ExpressionEngine, and other notable products. Unless you have a specific choice for content management, we’ll go with the default WordPress (and you won’t be disappointed). We’ve done some pretty cool stuff with WordPress and we’re well experienced to craft WordPress into the CMS that you and your business need.

Functional

With an O3 website, you can rest assured that your new investment will marry functional ability with art. We browser test to assure that all current versions of Safari, FireFox, and Chrome will render your website as they appear on your earlier design concepts. We also assure that versions of Internet Explorer 7 and up are capable of rendering our websites.

We use jQuery to do the bulk of our client-side interactivity. Translated: we don’t use Adobe Flash to perform animations (like slideshow transitions) which is cross-platform compatible with all current browser versions as well as most mobile devices.

Search Engine Aware

We code to standard so that your website has the best chance of being picked and accessible by search engines. We will establish an Information Architecture that eases this process and lets search engines know what your content on each page is about. All of this is done behind the scenes and with little extra effort needed on your part.

We do provide search engine tools with each of our content managed sites allowing you to overwrite page titles and meta descriptions all within the content editing zones.

While search engine optimization requires much more than these controls, we do give you the best foot to stand on to allow your content to shine.

Alpha and Beta Testing

After the website build is complete, we rigorously test your website across various platforms to ensure that your website functions across popular platforms. We undergo alpha testing as a team which is where we catch a majority of the bugs. After Alpha, we will release to you and your team for Beta testing. With an additional set of eyes and a few more bugs to squash, we move forward with a release schedule.

With a workable, functional product, we’re ready for the final phase of our development cycle: Part 5 – Launch.

The two bills – SOPA (Stop Online Piracy Act) in the House and PIPA (Protect IP Act) in the Senate – both aim to stop online piracy with their cute and cuddly titles. But the power that the government and other institutions get from these two bills are widespread and dangerous. The supporters of the bills (read The Music and Movie Industries) will tell you that they aim to shutdown overseas websites that are publishing copyrighted material. But there are no such protections in the bills covering US-based websites. So we’re all in trouble.

This video sums it up far better than we could. We encourage you to take a moment to watch.

We do have a problem with the widespread piracy of intellectual property but SOPA and PIPA give too much control to the government.

Click here to tell Congress to stop these bills.

Now the fun begins. Parts 1 and 2 of this series may seem a little laborious and we still haven’t seen exactly “what” your new website will look like. Hold your horses though because the Design process is when creative shifts into high gear. We use the information gathered during the Strategy & Research Phase and the Architecture & Prototyping phase to get us where we can begin putting the glitz with the glamor.

Getting it right first

The Design process is lengthy and time consuming. Sean Baker, O3′s artist extrodinnaire, is a perfectionist. It’s one of his better qualities. Using all of our data, Sean carefully lays pixels to the screen. After countless hours of work in Photoshop – and many cups of highly caffeinated beverages, Sean produces a concept. We’ll pass this concept on to you for review.

You’ll see the email come across – and you’ll quickly clam up in anxious anticipation. Once you open the file we send, you will see a vision of things to come for your online brand! This concept will be a quick glimpse into what your website will soon become. You will immediately notice how closely the concept works within the Wireframe produced in Phase 2 and with the Strategy established in Phase 1. All of the content blocks are placed, design detail has been added, and the anxiousness dissipates into calm satisfaction! At least we hope.

Revisions

Of course, we welcome your input into the concept. What you like, what you love, and what you could care less for are all carefully noted. With your critique in hand, we’ll go back to work on that file until you’re 100% satisfied. We’ll do this as many times as it takes to get your website right – by us and by you.

Alternate concepts

98% of the time, we’re able to hit the ball out of the ballpark on the first swing. And that’s not a brag – we put in the time along with you to lay out a sound strategy before ever drawing a pixel. The first concept should be a culmination of all of the hard work done by you and us. If the due dilligence was done in Phase 1 and Phase 2, then Phase 3 will be a very natural process.

However, there are times where second and third concepts are needed. Sometimes we have clients who want to see a “light” version and a “dark version” of a website concept. Sometimes they’ll want a modern version and a grunge version. We typically will determine this up front and build in design time for each of these additional concepts.

Design approval

So what’s next? Once you’re 100% satisfied, say the words and we’ll move on to our next phase in the process: Development.

With a clear vision and a concrete concept in hand, we’re ready for the nerd stuff: Part 4 – Development.

After hours of deliberations and discussions, the team at O3 is excited to announce our partnership with Little Pink Houses of Hope which provides completely free, all expense paid vacations for breast cancer patients and their families going through chemotherapy, radiation and surgery. Having been around for just one year, fifty families were served by Little Pink Houses of Hope and we hope to see them generate more support and help more families find peace, comfort and support.

The story of how Little Pink Houses of Hope started is one that showcases great strength, love and hope and is truly inspiring. Be sure to check out the current website, http://www.littlepinkhousesofhope.org/ and read below or watch this video about the organization and its founder, Jeanine Patten-Coble.

On June 15th, 2009 I was officially diagnosed with cancer. We were supposed to be leaving the next day for a family vacation to the beach and I asked my doctor, “can I still go?”. He answered with an emphatic YES! Then proceeded with the killer caveat- “you better go and enjoy yourself because when you get back you are ours for the the next year.”

With that statement, I packed my bags and headed to the beach with my husband and son. We have been vacationing in Buxton, North Carolina for the past 15 years, but this trip was going to take on new meaning for our family in more ways than we could ever imagine.

We arrived at the house and I put on my running shoes to try to clear my head. That night, we were going to tell my son I had cancer and I was dreading even thinking about the experience. So what better way to handle it than to put on my shoes and run away. Little did I know that I was running towards something.

I ran down the Old Lighthouse Road and when I got to the end of it I was incredibly perplexed. Here was a big compound of houses with a chain link fence around it and no one in sight. I ran around the fence trying to find some marking to help me better understand what it was. I finally came across a sign that indicated that it was owned by the US Coast Guard. It looked like a ghost town. Completely abandoned with no one in sight. Tons of houses, a playground in the middle- it looked so lonely. And keep in mind this is all oceanfront property access.

I turned around and started my run back to our beach house. The thought that these houses were supposed to be mine kept running through my head…. I could paint them pink…Little Pink Houses…I could create a cancer retreat center… families could come to get away from the daily life of cancer…I am supposed to do something amazing with this…you just found out you have cancer…what are you thinking?

As I ran back, I stopped at the realtor office to get the 411 on the property. The properties were owned by the Coast Guard, but they had abandoned them 5 years earlier. There are 23 houses in the compound that are in pretty decent shape and Oceanfront!!!.

What a great distraction for me. Here I am staring down the barrel of telling my 12 year old I have cancer a mere 24 hours after I have found out, and I have already starting making plans to change the world with this compound of houses. I laughed at myself (repeatedly). Talk about getting cancer and thinking that you are going to change things right from the very beginning. I was laughing even thinking about it and realized I better focus the rest of my run on how to tell my son that our world is about to change.

All week long, these houses kept calling to me, in a way that I cannot explain. Sometimes you do not know what you are supposed to do until you trip across your destiny. In my case, I feel like I ran right into it on a warm summer day in my running shoes.

I have been dreaming about this compound for the past year- thinking about the difference that it could make for breast cancer families. This experience is what led me to develop the plan for Little Pink Houses of Hope. The beach is a place where we were able to reconnect and get stronger as a family as we prepared for the cancer journey. We have returned throughout treatment to find that same solice and place of peace.

Whether it is the purchase of this compound or some other property, I am certain that Little Pink Houses of Hope will become a reality. Until then, I plan on using a model of donated beach houses and volunteers to create that environment of which I dreamed. I have never felt more alive or moved by the plans that God has for me. I look forward to you dreaming with me!

We now have a foundation capable of taking us through the web design project after dedicating time and resources to research and planning. With critical questions answered and a clear path forward established, we’re now ready to work on some tangibles. Here, we’ll want to look critically at establishing a sitemap and creating a design blueprint for us to move forward on. Just as you would never build a house without first telling an architect what your requirements are (such as square footage, number of bedrooms and baths, and other important information), the same is true of a website. Before starting the design process, we’ll want to see how your website will be laid out and provide you with a blueprint (in our world – a wireframe) for you to see.

Web Site Architecture – Your Sitemap

Just as a house has defineable attributes, the same is true of a website. As a simple example, your website will have a series of pages starting at the top with the Home Page. Under the Home Page, this website will have an About Us Page, a Services Page (which will also have several pages dedicated to individual services), and a Contact Us Page. A Sitemap document will look a little like the following.

This is a simple example. It is likely your sitemap may be more involved.

Identifying your site’s primary structure will get us started on a pivotal piece of your website’s architecture: the navigation. Providing an efficient, consistent navigation is a key input in keeping your visitor’s engaged. Overly complicated navigational structures can cause an increase in your bounce rate, or the rate of visitors who visit your site and do not click anything and continue on about their business elsewhere.

However, over simplifying your navigation can be equally troublesome. If your visitors aren’t able to find information quickly and easily, you’ll see the same bounce rate increase as a result. The key here is efficiency. Get your visitors to where they want to go with the least amount of clicks.

Wireframes – Your Website’s Blueprint

We mentioned before that you would never build a house without a blueprint. It’s equally important to blueprint your website before building as well. Yet we run across so many who skip this process all together. At its best, the blueprint speeds up the design process and yields a more efficient work flow between vendor and client. The wireframe gets both parties on the same page before moving forward to design.  Using this document, we can show you our vision of the website in block form before ever firing up Photoshop to begin design.

A sample wireframe

It may not look like much to begin with, but there’s a lot of important information inside a document like this. With a wireframe, we determine up front where content is, where image placement is, how the navigation relates to the header and the rest of the website, and other important elements such as this. It’s much easier to move things around in this phase if we’re not on the same page as you. If we skipped the wireframe and went straight to design and spent hours polishing the look and feel around the content and then found out that the layout is not what you were expecting, we would have to go back to the drawing board and start over which ultimately means more man hours and an increased budget.

With a firm understanding of your websites architecture and with a wireframe in hand, we’re ready for the fun stuff: Part 3 – Design.

As John Steinbeck once said, the best laid plans of mice and men often go awry. But he never mentioned what happens when there’s no plan in the first place. Without proper planning, execution becomes difficult if not impossible. We’ve obtained clients before who had started the web design process with other vendors who decided to skip this critically important step. To some web designers, the process starts with firing up Photoshop and creating their version of what they think their clients want. This couldn’t be any more wrong. It would equally be wrong to create a website based on what our clients think they want. This project, after all, is not for us and neither is it for our clients (even though they’re paying the cash). It’s for our clients’ clients. Thinking in terms of that subset of people is what makes all the difference.

To get our web design projects started out on the right foot, we start by asking questions. Lots of questions. We firmly believe that no two design projects are the same and we treat each of our projects as an individual with concrete, definable goals. We start our projects with three concrete parties in mind: your audience, your competition, and you.

Your Audience

Your audience is perhaps the most critical of these three parties. There’s a reason why you’re looking to design or redesign your website. It’s often because you have someone to tell about your goods or services. Who are these people? Who is your target audience? What are they expecting from firms like yours? What do they want or need from a company like yours? Thinking outside of the box and thinking like your customer can yield some relevant revelations about the direction your project should take.

We don’t stick to surface level here. We want to know all kinds of details about this fluid, and often intangible group that you’re hiring to communicate with. How old are they? Are they male or female? Where do they live? What’s their economic status? Discovering the attributes of your audience often yields more questions. Questions are good, after all, they’re the beginning to the discovery and directional process of your eventual website.

Your Competition

Everyone has a website and you’re likely not the only one providing your goods and services. If you weren’t, the US Government would have put the stamp down on your monopoly a long time ago.

Who is your competition? What are their competitive advantages that you don’t have? What are they doing that is better than you? What are some weaknesses of your competition that we could exploit? What is your unique competitive advantage that would give you a marketing tool that they don’t have? Doing an online competitive analysis gives us a great framework of what the industry is doing right – and wrong. We’ll want to take this data and advertise your advantages and exploit your competitions’ weaknesses.

Your Goals

Finally, we take a good long look at your short and long term goals. We work with firms every day with a diverse set of goals. Some want a website to simply extend their brand and provide information about the company. Some service based industries take an analytical approach and base their website on the goal of attracting leads. Others have products, both tangible and digital, that they want to sell more of. There are many reasons to design or redesign a website and allowing us to take you through this process will make those goals more concrete and attainable.

With these goals in mind, we’re ready for Part 2 – Architecture & Prototyping.

Our first goal in the New Year is to assemble our selection committee and notify you all of our 2012 Non Profit Partner. Stay tuned as the selection will be made on January 9.

The Making of Goodies for Gifts via Goodies for Gifts