think[box]

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

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:

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.

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.

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.

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.