Excelerate: The Campaign for Binghamton

BINGHAMTON UNIVERSITY

Binghamton University hired my employer, SteegeThomson, to brand and message their capital campaign. The contract included developing the information architecture and general structure of their campaign website. We weren’t contracted to visually design the site (that role fell to the in-house team at Binghamton), so we took it to the low-fi prototyping stage. The clickable prototype made it much easier for clients to understand the site structure we had developed. 

 

TIMELINE

2020-2021

COMPANY

SteegeThomson Communications

DELIVERABLES

Campaign website content, information architecture, and low-fi prototype

Campaign Brand

MY ROLE

Lead and sole UX designer

DEFINING THE SITE GOALS

Before we could get started on the campaign website design, we had to establish the goals for the site. Why were we building it? What was the purpose? These goals were determined through interviews with the stakeholders.

KEY SITE GOALS:

  • Inform donors and alumni about the campaign’s priorities and goals
  • Aggregate stories and news generated about the campaign themes
  • Encourage site visitors to engage with and donate to the campaign
    •

DEFINING THE USERS

After we established the “why” of the site by defining its goals, we established the “who.” Based on pre-established personas used frequently by Binghamton University’s communications department, we developed two distinct user types. This helped keep us focused on the end user when establishing the information architecture for the website.

USER TYPE A

Young alum who wants to stay informed about their alma mater and possibly make a small gift in order to give back.

USER TYPE B

An older alum who has a history of giving to Binghamton. They want to influence the growth of the school with a large donation.

STUDYING OTHER SITES

In order to establish the layout of the campaign site, I conducted a simple competitive audit. I looked at several direct and indirect competitors’ campaign pages. I also looked at news websites to see how they handle the aggregation of many stories from different sources. 

grid of six example websites

KEY TAKEAWAYS:

  • It's good to use cards to help organize the varied information on the site
  • Campaign sites often have a "give" button featured in the site header
  • A campaign's priorities are often outlined clearly on the home page
    •

DEVELOPING A SITEMAP

The next step was developing the sitemap. Two of the priorities for the site were easy discoverability of the individual priority pages and the individual schools pages. It was important for the client to understand how easy it would be for users to find key site content, so I developed a sitemap to communicate the site’s structure. 

ESTABLISHING THE USER FLOW

Once the sitemap was set, I developed a user flow diagram to help track the user’s actions throughout the site. Another priority of the site was encouraging users to engage with the campaign, so we wanted all pages to lead the user to the “engage” page, where they would be offered several options for how to participate in the campaign.

CREATING PRELIMINARY WIREFRAMES

In the wireframing stage we worked out the placement of specific content for each page. This was also the stage where we established the content types for the site, like embedded videos and news/story cards. To help the client decode the wireframes, I annotated the design and presented it to them via Invision.

PROTOTYPING THE WIREFRAMES

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac blandit justo. Praesent volutpat sodales leo at ultricies. Cras consequat elit eget arcu euismod aliquam. Integer aliquet tortor purus, eget molestie sem pharetra ut. Pellentesque porttitor nulla leo, vel accumsan nisl rutrum in. Morbi ut gravida mi.

screen capture of the clickable prototype showing the screen connections

WRAPPING UP

Looking back on this project, there were a number obstacles that we had to work around, and there are things I would have changed about the process to further enhance the usability of the site:

  • SITE CUSTOMIZATION: We had to design the site within Binghamton’s site, using their pre-existing modules. It would have been nice to be able to design and build the site from scratch.

  • USER TYPES: Ideally I would have consulted more closely with the people in charge of providing the user types in order to get more details about their users’ experience with the existing website.

  • BROADER AND FORMALIZED USER TESTING: Our only user tests were informal unmoderated user tests with stakeholders. Our clickable prototype was circulated among the stakeholders, and we made edits based on that feedback. In an ideal world, I would have tested the site with the actual user types we were given.