• Add to Collection
  • About

    About

    Redesign and streamline the User Interface for NYU Email Direct. Email Direct is NYU's in-house bulk email application. The user interface was ou… Read More
    Redesign and streamline the User Interface for NYU Email Direct. Email Direct is NYU's in-house bulk email application. The user interface was outdated and need some UX love. Read Less
    Published:
Redesign and streamline the User Interface for NYU Email Direct
Email Direct is  NYU's in-house bulk email application. The user interface was outdated and need some UX love.  
This is the current design. I am going to describe the process I used to reimagine the interface and the user interactions. 
The New User Interface
The Redesign Process: Paper Prototyping
I printed out the old design and cut it up into sections. I then rearranged the sections until I felt the new design pattern was a good fit for the application. I used a post-it restickable glue stick so I could easily move the sections around on the card stock.
Redesign Process: Mental Model
After using the email direct interface I felt the mental model was off. I looked at other bulk email applications for ideas and design patterns. Other bulk email applications often lead with the process of building a custom email template. We're providing the templates so that didn't make sense. Instead I focussed on email programs and I noticed that the fields on email direct we're in a non-standard order. They were also labelled verbosley.
 
I reordered and simplified the labels.
 
Original Order
1. From E-mail Address
2. Subject Line
3. Body of Message
4. Recipient Groups to Target with the Message
 
New Order
1. To
2. From
3. Subject
4. Body
 
Upgrading the WYSIWYG Editor
The original wysiwyg editor was TinyMCE version 3.4.4.
The updated wysiwyg editor is TinyMCE version 4.1.5
I reordered the buttons and grouped them. I right aligned the Preview and Fullscreen options and substituted the icon for the template to the text label 'Pick Template'.
Reworking the 'From' Fields
The From Fields were disconnected spatially. It wasn't clear how they were connected. 
 
I thought that aligning them side by side would reinforce their connectedness. I simplified the labels of the fields as well and added explanatory text below the field. Simplifing the label and adding the explanatory text was an effort to reduce the cognitive load (less to read) and the visual noise (less to see).
Updating the To Field interaction
The To field is the heart of the bulk email program. There are 3 modes that can be used to add email addresses. 
 
1. Select Recipent Groups
2. Paste a list of Additional Email Addresses
3. Upload a Text file wiith email addresses
Selecting Recipent Groups is the most common way to email target groups. In the current design the recipent groups are displayed all at once. In some cases there may be 80-100 checkboxes displayed. This tended to hide the other input options of pasting email addresses and uploading a file.
 
In the new design we show the categories first and you have to click to reveal the checkboxes. We've also create an option to 'Expand All' the checkboxes as some of our power users found it valuable to be able to see all the checkboxes at one time.
First Recipent Group expanded.
All Recipent Groups expanded using the 'Expand All' link
The are two other ways to add email address but there not used as much. They are contracted by default to reduce visual noise and save space. 
 
Here's the 'Paste email list' option expanded.
Here's the 'Upload File' option expanded.