In late fall 2014, the Mayor’s Fund for Philadelphia engaged Interactive Mechanics to redesign and rebuild its outdated website. Through a collaborative process involving design, development, and user testing, we created a custom WordPress site that helps the Fund effectively communicate its mission, programs, and impact
UNDERSTANDING DIFFERENT AUDIENCES & PRIORITIES
The Mayor’s Fund for Philadelphia works with a range of civic and cultural organizations and agencies to improve the quality of life for all Philadelphians, including programs such as the Better Bike Share Partnership and My Brother’s Keeper Philadelphia. During our discovery meetings at City Hall with the Mayor’s Fund staff and board, we heard how important it was that the site focus on the great programs the Fund supports. The Fund wanted the site to highlight them in a consistent way and to clarify the connections between the programs and the Mayor’s strategic goals around its five priorities. Programs supported by the Fund must align with at least one goal, but many programs connect to multiple goals. For example, My Brother’s Keeper aligns with the Mayor’s priorities around Public Safety, Education and Health, and Place of Choice.
USER CENTERED DESIGN PROCESS
To keep the focus on programs, we gave each its own profile page, complete with a large feature image, a narrative description, and a sidebar that could contain a variety of content types, including videos, sponsor logos, and contact information. We also created a large slideshow of programs on the homepage to ensure that the programs were the first thing visitors encountered.
Color-coded icons corresponding with the Mayor’s five priorities served as a visual shorthand that allowed us to tie multiple priorities to a program. The icons are intuitive and memorable, but understated so that the user’s attention remains on the programmatic content.
From a technical perspective, we built the site using Twitter Bootstrap, a mobile-first framework, making the site fully responsive, and constructed custom WordPress templates. Using WordPress as a CMS makes updating and maintaining the site easy for the Fund’s staff. We also ran the site through Web AIM’s Web Accessibility Evaluation Tool to ensure that the site met universal usability standards.
Before the site launched, we interviewed a handful of Mayor’s Fund stakeholders about the site. Incorporating feedback from those users helped ensure that the site not only met the Fund’s original goals for the project, but generated a sense of pride and excitement. We enjoyed working with the Mayor’s Fund and learning about the great programs it supports, and we’re so excited to share the site with everyone.