Case Study

City of Marion Website

 
com-mockups-desktop.jpg
 

Overview

Marion Design Co. had the pleasure of working directly with The City of Marion, Indiana, in redesigning a fully customized website. Collaborating closely with the city officials, we focused on implementing a user-centered design experience that accurately reflected the essence and energy of the city’s community.

 
 

Background

During conversations about a rebrand of the city’s identity system, city officials discussed a need for a redesigned website. The previous site had a number of technical and aesthetic shortcomings that included being outdated, non-functional across multiple responsive platforms, having unintuitive and disorganized content, and lacking an accurate and positive representation of the city, itself.

Overall, it was in need of a positive user experience that allowed users to effectively navigate to needed content and perform day-to-day actions. We also learned of frustrations with the CMS that they were using, which was confusing to operate, cumbersome, and outdated.

com-mockups-phone.jpg
 
 Previous website landing page.

Previous website landing page.

 New website landing page.

New website landing page.

 

Objectives

In listening to many of the frustrations from the city officials, government employees, and local residents, we sought to create a site that accomplished the following objectives:

 

Accurate Reflection

Accurately reflect the city’s community, new visual identity, and brand.

Intuitive Organization

Effectively organize content to allow users to intuitively find needed information and complete day-to-day actions via a positive user experience.

Enhanced Communication

Increase transparency and ease of communication between city officials and residents.

UpgradeD Aesthetic & Technology

Adhere to current standards both technologically and aesthetically (ie: responsive site, card design, material design, etc).

Simple & Customizable CMS

Build on a CMS that was clear, sustainable, and intuitive to use.

 
 
 Slide out menu reveals secondary links.

Slide out menu reveals secondary links.

 

Process

01 : Site Assessment

While the brand team began their research, our digital team simultaneously met with city officials and laid the groundwork for the website. We assessed the previous site’s strengths, weaknesses, and opportunities, and audited over 30+ comparable city websites throughout the region.

02 : Core User Audience

Listing and organizing our user base, we narrowed down the list into three groups and defined a hierarchy of our target audience:

  1. Residents (internal)

  2. Businesses & Site Selectors (internal & external)

  3. Visitors & Tourists (external)

03 : Focused User Goals

We then established and defined a hierarchy of user goals to best serve our audience:

  1. Stay informed.

  2. Complete day-to-day actions.

  3. Connect to more information.

04 : Intuitive Organization

Each of these early steps were key, as we made sure to embody a user-centered design process. After defining the site map for the former website, we reorganized it into four main buckets of information: Living, Business, Visit, and Government. Also included were areas for News & Events, About, and a Contact page.

 
nav.png

05 : Invigorating Design

Building off of the work from the branding team, we integrated the visual identity into a digital format while keeping with current design standards. We designed the site to be fully responsive across all devices and mixed a flat design aesthetic with card and material design themes. Using impactful images and splashes of the brand blues of color allowed us to infuse energy and life throughout the design. We focused on elevating content and imagery by using surrounding light greys and white space.

 
 
 Left to Right : General page, Bucket Template, and News & Events List View.

Left to Right : General page, Bucket Template, and News & Events List View.

 

06 : Effective Technology

We chose to develop on a CMS called Craft. As a leading CMS, its seamless and simple backend user experience and customizability was exactly what we were looking for. We were able to create dynamically connected content throughout the site and integrate a number of plugins to support our functional needs, both on the front end and on the backend.  

 
 Preview of the Craft backend interface.

Preview of the Craft backend interface.

 

Result

At the end of the day, beyond the code and the pixels, how does this website impact the community of Marion?

 

Resource Hub

The city’s website now acts as a resource hub, giving users a central location to go to in order to connect to the information they need and accomplish tasks.

Enhanced Communication

Residents and city officials can now actively interact via news and announcements, forms, and the employee directory.

Accurate Representation

The site now accurately represents the community of Marion, specific to outside businesses, site selectors, investors, visitors, and tourists.

Sustainable Content Management

The site's backend now has the ability to be updated simply and easily, as the CMS has been customized to the city's specific needs for both now and in the future.

 

logo.png
 

"The new website is a 'breath of fresh air' virtually for all five senses...

... The final project is powerful, and sets the bar high for surrounding organizations and communities.  The fact that it comprehensively uses the fundamentals of our new brand is essential, and I believe the fact that Marion Design Co. also created the brand catapulted their creative freedom with a sense of pride in designing the website."

Layla Price

Director of Marketing & Community Relations | City of Marion