Digital Designer
marion1.png

City of Marion Website

 

City of Marion Website

The team and I at 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.

While I was involved in a few meetings with officials my main role was to audit the previous site, layout the groundwork for what was ahead, audit sites similar, and implementing the cities new visual identity into the new site.

Team:  Luke Anspach, Jalen Moore for Marion Design Co.


 
 

Background

 
com_mobile.png

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.

 
 
 
New website landing page.

New website landing page.

Goals & 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).

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

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

 
 

The Process

01 : Site Assessment

We started this process meeting with city officials and laying the groundwork for the website. I 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 possible target audience, 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 : Focusing User Goals

 The team then established and defined a hierarchy of user goals to best serve our audience based of the feedback we received: 

  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.

 
 
 
 

05 : Invigorating Design

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 high quality images and splashes of the brands color allowed us to infuse vibriancy and life throughout the design. We focused on elevating content and imagery by using surrounding light greys and white space.

 
 
 

Conclusion and Results

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

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.

 
 

Go ahead and check it out for yourself: