Team: Marie Shaw, Andrew Kim, and Brandon Lee
My Role: I was responsible for defining the user experience, content screens, and visual design.
Duration: 3 weeks, Spring 2017
Skills:  User Experience Research, Visual Design, Mobile web UI
The Challenge
Admissions Office is closed during the weekends and holidays—when students come visit with their working parents.  The Web app experience must take a larger role to provide prospective students with the information they want to know.  CMU's admission office approached us to propose design solutions.  
Research
Understanding Context and People
The best way to find out was through going to campus tours ourselves and asking prospective students and parents about what they wanted to find out about during the campus tours. This experience was extremely valuable for our team to directly engage in conversation with our target users. To understand what they really want from a campus tour, we observed the interactions that prospective student have with the tour guide: 

From our observations, we noticed that students ask these sorts of questions:
•  Will I fit at this school?   
•  What does a day in the life look like?  
•  What are the some of the popular locations for students to eat when living on campus?  
•  My parents are also here, will they trust this school to be a good fit for me?​​​​​​​
" Prospective students already know that they would be getting a good education here, what they want to know is if the school is a good cultural fit." - Office of Admissions
Insights
Putting Users First
After speaking with parents, current students, prospective students, Office of Admissions, and tour guides, we outlined some user wants and needs to include in the app experiences.  The design principles that we came up with were as follows:
• Users want to know about social life of the campus students.
• Users want to access information of the campus as a whole
We then created personas to represent our users and their needs.
Competitive Analysis 
Before our design process, we also wanted to look at what other schools were doing - and see how technology is being introduced to improve the campus tour experience. Some specific schools that we looked at were the University of Virginia, the University of Pittsburgh, and Boston University. Some cool things to note from our competitive analysis were the use of AR (Augmented Reality) to help guide and direct visitors and the use of student testimonials to really pull on the empathy strings of prospective students.
Wireframing
We decided to move forward with the use of a mobile web platform - because we assume that this is most accessible to all users in the context of a campus tour. I was in charge of creating the screen designs through paper wireframes from the collective feedback from the team of the layout, features, and interactions based on users' needs. 
Paper Wireframing

wireframing

Lofi Wireframing
User Testing
Throughout our process of designing our wireframes, we made sure to conduct user tests with our peers. We prompted users through our prototypes to ensure that our reasoning behind our designs were sound.  We found it valuable to test our prototypes early on with our paper wireframes to avoid users getting caught up with the fine visual details such as color and size.  
• "It's a bit confusing that the 'Go Back' button is on the right side of the screen."
• "Why is the menu button on the right side when it slides out from the left?"
• "Wouldn't the list of locations get really long at some point?"

user testing

Visual Design 
We followed the visual identity that CMU has created to adopt the consistent use of Carnegie Mellon word mark, colors, and typography with the addition of adding Google Maps API.
Making tours more personal
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 throughout the tour experience.  

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 API.  
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.
Final App Design
Our final design consists of a mobile web application that makes campus touring easier for the prospective college students to tour the campus, but also provide more insight into how the life of students on campus are.
Reflections
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