Overhauling the Allied Media Projects homepage

Most people associate the Allied Media Projects organization with the annual Allied Media Conference. To some extent, that makes sense because prior to the formation of the Detroit Digital Justice Coalition in 2009 and the subsequent launch of the Detroit Future media training programs, AMP’s primary focus was organizing the conference. Through the launch of Detroit Future, AMP has grown its vision and successfully built out a range of new programs which seem to be evolving on a daily basis. At the same time, the process of the presenting the Allied Media Conference has become a year-round collaborative organizing process, engaging dozens of coordinators from across North America in presenting tracks and sessions, network gatherings, and practice spaces. Over 2,000 participants are expected for the 2012 AMC.

As AMP’s work continues to multiply, it’s no longer able to comfortably nestle its organizational identity solely within the Allied Media Conference. In the summer of 2011, it became increasingly clear that AMP needed to create an accessible, engaging and clear website that communicated who it is as an organization, what it’s doing and where it’s headed.

To approach this project, we started by illuminating AMP’s story through a narrative-based navigation system. Relevant information, projects or programs are embedded within concise narrative-based tooltips. The menu is synchronized to a connected, photographic animation sequence. Both the photos and the navigation work together to communicate and contextualize the network relationships as a user moves through the site. This flexible system allows for the narrative to evolve and change over time and is responsive to rescaling browsers and mobile phones.

We established the need for ‘News’ to be the secondary content for the home page because AMP (as an organization) wanted to be the core source of all network-related happenings. After researching the best practices for news presentation through a series of investigative and discussion sessions, we designed an approach that could act as a somewhat interchangeable design module. It can be implemented in the future throughout other AMP-related websites.

The full site is also built to be responsive to a range of browser sizes and flexes for smartphones.

As with most of our projects, our process is open to our clients and we value participatory design. AMP had a constant communication line into our design and development process in the same way that our internal design and development processes are interlinked in our studio. We’re always collaborating. As the website evolves, we’re planning a transparent funding and finance section -- we plan to build interactive infographics where the user can learn more about AMP’s funding mechanisms, financial history and grant solicitation processes, amongst other ideas.

In looking toward the future, we’re also really excited about the potential of implementing a collaborative brand identity and a donation campaign to continue to build and communicate AMP’s emerging, multidimensional story!