UX Web Design Work: Saint Anselm College Virtual Tour Page


Saint Anselm is one of the nation’s finest Catholic liberal arts colleges, founded in 1889 by the world’s oldest religious order, the Benedictines. The college is located on a hilltop overlooking Manchester, New Hampshire’s largest city.

The college teamed up with the digital agency, Boston Digital (formerly Boston Interactive), where I did my internship to redesign its entire website. We wanted to bring the popular interactive and immersive experiences to attract attention and better resonate with audiences.

The virtual tour webpage, in particular, was picked out as a key component project for improving their marketing results. I was chosen to do the UX design as a member of the design and development team.


Screen Shot 2019-05-27 at 8.33.04 PM


The college and the company worked together to re-envision and reinvigorate its digital ecosystem. They launched the newly designed website in late 2017. The client wanted the new design to give the audience a fresh and modern feeling.

The transformation is from:

Screen Shot 2019-05-27 at 4.46.52 PM


To the new sleek design:

Screen Shot 2019-05-27 at 5.20.33 PM


Along with their marketing request for attracting other states and overseas students, we planned to redesign the virtual tour webpage as a key component of driving more traffic. The current virtual tour webpage needed to elevate the design in order to enhance audiences’ attraction and interaction.

Virtual Tour webpage before innovation:

Screen Shot 2019-05-27 at 5.27.54 PM

After redesign:




From the courses and books I’ve learned design is like this:

UX_Design Process

While the reality is like this:


I came out with a few concepts presented in different ways. Brainstorm ideas with abandon, then select useful pieces to mix and match and see the best solution for practical execution with other teams.

I set the key messages that I want to communicate with target audiences at first.

  • The college location

Other state students might not really familiar with the New England area. When the international students do college seeking, they generally filter by the big cities they know, like New York and Los Angles. Or, by world famous universities like Harvard and Yale. So the location would be important information to be considered.

  • Character and culture

Each college has its culture like each person has his/her personality. This is a great way to communicate audiences by presenting their culture and believe bringing the right crowds to their community.

  • Call for action

After a series of introduction, we should reach closer to audiences with in-depth information who show interests to learn more. It’s beneficial to cultivate the bonding between college and audiences.

Then, I was working on the ideation based on the listed major elements and logic threads.

By giving a reference where the college locates, I think it’d be fun to make an animated map showing the college is only one hour drive from Boston and some amazing sight-seeing surround it. This would give audiences a sense of location.


The tour content order had back and forth discussion on whether we should introduce the places sync with the on-ground tour guide, or separate the audiences by students, parents or faculties at the beginning then following up a customized tour based on their list of interests.

I also proposed a 3D map with floating information bubbles so that the user has total control where they want to check out.


After days of discussion and communication with clients, we made the prototype. The virtual tour webpage will be a categorized walkthrough with a trendy element scroll control. Due to the add-on work and development framework limitation, we cut off the proposal of embedding 360 panorama media into the virtual tour webpage.

Screen Shot 2019-05-27 at 3.33.31 PM




The launch site link: Saint Anselm Virtual Tour

Screen Shot 2019-05-27 at 8.26.15 PM

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s