We're pleased to share the launch of the new The Center on Philanthropy website. Our team loves working with both higher education and nonprofit clients, and as the preeminent academic center dedicated to increasing awareness and understanding of philanthropy, COP was a great fit for our team. This launch marks our team's largest project to date.
More than a year in the making, this website has about four times the amount of content of our typical website launch. To wrangle that amount of content, we employed several methods of planning, content management and testing to ensure clarity and ease of navigation in the finished site.
Above any other method we implemented, building a prototype of the website was key to the success of this project. Most website projects involve a wireframing phase, in which simple boxes and placeholder text let the client see how content will be organized and displayed on the site. Frequently, these are static images that don't show what can be clicked on and where each link will take the user. A prototype of interactive wireframes allows us to show our client exactly how the site will flow well before the design and development begins.
In the above wireframe example, you can see there isn't a whole lot of ooh-la-la, fanciness to it. No colors that pop, not much style at all. This allows us to focus on the organization of the content without being drawn in by the shiny object that is design. It's much easier for a client or designer to overlook a content requirement when we get distracted by our response to design.
How do you know if you need interactive wireframes to plan for your site's content? Every organization's needs are different, but as a rule of thumb, organizations with a large number of stakeholders, those interested in user testing and those needing sites with complicated functionality should consider including this step in their website planning phase.
Here are the wireframes and the completed design, side by side.
Pretty cool, huh? You can go here to click though the COP wireframes to see how they work.