HTML EMAIL PROJECT

user experience and visual design

THE PROJECT

ABOUT THE DEPARTMENT

The Housing Assignments Office at Penn manages almost 6000 beds for undergraduate and graduate students on its Philadelphia campus.

THE ASK

The department needed a way to provide clear information about why students should continue to live on campus and how they can sign up for housing, all while maintaining the departmental brand. I was asked to update the format of the emails sent to students about their housing, specifically about the processes surrounding choosing their room for the following year.
Important Details
  • find a clear way to communicate details and resources about complicated room selection processes
  • market on-campus housing to students
  • incorporate departmental brand guidelines
  • find a simple format that will work with tempermental software
  • provide a space for the body of the email

An Original Room Selection Email

Old Emails

THE PROCESS

STAKEHOLDER INTERVIEWS

There were quite a few people who had a vested interest in this email format and whether the information they wanted featured would be included. I spoke with seven colleagues from several different areas of the department and several students and determined the following additional needs:

COMPETITOR ANALYSIS

I knew of one other school who used this particular software and HTML emails to communicate housing information to students, so I used a screenshot of their emails to see how they used the software to communicate information. I also looked at emails that I receive on a daily basis from companies to see how they structure their information.

CONTENT AUDIT

I started with the goal of the emails - to get students to choose to live on campus - and sorted relevant information based on the departmental website and personal knowledge. I determined that the most important information included making sure students knew when the processes where, how the processes worked, options for on-campus living, and options that provided flexibility that might make students choose living on campus.

Email Content Chart

Content
Ultimately, I decided that the process intricacies and options for flexibility were linked and could be their own category.

I created three categories of information for the emails:

WIREFRAMES

I knew that our software could handle simple HTML tables, so I was looking for something very table-oriented. I sketched out a number of possibilities. Based on the various internal goals, I ultimately landed on a three-column structure that featured one marketing section, one for email content and one for important information and resources.

Email Wireframes

Wireframes

USER FEEDBACK

I showed my coworkers, supervisors, and several students the format to get feedback. A number of people thought that it looked too busy with three columns - the marketing section in particular. Because marketing information could be included in the email content, I edited the format down to one column for content and one for resources.

THE RESULT

FINAL DESIGN

The format has gotten a lot of positive feedback, although there’s no way to measure any results quantifiably due to software limitations. It clearly displays links to social media and the housing and dining departments, incorporates the brand through a graphic and uses small graphics in the place of fonts that we can’t access on the software. It’s also very convenient in that it is reusable and several others in the departments have used the email structure for their own processes.

The final design

New Email Design

CHALLENGES AND CONSTRAINTS

The biggest challenge was that the software is extremely difficult to use for formatting - even when certain code is put into the email editor, the software adds its own additional code. This also meant that we were unable to add usual HTML solutions for making emails responsive and or ensure that the emails will look exactly how we want in all email carriers.
back to main page