Sustain Chicago
A Digital One-Stop Shop for Going Green
THE CHALLENGE
The City of Big Shoulders has long been a leader in a global movement to promote environmental responsibility. After spearheading the internationally endorsed Chicago Climate Charter, city leaders set out to engage residents in the fight for a better future, beginning with a new public resource.
![Rooftop greenery with Chicago skyline in the background](https://firebelly.cachefly.net/imager/work/sustain-chicago/115849/1-CC-Recycle-Center_ed3c16965e827dd0a241775a2f444a82.jpg 1800w, https://firebelly.cachefly.net/imager/work/sustain-chicago/115849/1-CC-Recycle-Center_ee454403221da81e614f074db209e986.jpg 750w)
THE SOLUTION
The Mayor’s Office tapped us to develop a holistic digital strategy and one-stop shop for all things sustainability. By sharing resources, best practices and local profiles, Sustain Chicago helps residents of all ages understand climate change and cultivate healthy, resilient communities.
![Text that asks how might we?](https://firebelly.cachefly.net/imager/work/sustain-chicago/119642/CC-HowMightWe-v1_e0a246b1bf6b93fc5e645de89e313158.png 1200w, https://firebelly.cachefly.net/imager/work/sustain-chicago/119642/CC-HowMightWe-v1_ee454403221da81e614f074db209e986.png 750w)
![Text that answers a how might we question saying broker a conversation, celebrate community initiatives and empower](https://firebellydesign.com/uploads/work/sustain-chicago/CC-TypeAnimation-v2.gif)
![Full view of Sustain Chicago home page](https://firebelly.cachefly.net/imager/work/sustain-chicago/116166/CC-Website-Home-v1_e0a246b1bf6b93fc5e645de89e313158.png 1200w, https://firebelly.cachefly.net/imager/work/sustain-chicago/116166/CC-Website-Home-v1_ee454403221da81e614f074db209e986.png 750w)
![Full view of Sustain Chicago project page](https://firebelly.cachefly.net/imager/work/sustain-chicago/116165/CC-Website-Energy-v1_e0a246b1bf6b93fc5e645de89e313158.png 1200w, https://firebelly.cachefly.net/imager/work/sustain-chicago/116165/CC-Website-Energy-v1_ee454403221da81e614f074db209e986.png 750w)
![Mobile view of home page and energy projects page](https://firebelly.cachefly.net/imager/work/sustain-chicago/122715/CC-Mobile-Home-v3_e0a246b1bf6b93fc5e645de89e313158.jpg 1200w, https://firebelly.cachefly.net/imager/work/sustain-chicago/122715/CC-Mobile-Home-v3_ee454403221da81e614f074db209e986.jpg 750w)
![mobile view of a drop down and Divvy bikes project page](https://firebelly.cachefly.net/imager/work/sustain-chicago/122716/CC-Mobile-HomeDropDown-v3_e0a246b1bf6b93fc5e645de89e313158.jpg 1200w, https://firebelly.cachefly.net/imager/work/sustain-chicago/122716/CC-Mobile-HomeDropDown-v3_ee454403221da81e614f074db209e986.jpg 750w)
The site strikes a balance between urgency and inspiration, encouraging immediate action without overwhelming users.
Collaboration and Iteration
Given a profoundly diverse audience of 10.8 million in the greater metro area, encompassing divergent needs and experiences, we prioritized early exploratory research, as well as usability and validation testing throughout the process.
Through meetings with community leaders and concerned citizens, we identified key strengths, assets and pain points around sustainability to shape content priorities. After creating high-fidelity wireframes, we partnered with CUT Group to conduct usability testing and guide refinements to the information architecture, copy and page layouts.
![Text that reads target audience millions](https://firebelly.cachefly.net/imager/work/sustain-chicago/116685/CC-TargetAudience-v1_e0a246b1bf6b93fc5e645de89e313158.png 1200w, https://firebelly.cachefly.net/imager/work/sustain-chicago/116685/CC-TargetAudience-v1_ee454403221da81e614f074db209e986.png 750w)
![Text that reads focus groups: mayor's office, city reps, community leader](https://firebellydesign.com/uploads/work/sustain-chicago/CC-FocusGroupAnimation-v3.gif)
Strategic Design + UX
Every design decision was deliberate: bold typography and chromatic hierarchy; clear, consistent interface and interaction patterns; and multiple, objective-oriented user pathways. Taken together, these elements distinguish Sustain Chicago from many public sector websites, while retaining the authority and accessibility of a well-run public service.
![Animation of navigation rollover](https://firebellydesign.com/uploads/work/sustain-chicago/CC-NavigationRollover.gif)
focused navigation
We kept the navigation lean and mean, testing and finessing all labels to ensure site visitors could intuitively find the information most relevant to them.
![Animation of language drop down rollover](https://firebellydesign.com/uploads/work/sustain-chicago/CC-LanguageRollover.gif)
Language
We built in key style adjustments for languages like Chinese and Arabic, adjusting line heights for legibility and reversing page layouts for right-to-left reading.
![CC Dropdown Animation](https://firebellydesign.com/uploads/work/sustain-chicago/CC-Dropdown-Animation.gif)
Quick Access Menu
An action-oriented dropdown menu greets visitors on the homepage for quick access to their known common needs.
![Animation of search bar rollover](https://firebellydesign.com/uploads/work/sustain-chicago/CC-SearchRollover.gif)
HOVER INTERACTIONS
Large, noticeable rollovers and touch-friendly hit states make for an accessible — even delightful! — user experience.
![Animation of hover state rollover](https://firebellydesign.com/uploads/work/sustain-chicago/CC-ImageRollover.gif)
![Sustain Chicago website color palette](https://firebelly.cachefly.net/imager/work/sustain-chicago/121322/CC-Colors-v3_ed3c16965e827dd0a241775a2f444a82.png 1800w, https://firebelly.cachefly.net/imager/work/sustain-chicago/121322/CC-Colors-v3_ee454403221da81e614f074db209e986.png 750w)
A harmonious, high-contrast color palette allows for clear combinations, ideal for presenting infographics and focused content call-outs.
Campaign Roll-Out + Impact
With the site tested, vetted and officially live, City Hall commissioned digital billboards, placed strategically in high-traffic areas, and took to social media to announce its launch.
![Bus stop billboard that says connect with local resources to build a more sustainable chicago.](https://firebelly.cachefly.net/imager/work/sustain-chicago/121602/CC-BusStopMockup-v1_ed3c16965e827dd0a241775a2f444a82.jpg 1800w, https://firebelly.cachefly.net/imager/work/sustain-chicago/121602/CC-BusStopMockup-v1_ee454403221da81e614f074db209e986.jpg 750w)
![Series of four downtown bus stop signs that say connect with local resources to build a more sustainable chicago.](https://firebelly.cachefly.net/imager/work/sustain-chicago/121601/CC-BusMockupLoop-v1_ed3c16965e827dd0a241775a2f444a82.jpg 1800w, https://firebelly.cachefly.net/imager/work/sustain-chicago/121601/CC-BusMockupLoop-v1_ee454403221da81e614f074db209e986.jpg 750w)
![high rise buildings along Chicago's riverfront](https://firebelly.cachefly.net/imager/work/sustain-chicago/117097/CC-Buildings3_e0a246b1bf6b93fc5e645de89e313158.jpg 1200w, https://firebelly.cachefly.net/imager/work/sustain-chicago/117097/CC-Buildings3_ee454403221da81e614f074db209e986.jpg 750w)
![Speaker at a podium addressing a crowd](https://firebelly.cachefly.net/imager/work/sustain-chicago/117096/CC-Anne-Action-Shot_e0a246b1bf6b93fc5e645de89e313158.jpg 1200w, https://firebelly.cachefly.net/imager/work/sustain-chicago/117096/CC-Anne-Action-Shot_ee454403221da81e614f074db209e986.jpg 750w)
While fighting climate change will take a massive, coordinated effort at every level of society, Sustain Chicago is ultimately about supporting people and communities in our day to day lives — reminding us that what we do matters, and with a little guidance and a lot of determination, we can all help care for the planet and our collective future.