Our second project in Interaction Design Studio was to create a responsive website to help newly accepted CMU students feel welcomed once they confirmed their attendance. This project was done in partnership with a wonderful designer, RJ Villaflor.

Role: Researcher, Designer, Prototyper
Project Type: Responsive Website Design
Teammates: RJ Villaflor
Platform: Web, Mobile
Tools: Sketch, Invision
Timeline: 3 Weeks

Problem Space

Create a newly, improved responsive website to help accepted students decide on their attendance to Carnegie Mellon University, who struggled with:

  • Multiple acceptance offers from prestigious/competitive universities 

  • Deciding to leave their industry jobs to go back to school full-time

  • Getting all the information needed before making an informed decision

Process

We conducted research (informal interviews ) on different students, whether they were Master's students or undergraduates, with interdisciplinary degree types to understand what their process and experience was before deciding to attend CMU. Based on the data gathered, we created personas and journey maps. This gave us more insight on the users and allowed us to design a better solution for them. We came up with three ideas to create value for them during this process and ultimately focused on a personalized, responsive web feature. 

We had a week to gather data from users, so we decided to interview four students with varying backgrounds and majors to get a wide pool of data. The method we used for interviewing was short, open ended interviews, where we asked the students to walk us through their journey from acceptance to the first day of school. This gave us a lot of different data and helped us with next steps of creating our customer journey map. 

Customer Journey Map

After gathering all our interview data, we used sticky notes and butcher paper to create a giant customer journey map from the moment of acceptance to the first day of school. We realized there were similar touch points and opportunities for the users even though their stories were so different. 

Preferred Customer Journey

After we had a good idea of the major touch points, opportunities and pain points with our original customer journey map so we sought out to create a preferred journey map. This showed us the ideal path a user/accepted student could take to decide on CMU. 

Initial Wireframes

Here, we worked possible pages and the major layout of our website for both mobile and desktop. We also worked through what pages we actually needed.

Wireframe Iterations

Based on in-class feedback, we eliminated the feature to use birthdate as a password or have any login information generated by another party. Additionally, we also added a transcript of the information in the video below the video.

Visual Design Decisions

We narrowed down what pages should be included on our website. This was decided by trying to consolidate ideas like “job prospects” and “opportunities” into “Why CMU?” Additionally, we chose not to overwhelm users with a calendar of events but instead a few important dates.

Since this website will be by CMU for CMU accepted students, we chose to maintain as much of CMU’s website conventions as possible. We used Open Sans typface, CMU’s color codes, and CMU’s logo. Additionally, based on in-class feedback, we removed the “peeking” text on larger bodies of text and made them fully available by default. This was done since there is not an excessive amount of information, there are useful links within the text, and it was unclear whether this visual cue was to scroll or to open more text.

User Interface: Narrowing in on Design

Most of our final desktop screen designs are responsive only in it width, typeface, and graphics sizes horizontally. However, we found it was a more effective use of screen space to arrange the graphics on the “Why CMU?” page horizontally rather than vertically.