2019 Website Goals

Where are we headed?

I'm Miles Greatwood, the web developer and media team manager at the Cooper Center. Throughout the last two years we have successfully migrated all of our sites to the new Drupal 8 platform. We have sorted through our old content and reformatted our sites to highlight the most used information using cards and better navigation links. Now that we have a uniform look within brand guidelines for all of our sites, we want to better communicate the work we do and build upon the formats we are using. In this post, I'll be discussing improvements I plan to implement during the remainder of 2019. My main goals are to create websites for you that:

  • Increase awareness of the work you do at the center
  • Make your unit more accessible to potential clients, UVA and the general public

To achieve these goals the media team will be adding new content to our sites and I'll be building new content templates to showcase your work. Let's start discussing some of the content and design choices we'll be moving towards.

Impact Videos

My largest goal for the media team is to create an impact video for each of the Cooper Center's units and post them on the homepage of each unit. A good impact video explains what your unit can do for your clients and inspires them to engage with the work that you do. I want to showcase the real world impact each unit makes through interviews with center staff and clients. I would like to meet with each unit director to identify a target audience, draft a script, and discuss footage opportunities.

It's difficult to make a good impact video as it requires clarity of message and lots of quality b-roll footage to accompany the spoken message. We have a talented new videographer Claire Downey who will be helping to capture and edit this footage. I'll be meeting with unit director's individually to create these videos and aim to produce one impact video every two months.

Take a look at this example impact video from CitySquare who aim to reduce poverty in their community. Notice how they use conversational interviews to get their message across and use b-roll footage of the actual people they work with. Using stock footage would fail to get the same message across effectively. 

Additional Example Impact Videos

I would showcase these impact videos on the homepage of each unit site. To see what this looks like visit the main Cooper Center site or the Sorensen site which already have videos halfway down their respective homepages.

Hero Videos

You may not have heard this term "hero" before but it comes from the newspaper and marketing industry. A hero section would be the first image a person sees and often consisted of a photograph of a public figure (hero) showcasing a product. Today the meaning of hero section just means an attention grabbing visual that is the first thing seen when visiting a website. A good hero is an attention grabbing video that quickly and effectively communicates your main message to a specific audience. It's the first thing people see when they visit your homepage and first impressions are important. Hero videos are generally short, silent, and play automatically. They help visitors understand what you can do for them. Currently our sites all have static hero images instead of videos. These images are limited in what they convey. For example the main coopercenter site currently looks like this.

hero image

The image of Richmond is the hero image. Does this image explain what we can do for our clients? Does this image encourage the site visitors to do anything or engage with us in any specific way? Does it summarize our work or our impact? These images are aesthetically pleasing but do little to actually convey what we do or the impact we have. 

Below is a screenshot from the OVO foundation's hero video. Go to their site to see the video actually play. Without knowing anything about the foundation you can learn a lot from the hero video. Go ahead and watch the video to see if you can guess what they do. 

hero video example

Their hero video effectively accomplishes the following:

  1. Shows their main projects which include energy solutions, tackling youth homelessness, and increasing access to education
  2. Provides an authentic view of their work
  3. Captures their value of inclusion and togetherness
  4. Provides a clear call to action in the form of high contrast button links

This is a great model for what I aim to create with our hero videos since they are also a public service organization. For an overview of the process describing how the media team will create your unit's hero video visit our video services page. You can view our test hero video we drafted for beheardcva as well. This was just a video to test the format for our website and is not a finished hero video.

Additional reading on hero videos.

Employee Profiles

As stated previously, increasing the accessibility of the Cooper Center is one of my core goals. The main way I intend to accomplish this is to attach a real person to each project the center takes on. By creating employee profiles the public and potential clients can pair a real human face with the work that we want to showcase. The goal is to have an employee profile for every staff member that includes a scrolling feed with some combination of the following:

  • Short bio explaining background and expertise
  • High quality professional headshot
  • Contact Information
  • Photos of workers in action
  • Written articles summarizing and describing work
  • Podcast interviews 
  • Video interviews
  • Event videos

The goal is for the media team to create content for every employee so that at any time clients can go through a profile and see the kind of work that employee has done in the recent past. This will encourage people to engage with our work and reach out to us. I want your work to be well known, and show your impact in an authentic way.

The design for the employee profiles is still a discussion happening but here is what I intend for the employee profiles to look like. I am aiming for a clean grid of thirds. The reason for this is we have a lot of different sized content and I want the work to be clean and easily navigable. 

Thirds Grid

My intention is to have this clean gird and if you click on any of the images, you will get an overlay that greys out the rest of the images and displays just the video/podcast/picture you clicked on.

Additional mock up of website profiles. Out of date but still included in this post for the time being.

Examples of UVA employee profiles

Photo Galleries

I want to start showcasing more photos on our websites to better communicate our work. Our sites are all very text heavy at the moment and photos will allow us to engage with our audience better. The UVA Architecture school has a good example of a photo gallery. It's halfway down the page. Once I get this kind of gallery working on our sites, I'll be encouraging everyone to upload their photos to the sites.

gallery example

 

Scrolling Pages

I know there are many people on staff at the cooper center that dislike scrolling websites. It's a preference I can totally understand. That said, usability testing and analytics support the idea that scrolling is preferred to clicking. 

Scrolling is a continuation; clicking is a decision

It's easier for users to scroll over clicking so we will be trying to condense similar pages so that our sites require fewer clicks by users. There's a great article by Joshua Porter on the topic if you are interested. In addition to merging pages, I'll also be giving special attention to the content right above the fold. By above the fold I mean the content users see right as they start to scroll. That is the part of the page that most users engage with. Many people scroll before a page even loads so they don't see buttons or text at the very top of the page. Currently we have a call to action button in this location on all of our homepages but our other pages could use some more attention to their high engagement areas.