American Social History Project

2012 Version.
WordPress, HTML/CSS. Wireframing, Javascript, JQuery, Sass, XML, PHP, MySQL, Interaction Design, Strategic Planning, Participatory Design

>> Link to Site [http://ashp.cuny.edu]

Project Background: As the organization’s homepage, the look and feel is very important to the how the organization believes others perceive ASHP. The process for designing the webpage was participatory from the beginning, involving every member of the staff in an array of activities, including sketching, looking at other organization’s websites, and reviewing as a group our Google Analytics to see how our current website was being used.

This project did not have a budget for user-testing; therefore, a good deal of the process was working with the design team and I was doing “expert” review to bring about design challenges and obstacles.

Early in the process I designed a version of the webpage, which our design team liked and eventually many key components of that early design made its way into the final design. This design below was a high fidelity wireframe which used HTML, CSS and Javascript to demonstrate the intended functionality of the end site.

On of the initial findings during our look at the analytics was that a large number of our site’s users were on mobile. The original ASHP site used flash and did not display well on those devices. The web team is quite small at ASHP; therefore, a dedicated mobile site or a mobile app was not going to happen in the time and budget this project was allotted. I used my skills in CSS to make the new ASHP website fully responsive.

In the first few weeks of the site’s launch in 2013, we noticed increase clickthrough rates from the homepage and a higher conversion rate for actionable items which were featured on the homepage. Though the site is still young, initial indications are that the design has improved in several ways upon the original.

Information Architecture

One of the major challenges was making sense of the wide array of materials that ASHP wanted to showcase on their site. The IA of the site was considered in both iterations. In the first version of the site, hundreds of disparate ideas and unlinked pages were put onto a table and sorted into a limited number of framing ideas which helped explain what ASHP does. For the 2013 version, there were many new pages to add, and vestigal elements to remove. Below, you can see one of the sitemaps that we used during the process to help define the overall structure and hierarchy, as well as guide the team over the course of sorting and creating new pages.

Backend Usability

This new version will include back end improvements which seamlessly merge the unique fields with the WordPress backend.

2009 Version.
WordPress, CSS, Javascript, PHP, MySQL, Photoshop

The American Social History Project website was a study in how to make use of an existing content management system, in this case WordPress, and make it looks as little like a WordPress website as possible.  I used statistics collected from Urchin and Google Analytics in combination with surveys of our site’s users to determine which features should be the focus of the re-design. I presented this information to the design staff; then I implemented the designer’s layout and customized it to fit within the constraints of WordPress. Additionally, I modified several add-ons and created unique add-ons to handle the client’s custom specifications.

In addition to implementing the design, I worked with staff to implement a social networking strategy (including Twitter and Facebook) to accompany the site relaunch.