The Larry Sears and Sally Zlotnick Sears think[box] is one of a kind in the country as it is a seven-story, 50,000-square-foot facility that is open to everyone at no cost.
The staff at the think[box] reached out to have their site redesigned and noted that not only did the site visually not represent what was happening daily at the think[box] their users were struggling to find what equipment was available for use as well as other opportunities that were available, such as funding for projects. They came to us with a long list of needs some of those included:
- Being able to embed Google Calendars, YouTube and AirTable forms
- Ability to add accordions, image galleries, and customizing the pages with a determined set of features
- Able to tag content to create views within different areas of the site (such as News, Equipment, and events)
- Ability to publish instantly (as their current CMS they had to wait overnight for edits to publish)
- More intuitive information architecture
- Ability to showcase projects developed within the think[box]
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 that allowed for a deeper navigation
- Create an internal taxonomy tagging system to allow them to cross reference content easily within the site
- The site visually should showcase the projects and equipment available for use.
- By moving them into Drupal 9, they would be able to easily accomplish some of the technical things they were looking to add to the site.
- Include events and news feeds
Step One: Get to know the users
We had a general idea of who the users of the think[box] were as the staff keeps track of who visits the facility. However, they also wanted to include some audiences such as donors who might not have visited or know about what think[box] has to offer. In addition to this, we interviewed stakeholders, performed usability testing on the current architecture, did a competitor review and reviewed analytics.
From this research we ended up determining the following personas:
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.
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.
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.
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.
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.
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.