Final Design and Prepping for Launch

Final Design and Prepping for Launch

It’s the middle of the summer, but the work of redesigning Trinity’s website marches on. Our project team has hit several milestones since the spring, and we have a few more coming up. In this post we will update you on what we’ve accomplished, what we’re doing right now, and when we will launch the new site.

What We’ve Accomplished

As of today, we have reached the following milestones:

  • The site’s design is complete.
  • The coding to build the site is complete (front-end development).
  • We have a content strategy document that guides us in creating successful content.
  • We have a document that outlines how everything on the site is supposed to behave.
  • The WordPress CMS is built and our project team is adding content.


Homepage template
A typical internal page template
A landing page for a department or office
News articles listing
Completed Design

When we last reported on the design templates for the site, we had arrived at a second version and chosen a design direction. Thanks to the incredible response from the Trinity community, we have been able to incorporate smart feedback from a variety of perspectives into what is now the final design system for the college’s site. This means all the designs for the pages in the site are complete.

Click on any of the template images to view them larger in a new tab. All words and photos are for placement only (FPO) and do not represent final choices.

Completed Front-End Development

The coding team at Fastspot has finished their development work. This means the WordPress editing environment is done and all the components that collectively form the design and behavior of the site are fully built.

Completed Content Strategy

The content strategy document contains guidance on voice and tone usage throughout the site, and it outlines the optimal use for each page template and component used in the site. The principles and the document will be given to site editors during WordPress training in order to help them be as successful as possible with their new sites.

Completed Functional Requirements

A functional requirements document is a tool for the project team to name and define all the components in the site and how they are supposed to behave. Components are the individual items that are used to build a page template, and a template is a collection of components arranged in a particular layout and order. Not only does this document help our team keep track of all the parts, but portions of this document will help site editors understand how to choose the right components that will help them achieve their goals with their websites.

The WordPress Environment

This week our project team was given the proverbial keys to the WordPress CMS for the college’s site, and we are actively populating the site with the content we have identified for launch. The site is currently residing on Fastspot’s development server until it is completed and handed over to Trinity for launch.

Looking Ahead: The Immediate Future

As our project team populates the site with content, the Fastspot team is working through quality assurance (QA) testing. This means they are combing through the site to identify and resolve bugs that affect functionality for both the site user and the editors using WordPress. Over the course of the next five weeks, our project team will be building content in the site, including migrating the sites we have identified for launch. We remain in touch with departments and site owners throughout this process. Of course if you have questions, you can feel free to be in touch.

Looking Ahead: Launch

Trinity’s new website will launch early during the week of August 27. This is an exciting moment for our entire community, but we understand that you may have questions.

  • When will my site be migrated into the new site?
  • When will I receive training on how to edit in the new website?
  • What do I do if I discover a problem with the new site?
  • What if I can’t find what I’m looking for?
  • What happens after launch?

First, in the next week or so we will have a post that details the site’s launch plan.

Second, if you have questions, please ask! We’re here to help you know as much as possible about the website.


Photo by Hello I'm Nik on Unsplash
Design Concepts: Round Two

Design Concepts: Round Two

In March we asked for your help in choosing a design direction for Trinity’s new website. In this entry we recap what we heard from the Trinity community, we share which design direction we chose, and we again ask for your input into the design.

What We Heard from You

More than 70 people from across the Trinity community took the time to consider the two design concepts, and they sent us their incredibly thoughtful feedback about what they saw and experienced. Respondents included faculty, staff, students, alumni, and a few unknown folks.

If we were keeping score (we were!), most respondents favored Design Concept One. In fact, Design Concept One was three-and-a-half times more favored than Design Concept Two. Here is a selection of reasons people cited for liking Design Concept One:

  • A focus on imagery
  • More visually pleasing
  • Easy on the eye and welcoming
  • Intuitive navigation and cleaner design
  • Less scrolling
  • Clear what the user is supposed to do to find information
  • Accurately conveys the student experience
  • Liked the equal weight to Programs, People, Places, and Pride
  • Liked the background/atmospheric video
  • Vibrant and engaging

Not everyone loved what they saw, though. Here is a selection of reasons people cited for disliking Design Concept One:

  • Unsure about the background/atmospheric video
  • The design may begin to feel dated sooner
  • Moving video is distracting
  • Not different enough from other NESCAC school websites
  • Top of the page is engaging, but it feels lackluster as you scroll down
  • It’s not clear where to find information for alumni
  • Too much use of color

The use of color in both designs was an issue for some respondents, enough so that we created a category of responses that deals exclusively with color. Some things that were unappealing to viewers about the colors include:

  • Colors are hard on the eyes
  • Colors seem to have little to do with Trinity. Can there be more use of blue and gold?
  • The colors seem too young and playful, not sophisticated an unified
  • The colors don’t seem very Trinity, and some aren’t aesthetically pleasing
  • The color palette is jarring and difficult to look at

What about Design Concept Two?

Some of the distinguishing feedback about Design Concept Two included opinions that the design was bold, vibrant, fresh, and easy to navigate. Some respondents liked that Programs was prioritized over People, Places, and Pride. However, the standout negative comments included a dislike for the “dead space” at the top of the page, the amount of scrolling to get to content, and the use of the blended grid showcasing the feature content (People, Places, Pride).

The Result: What Did We Choose?

Let’s cut to the chase: We chose Design Concept One. We arrived at this decision using the feedback from the community at-large, the feedback from the Web Redesign Advisory Group, and the feedback from the Website Redesign Team. Choosing a direction represents a starting point for the design. We were at a fork in the road, and now we have chosen a path. Fastspot has taken our feedback and is using it to  build out the design into something that truly fits Trinity.

Round Two: Homepage Design

During the design process, there are three rounds. The second round incorporates the comprehensive feedback from the community, the Web Redesign Advisory Group, and the Website Redesign Team. The third and final version (still to come), will be our final design.

Below is an explanation of the second iteration, and sample images for you to explore. Click on (or tap) any image to open it in a new tab. Click (on desktop) the new image to move in closer and see a full-screen view. The images are static and are for reference; they do not allow interaction.

In this second round, Fastspot has simplified the use of color throughout the entire design to focus more on the Trinity brand and create a more sophisticated look overall. The secondary color palette (the greens, yellows, blues, etc.) is used in smaller details, such as live hovers and swiping animations.

We recognized that the background video can be either highly attractive or a powerful deterrent to visitors. To solve this issue, Fastspot added the ability to play/pause the atmospheric video. It is a subtle addition, and it will be beneficial to accessibility without adding too much clutter to the page.

Round Two Homepage Design
Click (or tap) to see a larger version. Click (on desktop) the new image to see full-screen.

A new feature to the homepage’s functionality is that we changed how the feature topics (Programs, People, Places, Pride) bump out when selected. In the previous version, they took over the screen, creating a new layer over the homepage. In this version, we requested that they remain on the same layer as the rest of the homepage. In the image below, you can see an example of this. Programs has been selected, and the feature has appeared below the menu and pushed the rest of the homepage down. Users can either mouse-over to the other three menu items (and have the corresponding feature appear), or X-out  to make the entire experience accordion closed.

Round Two Homepage Design with Programs Selected
Click (or tap) to see a larger version. Click (on desktop) the new image to see full-screen.

Though we didn’t show the mobile version in the first round of design concepts, here is a look at the mobile version of the design. When feature topics (Programs, People, Places, Pride, etc.) are open, they behave as takeovers. This allows users to control their experience within such limited real estate.

Thumbnail of mobile design of homepage
Click (or tap) to see a full-length view of the mobile design. Click (on desktop) the new image to see and scroll full-screen.

Share Your Thoughts on Round Two

What do you think of this iteration of the design? Feel free to share your thoughts in the comment form below. We will conclude feedback this week (April 13).

Contact Us
Tell us who you are.
Let us know how to contact you.
Let us know how we can help you.
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 how we can help you.