

PROJECT
Website Design for
Columbia County, GA

GOALS
Tell the story of the county
1
Feature the community - a thriving and family-oriented culture
2
Be represented as forward-thinking - safe, quaint, fun, yet innovative
3
Convenient access to attractions, events, features

RESEARCH
Stakeholder Survey
Community Survey
USER NEEDS:
• better content discoverability
• a way to pay utility bills
• see upcoming community events
• find job opportunities
• more call-to-action buttons for improved site navigation
User Testing
CONCLUSIONS:
• common feeling about the site hosting too much content
• navigation was used frequently to complete tasks
Analytics
Heatmaps
CONCLUSIONS:
• Call-to-action buttons showed pattern of majority clicks for “Jobs”, “Pay Online”, and “Maps”
• Footer links for “Employee Center” and “Staff Email” were most used
Card Sorting Exercise
FINDINGS:
• “Community” and “Culture & Careers” were confusing, level of agreement increased when consolidated to “Our County”


MY ROLE
Lead Designer (Granicus Inc.)
Consulted with the client on the art direction for the website. Created a design that reflects the progressive city and thriving community and incorporated innovative features to stray from the typical government website.



CHALLENGES

How to infuse the brand with the parallax animation in an elegant and unobtrusive manner?
SOLUTIONS
We leveraged the branding elements of waves and parallax scrolling to portray the county as very fluid and progressive.


thriving
FORWARD-THINKING
Trustworthy
fresh
MODERN
ENERGETIC

With the mobile-centric goal of the new website, we opted for a mobile style hamburger menu.


The brand is established at first glance with the large transparent application of the waves in the hero image space.

Updated the call to action buttons to fit within the content area rather than full browser width to be able to implement the waves on the sides without blocking the content of the buttons.

Wave elements scroll in and out of the sides of the page, in a smooth and graceful manner.

By not filling the full space of the calendar section, the asymmetrical approach gives fluidity to the design and emulating the feel of the waves but in a less direct manner.

Moved the second set of buttons to a single row and an open icon concept to differentiate from the first set, give a variety to the flow of the page, and to aid in the open feel rather than more boxes.





RESULTS
The design is modern, fresh, and energetic, promoting that connected and family-oriented culture of the community while still focusing on the information and services with the clean and spacious interface.
For a deep connection to the brand we feature the wave elements in the parallax scroll, and encompass the strong energy and liveliness of the county’s community.

