Students today complete their initial stages of college search almost entirely online.  Research shows that 71 percent of seniors looked at college websites on their mobile devices.   Visiting the actual campus shows an even greater student's interest in considering the school as a possible environment for a 4-year experience.  

Last year, Carnegie Mellon University had a total of 36,000 registered people visiting on a campus tour, but many students visiting during the weekends, when the office is closed, or during holidays did not get a chance to experience the school as they would have from a tour.  
Working with 4 software engineers, I was responsible for defining the user experience, content screens, and visual design.

Marie Shaw, Andrew Kim, Brandon Lee, and Rachel Kim.

This was a 6 week long project. 

The final deliverables were a presentation to our clients, working demo, and UI wireframes.

Our final Responsive Web App UI screens

Our process journey.

Problem Space
We saw this opportunity to design a mobile web app to address the lack of navigation routes and student testimonials for prospective students who visit campus on a day when the office is closed.  
Examining the existing mobile platform 
We saw a few potential areas where clarification and interactive elements could benefit from.  Some insights we found:

Unnecessary Information. The current web app had many location-based "tagging" in the menu such as "hotels, dining, parking," all of which are important, but unnecessary for those who want to know about campus atmosphere and experience. As more of a general map, it was evident that the information was insufficient for new prospective students and parents who would prioritize getting to know the environment and experience of CMU rather than just locations.

Lack of Hierarchy & Direction. People don't like to think when it comes to mobile application.  This is one of the main reasons people exit out of the app.  In our redesign, we wanted to create a clear flow choosing a specific tour and being directed to an area with the integration of Google Maps. 

We studied the current "Campus Tour + Locations" to see opportunities for better user experience.

Snaps from our campus tour experiences where we talked to prospective students, office attendants, and observed signs.
Insights from Campus Tours
In order to understand why people go on tours, what kind of things that tour guides talked about, and the how our design could align with the actual tour itself, we signed up for a few campus tours ourselves.  Some worthwhile insights we found from our visits.   

1) Buildings are closed during weekends and holidays.  Because buildings were closed during weekends and holidays, it became clear that our application would have to guide students and tell a clear story and experience without relying on getting into the building itself.  

2) Students want to know about Campus Life We noticed that questions that both students and parents asked were around student activities outside academics and also the dorm life.  Users already seemed to want to come to CMU, they came on tours to see if they would fit into the culture of the school.  We kept this in mind when we designed our app.      

3) Tour guide's personality matters. This could be more of a biased observation, but an important one.  The energy and enthusiasm of the tour guide seemed to affect the mood and attention of the crowd.  From this we learned that our app needed to have the same affect.  We needed to capture the enthusiasm and school pride to appeal to our users.  

The tour guides were an extension of the campus atmosphere.  
After speaking with parents, current students, prospective students, Office of Admissions, and tour guides, we created personas to represent our users.
We listed a few assumption to guide our design.
Our primary audience being prospective students, we can assume that teenagers are very tech-savvy and should be able to use a mobile based web app with no trouble. 

We also assume that people would be accessing this site through a smartphone using either their native mobile browser.  Users will open the site for leading themselves on a campus tour, so we can expect them to only use the site while they are on campus. The average user connected to the CMU wifi or data on campus should get good to excellent connection speed. We expect users to open the site once for any period of time from one minute to gain information on a specific landmark to an hour for a full tour. On an average visit a user stays on the site for 30 minutes.
What does a prospective students want to know?
From our research we put together a list of user goals to implement into our design.
1. Will I fit at this school ?
2. What does a day in the life look like?
3. Which way do I go to find the important locations?
4. My parents are also here, will they trust this school to be a good fit for me?
Planning Process 
We had multiple iterations starting with wireframes.
Visual Design Guide
The Carnegie Mellon University visual identity creates a widely recognized image of the university brand. It is critical that the university adopts a consistent use of Carnegie Mellon’s official word mark, colors and typography to enhance global visibility and reputation. 
For Alert colors and Action Button colors: 
We chose to use Hex code: #4CD964 for the light green & #389648 for the darker green 
The Scotty Dog 
Speaks to Carnegie Mellon’s Scottish heritage, and is the school’s mascot so we decided to add that in our welcoming screen. 
Multiple Iterations
We tested multiple iterations of the design in response to our user testing.
User Testing
Between each design iteration we had multiple users test our decisions. 

User Testing Insights and Responses.

Our Proposal 
Making tours more personal and engaging
Our goal was to make it easier to have a pleasant and engaging tour experience that represented Carnegie Mellon hospitality.  Central to this was through creating personal interactions and messages at the completion of the tour.    

Making navigation between directions and testimonials easier
We noticed that many people struggled to find the "back" button during our user testing and would simply exit the app altogether.  In our redesign, we proposed to have the testimonials in a small pocket underneath for easy access and easy exit.  This is an integration with Google Maps.   
Directed Guide
A clear and straightforward guide is very important for users to understand and follow the tour. We envisioned a system where location based sensing coupled with "next" buttons + overview page would aid this process.
Because our focus was to create a personal, simple, and student testimony driven mobile web app, we tried strived to create with those in mind. Please note that this project was that bridges existing app capabilities with google maps integration which requires more exploration and user testing.

Back to Top