WorshipVue is a new site we created that sells downloadable video and still media for use by churches and other ministries. The media ranges from background loops and still images to themed short movies and song tracks.

Just about a year ago, we began to brainstorm the concept for a worship media website with our good friends at Praisecharts and video-producer Fervent. We quickly recognized that we could pool our resources in an attempt to make the best media site available. Late in the fall of 2010, we began design and development on WorshipVue, and we’ve dedicated just about every spare moment around our office since then to its creation.

We’re excited to have launched the WorshipVue beta last week, and we’re eager to receive feedback from new customers on how we can tweak the website and improve the catalog to create a powerful ministry resource.

For me, I have learned so much in this process of creating a web-based business. This experience will prove so valuable as we work with clients every day who are doing the same things with their websites that we are doing with WorshipVue. I’ve got to give it to Nic, Tyler, and Mark on our staff for their dedication to this project, along with the many hours of work by Bryson Moore at Fervent and Ryan Dahl at Praisecharts.

Give the site a look and follow WorshipVue on twitter and facebook to keep up with where we go in the future.

In March of 2009, we set out to redesign and develop the PraiseCharts website. At that time, we had no idea how complex of an undertaking this redesign would be. But the challenge has led to an incredibly fulfilling project and client relationship.

There is no way I could shed light on all of the hours of meeting, planning, dreaming, designing, building, and testing, but here is a glimpse behind the design and development of the new praisecharts.com.

Old vs. New

The old PraiseCharts website.

The new PraiseCharts website.

A New Identity

At the foundation of the redesign was a new graphical identity. After many rounds of logo designs, we settled on the new PraiseCharts logo.

Start On Paper

We always like to start on paper. Here is one of our early flowcharts.

We’d routinely leave a meeting with a flowchart looking something like this.

Here is 1 of about 10 diagrams our client submitted, outlining the checkout process. Simple, right?

Design

We began by quickly sketching out many different areas of the interface. In this sketch, we explored various layouts for the list of songs.

Wireframes allow us to quickly block out the design without getting bogged down in the details. We completed well over 100 wireframes during this stage of the project. Here are a few.

The concept really starts to come to life when we get to the design comps. I don’t know how many design comps we completed, but we went through at least 30 variations of the homepage alone. Here are a few of the homepage comps that led to the final design.

Development

Then we started coding. Early in the process, we decided to go with the content management system SilverStripe. This CMS has proved extremely flexible and effective for the project, but it was just the beginning. We had to fully integrate with PraiseCharts’ internal cataloging database, their external customer support suite, and their external email marketing software.

PraiseCharts content managers manage all of the standard content through the CMS.

Along the way, we built a completely custom blog and profile management system.

We’re almost there, right?

As one month turned to the next, our clients at PraiseCharts were extremely patient with the process. We did not want to replace the old PraiseCharts website until all aspects of the new site were fully tested and proven.

We began internal beta testing.

• Why does that look funny in IE 7?
• Why is the list of new songs showing the list of popular songs?
• Why is this page taking so long to load?
• Why is the PDF preview crashing my browser?

Each of these questions was important, and we addressed hundreds of them.

From our internal beta testing, we progressed into a time of public beta testing, slowly inviting in more and more customers. The customer feedback was overwhelmingly positive, and they helped us identify the remaining bugs to clean up prior to launch.

The Beginning

We’ve reached the end of 18 months of development and the end of this blog post, but we’re only at the beginning with PraiseCharts. The new PraiseCharts platform has opened the door to many other exciting possibilities, and we’re already hard at work on new developments. Stay tuned for much, much more to come.

Take a Look Around

Hop over to www.praisecharts.com to take a look around the new site. Additionally, the following video is a great introduction to the new site and many of its features.

They needed a website that would better tell their story, connect with donors and caregivers, sell their products, and boost their new Be Extraordinary program. The Be Extraordinary program connects sponsors with real individuals in need of help but without the financial means to secure this type of technology.

This website is built on a Content Management System, which allows InvoTek to maintain the website content themselves, including the blog area where both InvoTek staff and customers contribute.

Here are a few screenshots from the new website. I’d also encourage you to visit www.invotek.org and view some of the video stories about the lives they impact.

We began working with the Advance Program in early 2008, and they are a great example of the type of client we love. We’ve worked with the Advance Program from the ground up to establish their organizational identity and communicate their brand through multiple mediums and materials.

Brand Architecture

We started by working on the foundation – their brand. Although the program had experienced success, it lacked a cohesive identity when it came to marketing, advertising, and materials. Additionally, the program was referred to by multiple names, and this led to both internal and external confusion.

We conducted extensive research including online questionnaires, individual interviews, and focus groups of faculty, staff, students, and potential students. Armed with data, we established each key attribute of the brand, including the name, a tagline, key brand messages, brand personality and language, creative themes, and visual standards.

Out of this we settled on going forward with the name “The Advance Program” and the tagline “Finish your degree. Advance your career.” Concurrently we also designed the new JBU  logo, so we established the official sub-branded logo for the Advance Program.

Collateral Materials

One of the initial challenges to overcome was the inconsistency and overall lack of quality in the Advance Program materials. We developed a series of brochures to serve as the primary print items to provide to prospective students. The brochures were designed to work in tandem and fit in a 6×9 envelope for economical postage and production.

Online

The number one point of contact with potential students is the Advance Program website. We redesigned the site to build on the new identity, while scaling back the content to make it more direct, helpful, and personal. The website also features a blog for keeping fresh content on the homepage. We designed the program’s twitter page, as twitter has quickly become a key communication tool.

Advertising

The brand architecture we established also set the direction for the program’s advertising. Among advertising items we created was the following 30-second tv spot.

[vimeo 8204645]

Preparing these portfolio items was a good reminder of how busy we’ve been, and how many fun and challenging projects we’ve been able to work on over the past few months.

We have plenty of other cool projects in the works that we’re eager to show off.

View our new stuff here.

Arkansas Governor Mike Beebe speaks at the opening of NanoMech

In conjunction with their ribbon cutting, we launched NanoMech’s completely revamped website yesterday. The website introduces the company, provides background information on nano, and profiles each of the 5 nanomanufactured products they have already brought to market. Click the image below to visit the new site.

NanoMech's New Website

ZipHat | Two Hats In One

We designed the ZipHat identity, as well as creating a micro-site to introduce the hat. The website features photo-realistic 3D tours of the hat, as well as basic information about the company and the hat applications.

Give it a look here, and watch for the ZipHat to hit the shelves later this year.

The website features a password-protected member area, an online directory for consumers wishing to find an HBA member, event information, and much more. You may take a look at the new website at nwabuilders.com.

NWA Home Builders Website

We are proud of this site, as it include a little bit of everything. The website is built on a Content Management System, and the online store is powered by a store application that we have authored from the ground up. The website features a blog with many videos from Dennis, a song finder for finding one of his many songs, and a new service called DJ Insiders. DJ Insiders is a monthly subscription service that provides behind-the-scenes access to Dennis, daily devotions, special video features, free MP3 downloads, and more.

We put a little extra love into this project, as our web developer Israel is Dennis’ oldest of nine children. Israel did an awesome job of programming this complex site.

On a personal and slightly humorous note…when I was in high school in the 90′s, my ska band did a cover of Dennis’ “You Are My All In All”. Thankfully, I don’t know of any known recordings that could come back to haunt me.

You can see the site here.

We have taken this train of thought to a new level with the new website for NWA Healthy Marriages. On their homepage and second level pages, we have included a series of videos featuring two hosts standing full-body on the website. The video serves as a way to introduce the user to the organization and their passion for healthy marriages in Northwest Arkansas. It also allows the user to pick up the most important pieces of information without having to read a word.

You can check it out at www.nwamarriages.com.