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.

When a series of devastating earthquakes hit the island nation of Haiti in January, Hope Force was among the first to respond on the ground in Haiti.

As the organization’s response to the Haiti disaster took shape, Hope Force asked us to create a series of materials to bring a unified identity to their work in Haiti. Among these items were a logo, website graphics, e-blasts, support letters, a brochure, wristbands, and display materials.

To learn more about Hope Force and their ongoing work in Haiti, visit their website www.hopeforce.org.

We recently launched a new website for DBI. The site is built on a content management system, allowing their staff to actively maintain the content. The website is a source of information on the events occurring in Downtown Bentonville, including the popular Farmers Market and First Fridays.

Visit www.downtownbentonville.org.

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.

We have been working over the past few months on designing a new logo for John Brown University, and we were excited to be on hand today when JBU President Dr. Pollard introduced the new logo to faculty and staff.

Our goal was to create a simple and contemporary mark that symbolically represents the core values of the university. The three-pointed shield and three dark quadrants represent JBU’s threefold mission of educating the Head, Heart, and Hand. The cross in the center represents the university’s motto since 1919 of Christ Over All. The lighter blue quadrant depicts the top of the Cathedral — the most iconic building on campus. Finally, the circle in the center of the cross depicts the new Cathedral group plaza in the center of campus.