The Problem
The Buffett Center was in need of a major website overhaul. They felt that their previous site didn’t adequately communicate their services and knew that users had trouble finding information on the site. They desired a more intuitive navigation, a fresh visual design, and an easy way for their users to obtain an understanding of the Buffett Center’s purpose. They were also specifically looking to achieve the following:
- Attract Donors by showcasing stories from the Buffett Center
- Combine the Buffett Center and the Center for Global Engagement into one website
- Solve a 3-level branding issue (Northwestern University/Buffett Center/Sub Centers)
- Ability to have multiple contributors
- Provide website support
The Solution
Through the research and interview process. we were able to determine pain points with their previous site and identify the things that needed to be improved on the future site.
- Improve navigation by incorporating a clearer visual hierarchy
- Establish a strong Buffett Center identity without losing the Northwestern University connection
- Showcase Buffett Center’s accomplishments
- Provide professional, low maintenance mini-sites for the different Programs within the Buffett Center using a content management system
- Include an easily accessible events page
Step One: Get to know the users
We had a general idea of who the users of the Buffett Center were by the involvement in the programs and events. To learn more we launched an online survey that was promoted in their weekly emails and appeared when users arrived at the website. We also looked at their current Google analytics to find usage patterns and the most viewed pages. A content analysis is performed to help us identify the content on the site, and aid in better understanding the material and subject matter. We interviewed key stakeholders, directors of the programs, and users of the site to find out what tasks they were trying to complete, and information they were looking to find.
From this research we ended up determining the following audiences:
James
Faculty Member – Non Tech Savvy
James visits the Buffett website to find upcoming events on campus. He is responsible for managing the Comparative Historical Social Science website and occasionally will email the Buffett Center staff to make changes to the website for him. He would love to be able to make these changes himself but doesn’t have access to do this.
MaryAnn
Graduate Student – Tech Savvy
MaryAnn never goes to the Buffett Center homepage. She knows the URL to her program website and prefers to just go straight there for specific information on funding and scholarships. She keeps up on the Buffett Center events from a weekly newsletter she receives.
Kelly
Undergraduate Student – Tech Savvy
Kelly is interested in learning more about study abroad programs at the university. She has never heard of the Buffett Center but has heard of the Global Engagement Studies Institute (GESI) and wants to find more information about the programs available for undergraduates who want to study abroad.
Fatih
Visitor – Average Computer Skills
Fatih has heard of the Buffett Center and knows that they have a Visiting Scholars program that he would like to apply for. He is also interested in learning more about the funding that the Center provides for partnerships and collaborations with foreign universities.
Al
Community Member – Non Tech Savvy
Al lives near the university and likes to take part in programs that are available to the general public. He also is an alum of the university and would like to donate money to a department on campus. He is looking for more information on what the center is doing in the ways of research and helping undergraduates achieve great things.
Carol
Staff Member – Tech Savvy
Carol works for the center and receives requests to update the different program sites. Sometimes it’s overwhelming for her because the websites are just a small part of her job. She constantly falls behind and wishes there was a way for the programs to update their own content.
Step Two: Brainstorm, Sketching and Review
During this part of the process, we started to look at ways we can improve the site. We looked at what other similar programs and centers are doing on their websites, and how their content is organized. We used Pinterest as a team to create a private board where we share ideas and concepts that we like. We startde to organize the content on the site and hold sketching sessions for any interactive features. From there the sitemap and wireframes can be started, and the development team can start working on a proof of concept for the interactive features.
Step Three: Sketch, Review, Revisions
At this part of the process, initial wireframes are sketched out and reviewed by the team and any revisions are made. A digital version is done using OmniGraffle to test the new site architecture and wireframes.
Once the sitemap and wireframes are completed, the project team reviews the material and prepares to have it tested. Testing participants are recruited, and scenarios are created to see if the new architecture and labelling make sense to the users. During this phase, we use in-person interviews, and once testing is finished, we regroup to discuss any changes to labelling, or the over all architecture.
From there we meet with the clients to present our recommendations and get feedback from them. If there are any changes to the content or structure they’re incorporated into a final site map that development uses to build the site.
Step Four: Sketching, Design, Review and Revisions
By this time Element Collages have been created and shown to the Buffett Center. These allowed the Buffett Center to see how the new content might be styled and get an early opinion as to their font and color preferences.
From there using the wireframes as guidance, visual designs are created for the website. Usually, there are at least two designs that are created and then are reviewed by the team. Any changes or revisions are made before they are prepared for a Click Test using Solidfy. In Solidify we are able to present scenarios to the users and capture the results to see if they were successful at completing the tasks. If there are problems or issues finding information, the designs are revised and tested again. In this instance, users found the double row of stories to be visually overwhelming. We removed the second row of stories and added in a large hero image for the Buffett Center to use as a way to visually represent what they do. This second version tested better with users, where they felt there was more of a visual impact, and not as much content.
Once the testing is completed, the designs are shown to the clients for approval. Below is the final approved design.
Step Five: Coding, Testing, and Revisions
Once the design is approved a comprehensive style guide is created and handed over to a front-end designer. Working as a collaborative team, the code is checked to make sure it matches the approved design. Once the code has gone through an extensive quality assurance process, a dev site is created and tested. Testing is done using in-person interviews, and if there are any problems arise, the site will be revised and tested again.
Step Six: Development and Quality Assuance
The development team takes the approved HTML and CSS and creates a project in the Content Management System. All of the different page types are created, and the site is checked again for quality assurance. Once everything is approved, the site was launched.