Inventing the Future: Telling Virginia Tech’s Story with a New Website Design

Virginia Tech is a world-class university with a lot to be proud of. As a global leader in technology and engineering, it strives to transform knowledge to practice through its research and educational endeavors. While this is true, its leaders wanted one problem addressed.

The university’s website, while effective when introduced six years ago, wasn’t meeting the institution’s needs anymore. Virginia Tech has an abundance of great stories to tell, and the site design allowed little flexibility when it came to telling them. The school needed a solution that helped give life to its stories – one that provided a sense of place and showed off all the wonderful things they do as an institution.

To solve this, VisionPoint Marketing collaborated with faculty, staff, alumni and students across the university’s community to develop a usable and attractive design that enabled the university to share its exciting and robust narrative. We created a modern solution that made publishing content easy, while providing a flexible visual hierarchy across mobile and desktop platforms.

As Virginia Tech gets ready to launch its new site in the coming months, we thought we’d share a bit of our process and give insight into how our team worked through what turned out to be an incredibly fulfilling project.

Research and Strategy

Stakeholder Interviews and User Testing

After getting a feel for Virginia Tech’s current site, we began our primary research by doing what we do best: listening. We set up interviews to figure out what kind of experience stakeholders were having, what they liked and didn’t like about the current site, and goals they hoped to achieve with a new site. We worked with everyone from executive leadership to content contributors across campus.

Stakeholders seemed primarily concerned that their university’s story wasn’t being told very well through their current site. They felt news and events were often getting lost below the fold and really wanted to highlight things like the university’s research, community service and growing focus on the arts. They also wanted to show off their beautiful campus and provide a sense of place. We believed a modular design would give Virginia Tech’s content creators more flexibility to do all of these things.

The website’s current layout made the user experience a challenging one. There wasn’t a lot of usable space for promotional items or important events. With no clearly marked gateways for internal users, as well as a weak search function, navigating the home page wasn’t easy. At the time of the interviews, we counted 74 different links on the homepage and felt Virginia Tech could communicate with its users more effectively by providing clearly marked hubs/gateways, improving the site’s search function and “de-cluttering” the site’s pages.

There was also a concern about how outdated the site was. The last major redesign occurred in 2006, and it sounded like the university’s stakeholders were excited to make a change to the visual design and technical components that made up the site. For example, Adobe’s Flash plugin, while integral to plenty of higher ed sites in the past, is archaic and was still featured on Virginia Tech’s homepage. For a university known for its technical prowess, its website wasn’t supporting their reputation. It was decided a modern, responsive design would better reflect their brand while also delivering users a better mobile experience.

Designing Responsively

A Modular Approach

We applied a modular approach to the page designs to allow for different types and formats of content. We designed each module to be scalable, which achieved the goal of creating a responsive site that offered content managers and creators greater flexibility than they had before.

For example, the Spotlight section of the design would display Virginia Tech brand content, but could follow one of three different layouts based on the assets they had at their disposal. A really stunning photo could take up the entire module, while a less compelling one would lend more on-screen real estate toward a compelling title and longer text description.

Like the spotlight feature, each section below it is built with flexible modules on a four-column grid. As long as a row fills all four columns, any combination of different-sized modules can be used. Features like this provide content creators and managers the flexibility to assign however much weight to their content as they see fit.

*

A Rich User Experience on Every Screen

On the smallest screens, users encounter a much simpler structure than in a traditional desktop view. Menus are hidden until the user selects the menu button, revealing a header that expands to display the site menu. We suggested adding gesture to allow users to swipe, left or right, through the site’s four main sections.

When a user accesses the site on a tablet, the site adapts again. The tablet version of the homepage layout is similar to the desktop. The spotlight feature is presented similarly to how it is on a desktop; however, gesture navigation is still included. Instead of using text links, the social media icons and on-page call to actions become more touch-friendly, turning to buttons to increase usability on tablets.

In addition to implementing a responsive design, we wanted to make finding information easier for the user by improving the site’s search function. We also made search simpler and more prominent.

With a responsive framework in place and a stronger search function, users now have access to all of Virginia Tech’s important content wherever they are. With a cleaner menu, gesture support and links that are touch-friendly, navigating through the site is easier than ever. Users have access to all the information they need, either by the click of a mouse or the touch of a fingertip, freeing them up to focus on what really counts: the compelling past, present and future of Virginia Tech.

Conclusion

A new class of Hokies will step foot on campus in August. When the new Center for the Arts opens in the Fall, Virginia Tech’s faculty might inspire the next great Hokie thespian. When football season kicks off at Lane Stadium, the next great student athlete could start his path toward a Heisman Trophy. When a Hokie freshman starts his first mechanical engineering course, she might find inspiration to embark on a career that eventually earns her the American Society of Mechanical Engineers Medal.

Whatever the story might be, Virginia Tech has a better way to tell it now. As VisionPoint waits to see the university’s tech team launch the new site in the coming months, we’re excited to see how the stories continue.

Note: The images shown in this blog post are mockups and not a produced page. When Virginia Tech launches the new site in the coming months, designs may vary slightly.