RJ Villaflor
  • Portfolio
  • Resume
  • About me
  • Contact me
Picture

Process Overview
How might we improve the admission experience for prospective Carnegie Mellon students?

This project exercises my responsive web design proficiencies. This project spanned 3 weeks in October of 2016. It included guerilla research, constructing a customer journey map, wireframing, finalizing, and prototyping the design. I was responsible for design for my group of two members. This project was prototyped with the director of the Human-Computer Interaction Institute for possible implementation.
Click to jump to section:
  1. Research
  2. Reframing the Problems
  3. Validating the Ideas
  4. ​Wireframing and Testing
  5. Early Visual Design Iteration
  6. Latest Visual Design
  7. ​Future Work
 

section 1/7
Research
Assisted Story-Telling with CMU Students

Picture
During the fourth and final interview, the interviewee mentioned that she received a phone call from the director of her program informing her of her acceptance and opportunities that she, specifically, would be interested in as a student at CMU. This interview was conducted in an open space. As she spoke about this experience, other students felt neglected and disappointed they didn’t receive similar phone calls. Additionally:
  1. Accepted students often immediately share their acceptance with their colleagues, friends, & families
  2. Accepted students often felt overwhelmed with the information about attending CMU​
  3. Accepted students ​often received acceptance notifications in SPAM folders
 

section 2/7
Reframing the Problems
Prompting Creative Design Ideas

Picture
To avoid acceptance notifications from getting lost in SPAM folders, accepted students would be sent an SMS message informing them that their admission results are available.​
Instead of asking the director of each institute to call every student they admit, the directors would record short videos informing admitted students of their acceptance creating an equitable yet unique admission notification.
We would provide share buttons for the student to share his/her admission video. This would provide the student the affordance to inform her/his colleagues, friends, and families​ of his/her admission. 
Only minimal university and program information would be included in the website. This would serve avoiding overwhelming the student.
 

section 3/7
Validating the Ideas
"I'd rather read than watch a video...and I still want the email."

We tested the idea of having a text message notification for available admission results and an admission notification video. This was done with my project advisor, classmates, and interviewees. The ideas proved to be a fitting solution for the problem. However, some testers still wanted an email notification for available admission results and did not necessarily want to watch a video about their admission.

As a result, we still included an email notification as part of the experience in addition to the SMS notification and a transcript of the video content below the video.
 

section 4/7
Wireframing & Testing
Visualizing and Validating the Details

​I created wireframes and tested them on, again, my project advisor, classmates, and interviewees. I found two possible problems:
​
  1. The "read more text" visual cue made it seem as though the text was simply cutoff and not an indication that more text was available.
  2. In the mobile version of the website, the social media share buttons are hidden and seem indicate that they are not available, even though they are.

As a result, I created the following changes:

  1. I included the entirety of the text instead of cutting it off.
  2. I added the social media share buttons in their entirety.
Picture
Picture
 

section 5/7
Early Visual
​Design Iteration

Using the CMU Style-guide

Picture
Picture
Picture
Picture
Picture
 

section 6/7
Final Iteration
Using Less Branding & Pivoting to a One-Page Design

To better tell a story and progressively disclose information, we pivoted towards a one-page design.

Additionally, upon critique, we found that our visual design was actually using too much of the Carnegie Mellon branding. Specifically, we were overusing the branded red color. As a result, we used more neutral colors and reserved the red for the Carnegie Mellon logo.

​You can also see a model video of a CMU director accepting a student below.

section 7/7
Future Work
Information & the Pitch

As we said, we kept the amount of information to a minimum. However, this may needed more conversation with stakeholders beyond students. For example, program directors may need to inform them of actions they need to take that may be overwhelming but is very important for the students.

Finally, the concept pitch needs some work. Although we did the math to prove making videos is faster than making phone calls, some faculty were not entirely invested in the idea. More proof would be necessary.
Return to Portfolio
Copyright © 2025
  • Portfolio
  • Resume
  • About me
  • Contact me