WBI Website process

The Workplace Bullying Institute (WBI) is the sole United States organization dedicated to the eradication of workplace bullying. I was hired in January of 2009 to revitalize the institute’s online presence.View the redesign at www.workplacebullying.org. Note: WBI has taken over the management and updating of the site.

Research

After reviewing the user analytics for WBI’s website it was clear that there was a problem. 61% of the users were spending thirty seconds or less at the website and the majority of users were not getting past the first level of the website. The problem was not the lack of content but a lack of incentive to stay on the site and a confusing navigation which stopped users from navigating deeper into the website. With a redesign Dr. Ruth and Dr. Gary wanted to simplify the content, improve navigation and provide a way for their readers to become more involved.

Design Challenges

Some challenges I faced while redesigning the website include

• Decreasing the bounce rate.
• Working within exiting branding structure.
• Creating a community.
• Improve the information architecture of the site.

Creating a Community

The WBI website is a place where targets of bullying can go for help. The former website provided a lot of information but it was difficult for users to find it. I restructured the site based on audience, target, employer, research, and further organized the target section into problem, impact and solution. The root level of the website was turned into a blog so returning users would experience fresh content and create discussions about the articles. The implementation of the blog has been a great success, in a three month span we saw 275 comments on different blog articles.

Information Architecture and Navigation

Redesigning the Workplace Bullying Institutes website started with the reorganizing of the websites content. It was clear that the site provides ample resources, the problem was in its organization. Visitors were not presented with an easy way to dig deeper and find the information they were looking for.

Sitemap Before

I started out by evaluating the websites current structure. When a viewer reached the landing page they were presented with 21 different directions they could go in the website.

Click to enlarge

Sitemap After

Once that information was laid out I started the task of organizing and creating a hierarchy for the website. We broke the sections down into audiences, those being bullied, employers, viewers interested in the research and academic side of bullying, and media resources. The Target section was broken down further into three avenues: problem, impact and solution.

Click to Enlarge

Existing Branding

WBI’s existing branding dates back 10+ years. My job was to find solutions that revitalize and modernize the organization but would synthesize with current logo and color choices and not alienate their current client base. I chose to only slightly update the logo and focus more attention on updating the visual appearance of the website. Working with Ruth and Gary, we found the design solution that best presents the mission of WBI while not compromising any of its content. For this website it was about finding the right balance between visual appeal and usability.

Wireframe Sketches

The next step was to wireframe the site. Before this happened I researched into website grid standards and settled upon the 960 grid standard. According to our past analytics many of our users work on older computers with smaller monitors. The 960 grid system was a happy medium allowing the website to display in a well designed manner for users on most screen resolutions.

First I started out sketching wireframes of the website, we discussed the strengths and weaknesses of each section.

Primary, Secondary and Tertiary Level Sketches

Color Sketches

After discussing the sketches with Dr. Ruth and Dr. Gary I combined the strengths in the sketches and started working on color variations of the front page.

Refinements

I then worked on refining the secondary and tertiary levels of the website.

Building the site

Once the design was hammered out on paper I started the enormous task of building the website. The front page of the website is powered by WordPress. I created a theme for WordPress that is almost identical to the static WBI pages. This way the user can experience both dynamic and static pages without knowing the difference. The bulk of the website was created in standards compliant XHTML and CSS. PHP and javascript was used for select special features in the website.

Special Features

In addition to the blog here are some special features present in the website.

Media List

With the help of my colleague David Phillips we created a dynamically generated media list. Dr Gary wanted an archive of his press appearances but I was concerned about hundreds of pages cluttering up the website. Since many of the media appearances will be posted as blog posts we set up a system. The Media page pulls all blog posts that are assigned the category “media appearances” and displays them in a table on the media page. This allowed us to have an easily accessible archive without having to create each page.

The Media page can be found here.

Facebook Integration

I also linked the blog with our Facebook page. Now every time a blog post is published it appears as a new note on Dr. Gary’s Facebook page. This has further increased our readerships and allowed users who visit Facebook more than they do our website keep up with current news and articles.

Launch Results

The new design was launched during May 2009. Within the month we saw readership double and its still rising. The bounce rate also significantly decreased, in January of 2009 76.1% of the people who visited WBI left within 30 seconds of viewing the site. By mid-July the rate had decreased to 69.2%.

““Noelle was tasked with the strategic integration/consolidation of eight websites for three different enterprises. Once the strategy was approved, she began the redesign of the principal site. Her first redesigned site increased traffic, led to new business alliances, and positioned us as world leaders for a social movement.”      -Dr Gary Namie, Director of WBI

After implementing the blog structure we have also seen an enormous amount of commenting and discussion which was not present in the original WBI website. We also seen newsletter sign up quadruple.

View the redesign at www.workplacebullying.org

Below is an graph demonstrating the number of visitors before and after the redesign.

NOTE: The redesign launched in May of 2009.