Oct
20

The New PraiseCharts: Behind the Scenes

Featuring David Adair Posted on October 20, 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 Site

The new PraiseCharts website.

New Site

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.

Design comp

Design comp

Design 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.

Backend

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

Blog Admin

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.