Speak with Jon

jon@studioaceofspade.com
440.591.8799

Talk to Michael

michael@studioaceofspade.com
319.536.1954

Yell at Ted

ted@studioaceofspade.com
440.591.7384

Our Address

118 E. Washington St.
Floor 2
Goshen, Indiana 46528

Send us a message

A campaign for change.

Bold Progressives

Design consulting, web development, AJAX, custom CMS, responsive

Timeframe

3 months

Sector

Nonprofit - Political

Region

USA
Washington, D.C.

The Challenge

When PCCC came to us, they needed a content management system that was going to be simple to use. While talking with them about their needs, we planned out a strategy to best help them manage their data. Afterwards, we were signed on to develop the website, including a fully-responsive layout that was excessively QA'd on then-modern devices.

jump to completed project images ↓

Planning out the Project

When the Studio was contact to build this site, we were brought on initially to assist in the planning of the site. We assisted them in identifying key upgrades and goals for the new web presence after looking at their current situation, as well as some mock ups of a new proposed design that was passed along. Some of the focal points of the project were:

  • Reducing administration time that it took to manage content on the site
  • Building a highly modular and documented website that would allow for expansion by Studio Ace of Spade or any other third party in the future
  • Leveraging WordPress to assist in the unique functionality that would be found in the News and Blog sections that generated a lot of the traffic on the site
  • Ensuring ease of social sharing, including an integrated and live-refreshing Twitter feed
  • Allow for easy use of the site and all of its functionality on mobile devices
  • Assist in simple access to donation giving on the site.

Once we had determined the key goals and revised the mock-ups to match, we proceeded to plan out the build of the site. We had an abbreviated time frame to complete such a large responsive build with extensive QA in the timeline, so before we began we developed a customized version of revision process that would be tailored to delivering review items to a committee-esque group rather than a singular point person.

Once we had determined the key goals and revised the mock-ups to match, we proceeded to plan out the build of the site. We had an abbreviated time frame to complete such a large responsive build...

Building the Site

When building the site, we focused on building it as modularly as possible. We did this for several reasons, the biggest being that the scope was expected to frequently change throughout the time of the build. It wasn’t going to change in big ways, but it would pose a problem if the we had directly connected campaigns to candidates, candidates to news articles, and so on. So, the HTML, CSS, JS, PHP, and backend were all made to be broken apart if need be.

This also provided us another advantage – the modularity allowed for us to document the code extremely finely, as well as template at almost all of the HTML and PHP that was to go into the site. This would provide any one else who needed to make functionality changes or additions to the site with possibly the easiest job in the world. Some copy/paste, calling some re-usable PHP functions, and passing in some CSS selectors and classes could get you an entirely new page template and post objects in under twenty minutes.

As we proceeded, we decided that it would be more beneficial to the time and budget of the project to build the backend first and get finalization on that. As we did this, it allowed Bold Progressives to the get their content into the site at the same time that we were building it out.

Some copy/paste, calling some re-usable PHP functions, and passing in some CSS selectors and classes could get you an entirely new page template and post objects in under twenty minutes.

Revisions, Training, and Launch

As with almost all of our projects, we go through extensive revisions and QA sessions. This project was no different in that sense, but instead of working with a point person, we were working with a point group. The thing about working with groups is this – they take longer to get you your reviews back, and on top of that, the review always comes with a much more detailed and harder-to-do revision points.

We didn’t want this to slow as down as we were already in the middle of having data being entered into the site. So, as we had planned in the beginning of the project, we began streamlining our revision process as follows:

  • Code Page A to function within specifications on widescreens and laptops
  • Send Page A for review
  • Code Page B to function within specifications on widescreens and laptops
  • Send Page B for review, receive revisions on Page A
  • Complete revisions on Page A, code page A to function on mobile devices
  • Send Page A for review, receive revisions for Page B

Essentially, we developed an iterative process that allowed for extremely fast and streamlined revision phase – it was simply wash, rinse, and repeat.

After revisions had wrapped up, within days the content was finally entered into the site. We sat down for a final conference call, migrated the files and the database to a live stage, and flipped the switch to kick the site live.

The Final Product

The result of hours of care was a beautiful site that was not only easy to use for the management, but easily usable for users. With highly readable fonts used and an incredibly intertwined and well-conceived navigational experience, this site was an immediate success upon launch.

back to top ↑

A demonstration of the blog on mobile devices

Visit the site
final product image

A quick shot of the home page. Note the integrated, live updating twitter feed.

Visit the site
final product image

The campaign section on the home page. These can be chosen by popularity or by manual selection.

Visit the site
final product image

The candidate section on the home page. These candidates can be chosen by popularity or by manual selection.

Visit the site
final product image

The store section on the home page. It links to their third-party site retailing their products.

Visit the site
final product image

The candidate feed with manual ordering.

Visit the site
final product image

The campaign feed with manual ordering.

Visit the site
final product image

The blog page that allows for manual selection of top stories, or sorting by popularity.

Visit the site
final product image

The about page leveraging a standard subpage template for generic use.

Visit the site
final product image

We love hearing from you.