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:

Objectives

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

Characteristics

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

Audiences

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.
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.

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
Fastspot

Fastspot

Trinity’s Strategy and Design Partner

Fastspot is a Baltimore-based creative services firm that specializes in digital experiences. We have partnered with Fastspot to develop a brand-new trincoll.edu. Their work includes strategy, design, and development, as well as a refreshed visual identity for the college.

Before launching into this project, Fastspot completed a microsite for Trinity’s Summit plan rollout, which was launched in November 2017.

Our day-to-day project team members at Fastspot are:

Monica JanowitzMonica Janowitz
Senior Project Manager

Monica is responsible for keeping the project deliverables on-track, on-time, and on-budget.

 

Fran ZablockiFran Zablocki
Senior UX Strategist

Fran’s expertise lies in helping us make smart decisions about the experiences our users have when they come to our site.

 

Jesse Leyh
Designer

Jesse’s role is to develop a beautiful and useful front-end experience for our users, as well as to help us update Trinity’s visual identity.