Laptop displaying the homepage of the City of Marion website, featuring an autumn scene with chairs on a leaf-covered lawn, trees, and sunlight.

CITY OF MARION
WEBSITE

< Back to Work

Illustration of a computer monitor with a teal back panel and a blank white screen, placed on a black background.

Website & Development

2018

Illustration of stair steps with an upward arrow, a yellow dot, and a black 'X', symbolizing steps or progress.

FROM PROBLEM
TO DESIGN

Our Process

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.

  • 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.

    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.

  • 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 was 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

    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.

    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.  

  • 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.

    "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

A website screenshot of the City of Marion, Indiana, featuring a large banner image of two people riding on a wave at a water park, with various news articles and announcements listed below.

Before:

Collection of three overlapping screenshots of the City of Marion's website, showcasing sections for 'Living,' 'Splash House,' and community events with photos of a water park, outdoor gathering, and smiling residents.

After:

A website homepage with a background photo of a park in sunset with trees, a row of tall trees, and Adirondack chairs on fallen leaves; navigation menu with categories: Living, Business, Visit, Government, News & Events, About, Contact; weather widget and news section overlay.
Screenshot of the City of Marion, Indiana official website homepage featuring a landscaped park with Adirondack chairs at sunrise, a map of Marion, and city news, events, and links.
Screenshot of the City of Marion website on a laptop and smartphone, featuring a background image of a park with chairs, trees, and sunlight.