Responses by Ariel Rudolph, UX/project lead, Tom Tian, design and Matt Soria, development, Firebelly Design
Background: Sustain Chicago is a one-stop shop for all things sustainability. By sharing resources, best practices and local profiles, it aims to help Chicagoans understand the impact of climate change, while encouraging them to adopt green habits.
Highlights: The site strikes a healthy balance between urgency and inspiration to underscore the need for immediate action without overwhelming users. Given the amount of content, we made strategic design and UX choices: bold typography and chromatic hierarchy; clear, consistent interface and interaction patterns; and multiple, objective-oriented user pathways—all of which help distinguish it from many public sector websites, while retaining the authority and accessibility of a well-run public service.
Challenges: The Focus Areas module on the homepage presented a new (and ultimately fun) frontend challenge—users can scroll through focus areas and pull up details about featured projects in a modal right from the interface.
Favorite details: The site’s range of hovers and focus states. We selected highlight colors and transformations that not only worked well with a complex palette, but also prioritized accessibility for users with visual impairments—thanks to the team behind the Stark plugin for Sketch, which enabled us to test colorways for contrast and usability.
Behind the scenes, our developer took a modular approach to the site’s code, so components can easily be added to any page and work precisely as intended. Finally, many of the labels used were refined through user testing, conducted by the CUTGroup, which closed the gap between our assumptions about how average users might navigate the site and reality. Their feedback was essential to creating a positive user experience.
Anything new: We continued to refine our internal workflow with Sketch and InVision, especially when the project required more extensive prototyping and testing. We also explored a newer feature of Craft, which enables backend users to choose a focal point when adding an image. Last but not least, we learned about key style adjustments for languages like Chinese and Arabic, adjusting line heights for legibility and reversing page layouts for right-to-left reading.
Alternative approach: More hands-on discovery, earlier user testing and more robust planning. Creating a detailed road map that includes strategic points for user testing and feedback helps align folks around clear expectations and shared priorities. Had we teased out more detail about the city’s previous sustainability-related projects and conducted tree testing earlier, we may have saved ourselves enough time to tackle “nice to have” features like interactive data visualizations and a more robust, dynamic compendium of neighborhood projects.