The Client Challenge
Recently, the Boston University School of Public Health Activist Lab enlisted the help of pixelslam to create a small four-page website. The Activist Lab wanted the website design to include a homepage containing four images. These images would provide links to individual interior pages & external resources on the main BU website.
We always like to do a thorough analysis of each client’s needs in the proposal phase. Questions from the pixelslam team during our discovery meeting uncovered functionality and architecture requirements that had previously not been considered.
The real challenge was volume. The Activist Lab had so much original content that they realized the site needed to contain more than just four pages. Together, we agreed that the new WordPress website would require a more complex system of navigation.
The New Website Design
An Enticing Blog-Style Layout
To accommodate the large number of interior pages on this website, each with small amounts of content acting as portals to other websites and information, pixelslam suggested creating custom post types or pages.
- These could be automatically displayed in a masonry or blog-style layout.
- Enticing images would be used to draw users into the content.
Multi-Image Navigation
Having said that, the multi-image navigation originally proposed by the client for the homepage remained a critical requirement throughout the discovery process.
That’s why pixelslam created a multi-layer image system with rollover messaging. This feature includes links for desktop display and an alternative display for touch devices such as smart phones.
A Unique “Synced” Calendar
One of the most important website features was a prominently-displayed calendar. This tool would permit Activist Lab staff to create their own custom event posts and automatically import events from the main BU calendar (BU’s iCal feed).
To make it work, pixelslam installed an events system from Modern Tribe.
- Events can be published and unpublished as needed on the Activist Lab website without affecting the display on the BU calendar.
- This system allows the Activist Lab to manage exactly which events are shown on the website and ensure only relevant events are displayed.
Embedded Homepage Video
It was equally important for the Activist Lab that the website design include multiple videos on the homepage that could be viewed in a large format without forcing the user to leave the site.
To solve this problem, pixelslam included a single large video with a thumbnail navigation for additional videos. These videos can be expanded into a modal window, keeping users on the site while allowing them to view the content in a larger format.
Usability & Search Considerations
During development, pixelslam recommended that the site include a traditional navigation at the top of the page, similar to other university websites. This would give users the ability to move around the site without going back to the homepage and the four-image navigation originally proposed.
On the advice of our UX experts, pixeslam also suggested that the new website design should have an on-site search feature to a) improve usability and b) promote insight into visitors’ search keywords. In addition, we decided to create a search engine-friendly sitemap based on the content supplied.
News Section
In addition to sitemap changes, other needs were identified and requested as the design process progressed. For example, the Activist Lab realized it would be useful to have a news section and a photo gallery.
For the news section, a custom post type was created. This has the benefit of reserving WordPress’s core Posts feature for a blog should the client ever desire one.
Story Siders
After developing a prototype photo gallery for the homepage, we decided to rework the client’s initial request in favor of a photo slider or—more accurately—multiple photo sliders.
At the launch, the website showed two such “story” sliders in a responsive, multi-column layout.
- This layout can accommodate up to four sliders without any additional changes to the page template in the future.
- Like the videos, these allow visitors to expand the sliders to view larger images in a modal view.
Contact & Subscribe Forms
The final touches were a contact form and subscribe form. These forms are integrated with Mailchimp and social media. Happily, pixelsam was able to adapt the site to include these new features without breaking from best practices in website design.
The Final Result
In the end, pixelslam delivered a custom-built WordPress website that allows the Activist Lab to easily add new pages.
- Pages are automatically integrated into the website’s section layouts using custom page layouts, content templates, and post fields. This minimises any need for extensive WordPress knowledge by the client.
- At the same time, the Activist Lab staff have the ability to remove old and irrelevant content quickly and easily.
With pixelslam’s custom system, this university website is ready to grow exponentially!