Helping incoming international students find travel companions

A mobile-first responsive web design
Role: Ideation, information architecture, wireframing, high-fidelity mockups 
Team: Hau-yu Wong, Ajayan Subramanian
Skills: Personas, scenarios, wireframing, responsive design, visual design
Duration: 4 weeks
Project Brief
The objective was to design a website for Carnegie Mellon that provides support to students as they make their way to Pittsburgh from their homes. This could involve help with getting a visa, finding housing, finding roommates, the route to campus and so on. The end goal was to produce high-fidelity mockups demonstrating the value of our solution.
Rapid Research
To narrow down the scope of the project, we conducted quick research to identify the major pain points on a student's journey to Pittsburgh. We interviewed 4 students, and immediately decided that there was more opportunity to add value to international incoming students. Their trips are longer, and they do not have access to internet and cellular services for a majority of their journey, causing anxiety and stress.
We mapped out the international student's journey, and identified pain points and potential areas we could explore in our design.
We identified 4 distinct phases of the journey - planning, traveling, arrival at Pittsburgh, and the first visit to CMU. In each of these phases we found pain points and areas of opportunity for a CMU service.
The pain points we identified revolved around a lack of information, a strenuous visa application process, exhausting flights, and trouble settling in. We came up with 5 opportunity areas for our design:

1. Redesigning the CMU website to present information in a better form than is currently available.
2. Aggregating vital information provided by peers on various social groups.
3. Providing real-time information about the visa process, with live tracking of the status.
4. Helping students find travel companions, so they can solve problems on the trip together.
5. Greet students at the airport on arrival, with a temporary wifi and SIM.
Our Solution
We decided to focus on helping incoming international students to CMU find travel companions. Together they can overcome the obstacles on their journey and have a pleasant trip. As a secondary objective, we thought this would be a good way to forge early bonds, and promote the CMU community.
We created the persona of an international student, along with a scenario, to identify the tasks a user needed to accomplish using the website. They're captured in this graphic below.
Design Process
While the bulk of our design was conceived and realized in October 2015, I iterated on the wireframes and visual design based on feedback received from peers. We started out by breaking down the scenario of using our website into tasks a user needed to accomplish, in order of importance:

1) Log in to the CMU network, so the website can pull information about you.
2) Browse a set of people who you are likely to want to travel with.
3) Get more information about someone you're particularly interested in.
4) Send them a message with your interest in traveling together.
5) Update you travel preferences and interests to find better matches.
6) Update your settings, to control notifications.
Based on these tasks we created a site map. We chose to design mobile-first, so it reflects possible screens on the mobile web. We narrowed down our solution based on feedback.
Some of the useful feedback we got: 1) avoid group messaging, and creating groups, to reduce complexity.
2) Having a Useful Information page would replicate a CMU website. Instead display it where required.
I did some reading on best practices for responsive design. Here are some of the most important things I came across.
1) The devices worth investing time in designing for are mobile portrait, tablet portrait, desktop landscape.
2) It is important to ensure parity of content and features across all devices.
3) I set breakpoints of 400px, 720px and 1200px, and designed for an iPhone 6, iPad (portrait) and desktop.
4) It is vital to prioritize content, so that the mobile experience does not descend to endless scrolling.
I sketched out mobile and desktop screens, and annotated key differences between them. It was useful to show these to peers to gather feedback on usability before rendering them digitally.
The main user task is to browse people. So I chose that as a focal point for deciding on the grid system. For mobile, they would be displayed as cards in a vertical one-column grid. On tablet, this would become a two-column grid. On clicking person 'cards', you could get more information about them. Displaying 3 columns of cards on a desktop would be too much to consume for the viewer. Instead I wanted to use the third column to display in-depth information about a person, when clicked on.
Through medium fidelity mockups I got a better understanding of the relative size of elements, the space available to lay them out, and the typographic hierarchy. Here are the mobile mockups.
And here is a sampling of desktop and tablet mockups. Using the mobile first approach was great, since it is tempting to add lots of content on the width available on the desktop screen.
For visual inspiration I put together a mood board on Pinterest (left). I was particularly fascinated by this iconic image of Hammerschlag Hall (right), which influenced my choice of colors.
Final Design

Here are some of the mobile high-fidelity mockups.
The diagram below shows the sequence of actions across the mobile screens.
Here are some of the final Desktop and Tablet (portrait) screens.

Other Projects

Educational Poster
Alarms & Clock
Anna Karenina
Tech Explorations
Capstone Project with Odigo
Lemme Get That