Introducing the Website Design Concepts

Introducing the Website Design Concepts

One of the most exciting moments during a website redesign project is when design concepts are unveiled. For the first time, high-level concepts, abstract thinking, and text documents come to life in a way that everyone can instantly relate to.

Fastspot has unveiled two design concepts for Trinity’s website homepage. In this post, you will find the following items:

  • A motion comp for each of the two designs (a video that shows how each design looks and its behavior) with high-level concepts about each design. We want you to see how the design looks and how it behaves for users.
  • Background information that gives context for how we arrived at these designs (our overarching creative concepts)
  • A request for your help. We want to hear your feedback on these designs.

Design One

This design creates an immersive takeover to connect people to the right type of content they’re looking to find. It features a full-screen experience with background atmospheric video (photos can also be swapped in). The Programs, People, Places,  and Pride menus (known as the progressive navigation in our information architecture) are the main storytelling devices on the homepage, and the content that’s progressively revealed in each of these sections allows for a wide variety of metadata to accompany each feature before users can decide to click over to the full section or story. Within the Programs section, a search and filter function allows users to filter by program category (which will change the results on the right side of the page) or to search for a particular program.

The navigation uses a mobile-first approach with the use of the “hamburger” menu in the top right corner, and it contains the traditional site architecture menu as well as the search function. Additional topics and audience navigation can be found in the footer of the homepage. The calls-to-action are housed in a sticky navigation at the top of the page (and throughout the entire site).

There is a seasonal Important Things to Remember section that will showcase stories most relevant to a particular time of year.

All photos, videos, and text within this concept are for placement only (FPO), and do not represent final decisions on photography, video choices, or approved copy.

  • Look and feel concepts for this design: connected, vibrant, innovative
  • Tone and voice concepts for this design: welcoming, thoughtful, energetic

Design Two

This design has some notable differences from the first design concept.

The images at the top of the homepage are are triggered to change using mouse over in the left area of the screen. This is designed to be more playful, rather than using the traditional model of random or looping image rotations. The Programs, People, Places, and Pride menus move from equal weight to prioritizing Programs with a large call out that bumps open to reveal the entire list of academic programs. People, Place, and Pride are placed in a blended grid (which can be filtered and resorted by choosing any one of the three). Like in the first design, content within Programs, People, Places, and Pride is progressively revealed before users can make a choice to go to the full story or section of the site.

Like the first design, the navigation uses a mobile-first approach with the use of the “hamburger” menu in the top right corner, and it contains the traditional site architecture menu as well as the search function. Additional topics and audience navigation can be found in the footer of the homepage. The calls-to-action are housed in a sticky navigation at the top of the page (and throughout the entire site).

This design also contains a Things to Remember section, but the design is treated differently than in the first concept.

All photos, videos, and text within this concept are for placement only (FPO), and do not represent final decisions on photography, video choices, or approved copy.

  • Look and feel concepts for this design: metropolitan, iconic, innovative
  • Tone and voice concepts for this design: intelligent, curious, energetic

How Did We Get Here?

Our guiding principals for this project include objectives, approaches, characteristics, and considered audiences that form common ground from which we make decisions that move the project forward. We are creating a look, feel, and narrative that shows the best version of Trinity—one that is unified, confident, and fully embracing the aspirations of the strategic plan. Decision making throughout the project is guided using the following concepts:


  • Make a bold statement
  • Illustrate the connection to Hartford and other urban environments
  • Connect the Trinity of yesterday to the Trinity of tomorrow


Characteristics are a set of guiding attributes and values to which creative decisions can be held. Look and feel characteristics speak to the aesthetics of the site as they relate to design, images, and the overall visual impression of each page. Voice and tone characteristics relate more to the writing, content strategy, and information architecture (IA); however, words and ideas from both lists can speak to the project as a whole.

Look and Feel Keywords for the Project

  • Connected
  • Metropolitan
  • Daring
  • Iconic
  • Vibrant
  • Beautiful
  • Innovative
  • Creative

Voice and Tone Keywords for the Project

  • Welcoming
  • Unpretentious
  • Intelligent
  • Thoughtful
  • Curious
  • Proud
  • Energetic


Broadly speaking, we want the homepage and primary landing page experiences to be focused on prospective students, while providing easily-reached, dedicated spaces for secondary and tertiary audiences.

Primary Audiences

  • Prospective students

Secondary Audiences

  • Prospective parents / families
  • Current students
  • Current parents / families
  • Alumni

Tertiary Audiences

  • Faculty (current and prospective)
  • Staff (current and prospective)
  • Community

The website should be as user-focused as possible by serving each audience along anticipated paths. While some sections apply more to a particular group of users, there are other pages within the site that serve multiple audiences at once. Prioritization will aid in decision making, especially as it pertains to content hierarchy and information architecture.

Share Your Feedback (before March 23)

We understand that members of the Trinity community have strong feelings about the best possible way to represent Trinity on the web. These two design concepts represent the first step in choosing a design direction for the site. Our goal is to choose a direction and build out one of the concepts so that it represents a complete and informed design solution for the homepage and all parts of the site.

Here are some ways to provide helpful feedback:

  • Which design concept do you gravitate to the most?
  • What do think are the three strongest things about Design Concept One?
  • What do you think are the three strongest things about Design Concept Two?
  • Do you feel like the design concepts are addressing their primary look/feel and voice/tone keywords?
  • Do you see specific things in either concept that don’t live up to the guiding principles of the project?
  • Think about what and why: Be specific about what part(s) of a concept you do/do not like and why you do/do not like it.

Let us know your thoughts using the form below!

Contact Us

Contact Us

Tell us who you are.
Let us know how to contact you.
Let us know what you think.
Building the Information Architecture

Building the Information Architecture

What is Information Architecture?

Information architecture (IA) is the organizational and navigational structure of the new website including categorization, hierarchy, labeling, and way finding recommendations. It also begins the thought process that will evolve into the full functional requirements. Specifying the IA for the site, beginning with the high level, and then down to levels two and three, is the next step in the process before we move to design and building out the site. Having an IA in place, even if it’s only being managed in a spreadsheet, gives us the context for how to find a design solution and how to build out our content plan.

Two Complementary Navigations: Traditional and Progressive

Qualities of the Website’s IA

  • It’s focused on serving prospective students
  • It includes a more traditional, hierarchical, topical navigation to get to the rest of the Trinity website
  • It includes a more radical, horizontal, progressive way to get to information, using a distinct home page navigation structure that breaks with existing conventions. This progressive navigation is evergreen, reachable from every page, and always visible.
  • The radical navigation is meant to have more emphasis than the traditional navigation, but both will be prominent.
  • As more content and areas of the website are re-written and organized post-launch, it provides a way to add more items from the traditional to the home page model.

Traditional Navigation: Hierarchical, Topical

  • Admissions & Aide
  • Academics
  • Student Life
  • About
  • Athletics

Traditional Primary Calls to Action

  • Apply
  • Visit
  • Contact
  • Give

Progressive Navigation Anchored to the Homepage

Primary Focus of the Progressive Navigation

  • Programs
  • People
  • Places
  • Pride
  • Important Now/Service and Help Content

Secondary Focus of the Progressive Navigation

  • News
  • Events

The Final IA: Levels 1-3

The Website Redesign Advisory Group has spent time considering the IA and discussing how to organize the information, what language we’re using in the IA, and how website analytics data helps us make smart decisions about prioritizing what our audiences are looking for. Have a look at the final IA list down to level three  (which is of course not set in stone, but final enough to allow us to move to the next step in the project).

A Content Plan for Launch

A Content Plan for Launch

Our group’s biggest action item for January was to finalize a list of content that will launch with the new website.

When Trinity’s new website goes live in August 2018, a large amount of content from the current version of the website (SharePoint) will be brought into the new site (WordPress), but not all of it can come at once. The job of addressing content to ensure its accuracy, relevance, and ability to fit into new design templates before August is too much to do all at once. Therefore, we’re pursuing a strategy that will bring over content in phases.

Two Sites, One Experience

A phased approach to launching content means that in practice we will be running two sites (new and old, WordPress and SharePoint) simultaneously. The two sites will be stitched together, which users will navigate as a single domain ( Of course, users will experience differences in design depending on where they are in the site. For example, a user may set off on an information pathway from the homepage, and as they move around they may follow a link to an administrative office’s site that hasn’t been brought into WordPress. The user will land in the old design (SharePoint). Moving back and forth between WordPress and SharePoint will be seamless, save for the differences in design. Functionally it will be a seamless experience.

  • A note for content editors: This does not mean content editors will be responsible for maintaining two sites. Either a site will be in WordPress or it will be in SharePoint, but not both. Training for site editing and maintenance will be part of the process to import content into WordPress.

Phase One

The content slated for phase one was determined based on the goal of creating a cohesive information experience for our primary audience (prospective students) and supporting information critical for daily operations. This means that the entire content of these sites will be brought into the new site. It does not mean that sites still in SharePoint will be rendered invisible.

Collectively we have an opportunity to create a look, feel, and narrative that shows the best version of Trinity. To achieve this goal, we will adopt an 80/80 focus. At launch, the site will provide the majority (80%) of the content relevant to the majority (80%) of users’ needs as intuitively and as seamlessly as possible from the homepage.

Content list for launch

  • Trinity Traditions
  • Mission & History
  • Visit Trinity
  • Admissions
  • Individualized Degree Program (IDP)
  • Transfer Credit Information
  • Majors and Minors (landing page)
  • Three academic program/department sites (still TBD)
  • Human Rights Program
  • Study Away
  • Career Development
  • College Events
  • Liberal Arts Action Lab
  • Accessibility Resources
  • Trinity at a Glance
  • Contact Trinity
  • Communications Office
  • Office of the President
  • College Leadership
  • News
  • Events

To reiterate: Content (entire sites) slated for phase-one launch will undergo a comprehensive review and editing process in order to optimize them for the new website. This content production process will be done in close partnership with site owners.

Phases Two and Three

Phases two and three of content migration are targeted for roughly the end of each semester during 2018–19 academic year. While we have made a rough list of content that will migrate in each phase, the reality is that scheduling is contingent on each site owner’s schedule and capacity to dedicate time to partnering with the Communications Office on addressing their content and migrating it into the new WordPress site. We will be working with site owners to determine these schedules.

Building Bridges

A final few words about how we are building information pathways for our site users:

Starting with the website’s new homepage, we are building a powerful and innovative tool to help users find information they want. Our charge is to give users the ability to see both the breadth of Trinity’s programs and personalities and depth of any specific area. This means surfacing information and telling stories that traditionally have existed deep in the vertical information structures of our website (a typical higher ed. website approach).

If a section of the site isn’t on the list for phase-one launch, it doesn’t mean it will lose visibility or it will miss out on the advantages that come with an exciting new website. Rather, we will be creating new landing spaces and transitional experiences that will improve users’ ability to find sites, programs, offices, and departments, regardless of whether they are in WordPress or waiting to move out of SharePoint. Our content-first approach to this project means that we are thinking hard about how to design a site that will prioritize what users want to know, not how we see ourselves in an org. chart.

From Fastspot: ‘Small Site, Big Impact’

From Fastspot: ‘Small Site, Big Impact’

Fastspot recently published a blog post that chronicles the partnership between Trinity and their team on creating the Summit microsite. This deep dive into the project illustrates the working relationship we have with Fastspot and the methods we are using as we collaborate on the website redesign. The timeline and number of people involved, however, is much different for this project. Read the post over on their site.

January 2018 Activity Digest

January 2018 Activity Digest

The month of January was a whirlwind of activity. More detailed posts will follow about these topics, but here is a quick list of what the project team and the advisory group are working on:

  • The creative brief for the project
  • A content prioritization plan that outlines which content will launch when the site goes live in August, and which content will launch in the second and third release phases.
  • A workshop activity to begin making determinations about the site’s homepage content
  • Audience personas and journey maps




Meet Our Creative Partner, Fastspot

Meet Our Creative Partner, Fastspot

How do you know when it’s time to redesign the college’s website? In Trinity’s case, the need has become apparent over the last several years. The site’s last major redevelopment was in 2011, and in the more than six years since that work was completed, Trinity has evolved in many ways, including the arrival of new leadership and the adoption of a new strategic vision. Additionally, technology and expectations move at a lighting pace, and it’s clear that the site’s front-end user experience no longer serves users in the best possible way.

Redeveloping the college’s website is a huge undertaking.

While some institutions choose to do the work in-house, we knew that in order to be as successful as possible, we would need to bring in a strategic partner who could conceive of, design, and develop a new institutional web presence that meets our technical and functional needs while delivering a contemporary and visually stunning experience with a content strategy that captures the vibrancy and exciting evolution of Trinity College.

Welcome, Fastspot

In July 2017 we put out a request for proposals inviting several interactive agencies to submit proposals for the work. The agencies ranged in size and geographic region, and they all were capable and respected firms. Fastspot stood out to our team as a clear favorite. Their deeply collaborative style melds strategy, design, and development into a fluid and iterative process that felt like a perfect fit for the project’s core web team. Not only did we feel that their process was the right fit, but their appreciation for Trinity’s distinctiveness as a liberal arts college in a diverse capital city was apparent. It was clear to us that they got who we are and they were going to make our story come to life.

By August, we were officially partnered with Fastspot and beginning the work of creating the Summit strategic plan microsite and refreshed visual identity.

Since 2001, Fastspot has been partnering with clients in the education, arts and culture, nonprofit, and professional services industries.Our day-to-day team members meld project management, UX, and design into a cohesive process that will lead us through development and launch.

Samples of Fastspot’s interactive work for higher education:

Overview of Fastspot’s Work for Trinity

Fastspot is Trinity’s partner from start to finish.

  • Design and development of a microsite for Trinity’s strategic plan
  • Creation and document of a refreshed visual identity (more later on how the microsite feeds into the visual identity and ultimately the new website)
  • Website Discovery
    • materials review, on- and off-site research, content audit, etc.
  • Website Strategy
    • creative brief, journey mapping, functional requirements, tech specs, content strategy, analytics tracking, SEO, IA
  • Website Design
    • Concept brief, wireframes, design concept and system
  • Website Development
    • Front-end development, WordPress integration, etc.
  • Training
  • Content Migration
  • Testing
    • Basic functionality, design review, UX reviews, usability testing, etc.




Photo by Will Oey on Unsplash
Choosing Our New CMS

Choosing Our New CMS

Part of the work of redeveloping our website is deciding the right platform for the site’s content management system (CMS). Since 2011, has been supported by SharePoint as its CMS. In thinking about the right tool for our community of content contributors, we had some priorities in mind:

  • Ease of use for editors
  • Functionality and design flexibility
  • Intuitive user experience
  • Deep and accessible knowledge community

To help us along the way, in April 2017 we reached out to the website editors across campus, as well as the campus community broadly, to ask for input on our next CMS. Using a short survey, we asked:

  • Have you used our current CMS? (SharePoint)
  • Have you used any other systems?
    • Drupal
    • WordPress
    • Other
  • What is your impression about the other systems you have used? (easy to use, too many steps, etc.)
  • Do you prefer a particular CMS?
The Results

We heard from 3 students, 43 faculty members, and 66 staff. Most respondents had familiarity with WordPress, while some had Drupal experience. While most respondents (65%) had no preference for the system, some indicated they preferred WordPress, and one person preferred Drupal. Most folks noted they felt WordPress was easy for the end user and offered more flexibility than what they’re currently used to.

Given the results of the survey, and our core team’s research and conversations with peer institutions, we decided that WordPress would be the right choice for the new Currently the college has an installation of WordPress on, where any member of the campus community can have a site (including this one!). This is helpful in building a knowledge base among our campus users; many have already used WordPress here at Trinity or in their non-Trinity lives.

Moving Forward

We will be creating a multisite setup for the WordPress installation for

What does that mean?

A multisite setup means that a single installation of WordPress will contain multiple websites. Each site within will be its own site. This means if you are responsible for the content of one or more sites within, you will have access to those sites as individual sites. Themes and plugins, however, will be available to users at a network level (for example, you won’t be limited because your access is for a single site).

Prior to the launch of the website in late August, content editors across campus will receive training to get to know the new CMS environment and learn how to manage their content in WordPress.

We have already started to move Trinity’s web presence into WordPress. The Summit microsite, which launched in November 2017 (and was developed and designed by Fastspot), uses WordPress.

Do you have thoughts about WordPress as the CMS for Trinity’s website? Let us know in the comments!

Why A Website Matters

Why A Website Matters

And why this website project matters for Trinity

It’s 2018. When you’re looking for information about a product, a service, or an experience, where is the first place you begin?

  • An encyclopedia?
  • The Yellow Pages?
  • Your best friend?
  • The internet?

The majority of people now begin their customer experience journey on the internet, and the journey toward college is no exception. A web presence is effectively the front door to your customer’s journey with you.

Since 2005, the annual E-Expectations Trend Report has given college marketers insight into how prospective students (and their parents) expect to engage with colleges and university in digital environments.

RNL E-Expectations Trend Report
Source: 2017 Ruffalo Noel Levitz | E-Expectations Trend Report

As you can see, printed materials barely make the cut. An institution’s website is the top place where prospective students go for information about a school. We cannot afford to miss this opportunity.

This is why we must provide the best possible experience for our website visitors. We must tell a story that reflects the excellence and value that Trinity provides to students. We must convince them to engage with us and build a deeper relationship, and often that window of time in which they will engage with us is extremely short.

Our Task

Trinity needs a modern website that meets the needs and expectations of our audiences. While our website’s primary audience is prospective students, the website must meet the needs of many audiences with diverse needs, including on-campus students and employees, alumni, parents, and the community.

Over the course of the project, we will keep the Trinity community informed about our progress as we build the site. We will be making strategic decisions that involve content, UX, visual identity, site structure, development, and more. And we’ll share that process here. We hope you’ll join us as we progress toward launching a completely redeveloped in August 2018.