back to work

Cleveland City Council

The old City Council website was in need of a major upgrade. With a majority of their users viewing the site on mobile devices, they needed to make sure this important information would be easily accessible to all members of the community. I designed a new experience, including a fresh calendar and ward search experience, making it much more interactive and user-friendly.

Cleveland City Council main image

We found that the main reason people were coming to the City Council website was to find their ward and get information related to that and their council members. Thus, the homepage features a large call-to-action directing users to this page.

With every UX design I do, I try to pull from as much real content as possible, rather than using lorem ipsum. I have found this allows the design to fit to the content, rather than the other way around.

Cleveland City Council homepage image

The old calendar section of the website was virtually unusable. I designed a new experience which not only allows users to filter events, but navigate quickly and easily through the dates. By adding in icon indicators to differentiate between community events and council & committee events, and filters by committee type, date and ward, users have many options to narrow down and find events that are relevant to their interests and location.

The calendar view itself highlights the days which have events, and by clicking on one of the days, the events display in the list to the left.

Cleveland City Council calendar image
Find My Ward

The main reason users visit this website is to determine which ward they are in and get information surrounding that area. I designed a search input area which allows users to type in their address and get direct results displaying their council member and ward number.

From there, they can engage with the interactive map which leverages the Google Maps API to allow users to choose which landmarks they would like to display within the ward.

Cleveland City Council find your ward image
Council Members

The council member detail pages were another big focus. Each of them have a lot of information to be displayed, and the challenge was to display it in a digestible way.

Each council member has an expanding bio area, to keep this content from pushing everything else too far down. A compact version of each ward map is also displayed on these pages, with similar filtering functionality as the large map. Each page also automatically populates with related news and events from their ward.

A big piece of functionality I included was the contact form for individual council members. This allows users to reach out directly to their council person and get a direct response. This has drastically improved the amount of miscommunication and confusion both internally and from users.

Cleveland City Council council members image