Embedded Files
In fall of 2017 my team was tasked with building a Virtual Campus Tour from the ground up. This included creating new content, user interface design and interaction design. The client for this project was the Office of Undergraduate Admission and the main audience was prospective students and their parents.
We wanted our tour to be completely different from other college virtual tours. We found those experiences to be either long, talking-head videos (a little uncomfortable and marketing-heavy) or just a map with the names of the buildings and when they were built (not helpful). We wanted our tour to be informative, useful and cover the topics prospective students most want to know about. Pairing that with a contextual stylized map of where these things are meant the user understands not only how our campuses work, but also where to get what they need.
Bridging content and front-end development
Bridging content and front-end development
In addition to a visual direction, we needed a solid content strategy. To keep this short, I'll skip the design bits and summarize that we landed on using bright, youthful colors. We hired a local illustrator to commission an isometric map of our Lincoln Park campus.
My main task for this project was to bridge the gap between the content and front-end development teams. I consulted on content strategy and UI/UX throughout the project, wrote and edited content, and tested and provided feedback for each step of the experience flow. I had to ensure the content and interactions melded perfectly as well as fill in any gaps and develop the strategy for microcopy.
Content strategy
Content strategy
Voice and tone: Since this content was going to speak directly to prospective students (ages 16-18) we decided to keep the language fairly straightforward but also balance a casual and informative voice, something our former associate director called "The Cool RA" - it's the voice of a peer who students look up to. Someone who has authority, but is still able to connect with the audience. We also wanted it to be succinct and feel natural and conversational.
Microcopy: I went with a short, straightforward approach for readability.
Structure and navigation
Structure and navigation
Since we have two campuses and we feel that our connection to Chicago is a huge part of our campus experience, we decided to break the tour up into three categories: Lincoln Park, Loop, and Chicago.
We went with a topic-based structure to simply categorize the tour and make it easily self-guided. This navigation is available on the left side at wider viewports and at the top at narrower viewports. We chose simple icons to represent the topics.
Interface and interaction
Interface and interaction
The interaction design process was iterative, but we landed on grouped pins by topic overlaid on the isometric map. When the user selects a topic, the related pins appear, and the user can hover over a pin to see a short bit of content and click through to see a video and read more. When the click through, the content for the pin the user selected is generated at the top, and the rest of the content in that topic falls below it, broken up by images.
Here's an example of the user flow for the Places to Eat topic:
The user can go back to the map (which still shows the pins for the last topic they selected) by using their own back button or browser back button, or they can click the X in the top right corner.
The Virtual Campus Tour is currently in its second development phase, where I'm writing the content for the Loop Campus and working with dev and design to improve the interactions based on user feedback and tracking data.
View the Virtual Campus Tour.
Google Sites
Report abuse