Blog

Archive for the ‘Web Work’ Category

Introducing WorshipVue

Saturday, March 26th, 2011

Most of our time at Adair Creative Group is spent working on projects for our clients, but I’ve always had in the back of my mind that I’d like to try our own venture someday. Through a close partnership with Praisecharts and Fervent, WorshipVue.com has given us the opportunity to do just that.

WorshipVue

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.

WorshipVue

Case Study: PraiseCharts

Monday, October 18th, 2010

On October 1, we launched the new praisecharts.com. For over 10 years, PraiseCharts has served churches around the world by providing sheet music and other resources for musicians and worship leaders.

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.

Old PraiseCharts Website

The new 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.

PraiseCharts logo

Start On Paper

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

Flowchart

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

Flowchart

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

Flowchart

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.

Interface sketch

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.

Wireframe

Wireframe

Wireframe

Wireframe

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.

Homepage comp

Homepage comp

Homepage comp

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.

Back-end

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

Blog management

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.

An Extraordinary Company

Sunday, August 29th, 2010

When I first met with InvoTek about the prospect of redesigning their website, I was overwhelmed by their passion. InvoTek is a small company that does big things in an understated way. In short, they develop technologies that help people with severe disabilities interact with the world around them. They’re not in it for money or fame. They truly care about making an impact in the lives of those they serve.

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.

InvoTek Website

InvoTek Website

InvoTek Website

Case Study: JBU Advance Program

Wednesday, January 20th, 2010

For over 15 years, John Brown University has provided a way for working adults to finish their degree. The Advance Program has been highly successful during this time, and it has played a large role in the overall growth of the university.

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.

JBU Advance Program Logo

JBU Advance Program Tagline: Finish Your Degree. Advance Your Career.

JBU Advance Program Business Cards

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.

JBU Advance Program Brochure

JBU Advance Program Brochure

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.

JBU Advance Program Website

JBU Advance Program Website

JBU Advance Program Twitter Page

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]

Some New Work

Friday, November 20th, 2009

It had been a while since we last updated the Our Work section of our website. We’ve added some of our newer work to each of the three sections — Web, Identity, and Print.

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.

Lightning in a Bottle

Friday, May 29th, 2009

Today was a big day for our client NanoMech. They opened the doors to Arkansas’ first nanomanufacturing facility, and Governor Mike Beebe was on hand to mark the occasion. I can’t tell you all of the science behind nanotechnology, but I can tell you nanotechnology is the key to many amazing innovations that we will see in the next 10-20 years. Better lubricants, lighter and more durable body armor, more effective produce packaging, and coatings harder than diamonds are just a few of the innovations that NanoMech has already introduced. It is a technology with unlimited potential, and this company is truly holding lightning in a bottle.

Arkansas Governor Mike Beebe speaks at the opening of NanoMech

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

NanoMech's New Website

2 Hats In 1

Sunday, April 19th, 2009

We recently helped launch the ZipHat, a simple but exciting new product. At first glance, the ZipHat is a regular ball cap. Give it a closer look, and you’ll find a discreet zipper. When you unzip the zipper, it removes the crown to leave a visor. The ZipHat has unlimited applications, from sports fans and athletes to corporate uniforms and novelty hats.

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.

NWA Home Builders Re-Design

Thursday, March 19th, 2009

Today we launched the re-designed website for the Northwest Arkansas Home Builders Association. This non-profit organization provides services to the home building community, as well as services to consumers looking to build or remodel a home. The HBA’s Home and Garden Show along with the Parade of Homes are major events each year in our community.

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

NWA Home Builders Website

DennisJernigan.com Launches

Tuesday, February 10th, 2009

We recently launched dennisjernigan.com, a completely redesigned website for Christian worship songwriter and artist Dennis Jernigan. Dennis’ songs are widely sung across the country and globe, and he is recognized as “America’s lead worshipper”.

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.

Add a Little Video To It

Friday, September 26th, 2008

We have long advised our clients to keep their website content brief and to the point. Utilizing bulleted and numbered lists, call-out quotes, and highlighted pieces of content will help the user easily see and digest the most important pieces of information on a given web page.

(more…)