Guidebook Tours App

Guidebook Tours enables prospective students to experience campus walking tours on their own time at their own pace, from any mobile device.

“Create a mobile app that enables prospective students to experience guided campus walking tours from their mobile device using GPS.”

The Challenge

Guidebook, Inc’s current guidebooks currently listed only static information. This project would require a new level of technology, user interactivity, design and cross-functional collaboration for the company.

In addition to guiding users through a series of landmarks, buildings, and other sites of interest, the app would need to provide answers to common questions about student life, admissions, and additional information that prospective students and their families frequently ask.

 

Background

Guidebook, Inc.’s platform enabled customers to create their own cloud-based mobile conference apps, corporate meeting apps, university campus apps, and other custom event apps.

The Guidebook Tours app would provide a highly interactive walking tour experience, serving individuals and families who visit prospective campuses on weekends, holidays, or simply cannot make a scheduled tour.

My Role 

I led the design of the Guidebook Tours iOS app, which started in July 2015 and shipped in October 2015. Our small project team consisted of a product manager and a full-stack engineer.

I was responsible for research, user experience design, interaction design, visual design, and copywriting. Collaborating closely with our product manager, I defined the product and vision for launch and beyond.

Product Definition

I worked closely with our project manager to define the product, prioritize and negotiate features, and establish the vision for launch and beyond.

End-to-End Design

I defined the user journey and app flow, created wireframes, coded prototypes, provided visual design, and wrote UI copy.

The Approach

Agile

We followed an Agile process, with daily stand-ups every morning.

Show and Tell Frequently

I created and shared wireframes and prototypes rapidly to explore, communicate and evaluate concepts throughout the design process.

Build and User Test Internally

We created a working prototype to test internally. We iterated quickly based on internal user feedback.

The Discovery

 

Research

I immersed myself in the world of college admissions and tours:

  • Campus tour maps
  • Admissions sites
  • Completed multiple online virtual tours
  • Competitive Analysis

 

Adapting In-Person Tours for the mobile experience

To fully understand the campus tours that our app aimed to support, we divided the experience of an in-person campus tour into specific stages. This provided us with a map of the user’s journey and provided us with a common language for clear communication as we designed the app.

The Vision

Create a mobile app that acts as a mobile tour guide, directing them through a walking tour around the campus, stopping at specific sites of interest like significant buildings, structures, photo opportunities.

Be friendly and delightful. Visiting college campuses should be a joyous and exciting occasion for prospective student and their families. Enhance this joy and add to the delight.

Be easy-to-use so that users can focus on the sites they’re seeing. Our users are on-the-go. They should be able to use the app for the first time while walking. Every extra moment they spend trying to figure out how to use the app detracts from their overall tour experience.

The Concepts

 

The Framework

Although the guided walking tour was the most interactive feature of the app, the app also provided the user with campus information such as housing options, FAQs, freshman class statistics, and more. We explored different options for the app framework, and how the user would navigate through the different parts of the app.

The Tour Experience

The mobile walking tour was the most interactive and complex piece of the app. Taking a holistic, top-down approach to the end-to-end experience, we focused first on the transitions between each of the tour steps as well as the different possible states within each step. The interactions, transitions, and animations between each new screen would play a key role in providing user understanding and delight.

UI Exploration

Once we had defined how each of the different screens flowed with one another and every path between different screens, we began to explore states, layouts, interactions and animations within the individual screens.

Rapid Prototyping

After multiple rounds of wireframe iterations, I created rapid prototypes using FramerJS so we could “feel” some of the design concepts, flows, and transitions at a higher fidelity.

The prototypes were invaluable in communicating and spec’ing specific animations for implementation.

User Testing

We created a working prototype of a quick mobile tour around San Francisco, which allowed us to fully evaluate the mobile tour app user experience design. We distributed this prototype to everyone in the company for user feedback. This exercise informed minor refinements to the design.