Case Study: UpstateCreative.com


The Upstate Alliance for the Creative Economy is an organization that is based in Upstate New York. They conduct research, host events, and host/sponsor other functions related to the arts. Maureen Sager hired me to design them a new website that matched their brand, was flexible and easy to add content to frequently, and most importantly, was organized and easy to navigate. While the development process was long, I fulfilled these goals for them and delivered a great website that they loved.

Services

Web Design, Web Development, Graphic Design

Technologies

Wordpress, HTML/CSS, Adobe Illustrator

Timeframe

December 2016 - April 2017

Introduction


Context

The Upstate Alliance for the Creative Economy asked me to make a website for them. Their old website was built in Wordpress.com. On it, they posted things such as events, news, and their research. The website served its purpose fairly well, but it was still lacking. They wanted a website that had more personality, and that could accomodate more information. They wanted a custom layout, and an updated navigation that made more sense.

Challenge

My job was to create a new website for them that solved the problems of the old website, could accomodate more information with a more flexible layout, would be easy to edit, and would be organized. The organization was a non-profit, and as such would have a limited budget to spend on the project. Fortunately, time was not much of an issue. There were a few people involved in making decisions for the website, so the project was not rushed anyways. It was also decided that I would set up hosting and transfer the domains from wordpress.com for them, which was not a problem as I have a good amount of experience with networking and servers.

Stage One: Planning


Platform and Hosting

One of the first things that was discussed initially was how we would develop the new website. An option that immediately came to mind was Wordpress.org. Wordpress.org is different from the platform they had previously used, Wordpress.com. Wordpress.com provides hosting and a more limited, closed-source version of the Wordpress platform. Wordpress.org, however, is open-source and offers more options in terms of customizability, and the option to install third party plugins and themes. Wordpress.org also does not provide hosting, unlike Wordpress.com.

Since they were already familiar with the Wordpress platform, I suggested Wordpress.org paired with another web host would be their best option. It would offer much more customizability and they would not have to learn how to use another platform or edit code. They agreed. I also suggested Godaddy to host their website, as that was who I was using at the time, and they are a very reputable and highly ranked web host.

Sitemap and Navigation

When deciding on how the new site would flow, I analyzed their old website first. The old website contained a large header with the 'ACE' logo, sidebars with a link to sign up for their newsletter, social media feeds, and a shortened announcement for their closest upcoming event.

In the navigation bar, they had links for the following:

  • 'Breathing Lights' - a large art installation which they were sponsoring
  • 'Events' - a list and descriptions of their current and upcoming events
  • 'About' - information about the organization, and their research
  • 'Process' - mainly a listing of things that they had accomplished and researched thus far
  • 'News & Publications' - a documentation of press appearances and articles/research they have released
the old upstate creative website
The old upstate creative website, made with wordpress.com.

Many of these links were ambiguous and even redundant. The structure of the website was loose and it was often hard to deduce what the organization did, where to find information and where the pages might lead.

The number of pages and links in the website increased throughout development as the organization came up with more things to put in the website, but this early on I decided to condense the navigational scheme into the following:

  • 'Home' - a short summary of the organization and recent events
  • 'Events' - All current and upcoming events
  • 'Data' - research by the organization
  • 'About' - a longer description of the organization

Stage Two: Designing


Visual Style

In order to come up with a color scheme for the website, I reviewed come of the organizations previous materials, which the client requested I use as a reference point (such as the page from the report pictured below). They were interested in making the website colorful, but not too distracting or 'artsy.' I came up with a palette of a variety of slightly muted colors that would not pop too much, which dark text would be readable on. To make sure that the text was readable on top of the colored blocks which the client wanted it to be presented on, I checked them against each other using this fantastic tool. I retained the main orange color from their original website, but tweaked the shade.

I chose 'Raleway' (from Google fonts) as the font for the website. It's a beautiful font, looks modern and is very readable on screens, and is slightly stylized which I felt complimented the visual style of the website very well.

the fonts and colors used on the website
The fonts and colors used on the website.
a page from one of the organizations reports
A page from a report previously created by the organization on the regional economy.

Layout & Wireframes

At this point I had enough information to begin to plan out a visual structure for the website. The client wanted to display recent events on the home page in the form of blocks, and requested the layout be colorful to match their existing branding and materials. While this did limit my creative freedom a little bit in designing the website, with their guidelines it was simpler to decide what to create.

For the home page, I presented a wireframe with a banner at the top containing their logo, and images of their events in the background. They requested that the home page ONLY show events and announcements, so below the navigation that is all it contained.

wireframe of upstatecreative.com
The first wireframe of upstatecreative.com.

With their input, I refined the wireframe and also added color. The client wanted to display more than one image in the slider at the top, but have no text or logo on top of it. To accomodate this, I expanded the slider design to display three images and moved the logo beneath it. The navigation remained beneath it, but was now centered.

I also added the social media feeds in a sidebar as per their request. With this, the layout of the home page was complete.

wireframe of upstatecreative.com home page
The refined wireframe of upstatecreative.com, colored.

Infographic Designs

For the slider at the top of the page, the client asked that I create small graphics that each conveyed an art-related fact about the economy of the capital region in New York. These facts were added to both the home page and to the 'Data' page on the website. I created them in Adobe Illustrator, and incorporated the organization's logo into them to make them more visually interesting, to bring consistency to them, and to make it easier to recognize them as being related to the organization.

some of the 'fact' graphics made for the website.
A few examples of the 'fact' images made for the slider on the website.

Stage Three: Developing


Since the website would be hosted on GoDaddy, I set up the account for the client and a staging environment for Wordpress. On this site we used the 'X' theme purchased from envato market.

I configured Wordpress and the theme, installing essential plugins and designing the template for each page. Here, the client requested some more pages be added; an 'Industries' page to show the various types of creative businesses, 'Jobs & Opportunies' to post available jobs in the region, and a blog for post non-news related stories.

The development stage happened to be the longest stage. Here, the site went through a few revisions as I communicated with the client and they communicated with others in charge. Eventually, the site was ready to be launched, and so I helped transfer their domains to GoDaddy and make the staging site live.

"Brooks did a fantastic job on our website, UpstateCreative.com. I appreciated his flexibility, very reasonable rates, ability to stick to a schedule, and ability to incorporate design comments and feedback into his work. He is very responsive to my questions and offers his thoughts freely. I very much appreciate his work."

Stage Four: Conclusion


the finished website.
A screenshot of the home page of UpstateCreative.com upon completion.

The client was very satisfied with the end result; it included all of the features they requested, it was more intuitive and looked nicer, and it was flexible enough for them to make changes to in the future. As I used proper SEO practices while developing the website, the new website was quickly crawled and brought to the top of search engine results.