Mailing List Subscription Application

Our Part-time Studies (PTS) wanted better part-time course marketing capabilities, and our Marketing department wanted to move postal program mailouts to email subscriptions.

What I Did

  • business analysis & requirements
  • IA, wireframes & prototypes
  • project lead & testing lead

Analysis & Research

This began its life as a request for CRM-like features that would help schools market courses. As I collaborated with my team to lead requirements gathering, we undertook substantial environmental research to see what other institutions were doing in this area, and favoured more of a subscription-based notification system for new offerings and a newsletter feature for program email marketing.


  • Separate course and program catalogue front-end subscription form modules.
  • Email notification and subscription confirmation engine.
  • Back-end administration application.
  • End-user subscription management panel.
  • Long overdue PTS catalogue UI/visual design updates, including:
    • consistency with our program catalogue
    • improved calls-to-action and messaging
    • display of new textbook/seats remaining data in course sections

Admin Interaction Design

The admin application had only a few internal staff users, so we purposely kept design and testing cycles simple. The flow and wireframes below represent the first concept of this application, which included the aforementioned CRM features. In particular, the initial request was for something with waiting list and customer communication features. As we began developing that, the subscription notification idea gained more prominence in part because we were getting institutional push back on anything of a CRM nature, and in part because of continuing competitive research.

An early PTS catalogue flow + V1 ‘waiting list’ application. Click any for overlay.

  • Several brainstorm/sketch sessions were held with the clients and key internal stakeholders.
  • I developed a high level flow (above) with click-through wireframes (below) in Omnigraffle for key user interfaces and interactions.

V1 wireframes with key admin screens/interaction annotations/callouts + early concept of the front end user subscription management page (1st above)

After the Omnigraffle flow and wireframes above, based on stakeholder feedback sessions I sketched the addition of a bounce management screen (large background below) for invalid email addresses and moved to a tabbed interface to improve usability.

After we removed the CRM-like features (post-wireframes above) and streamlined it down to a subscription-based email notification system, it made the admin application much easier to design. Not only can you see my sketch of the tabbed navigation and bounce management panel, but it allowed the application to have 5 main interfaces. Courses, programs, contact management (for mapping people to courses and programs), email bounce management and report downloads.

Tabbed nav and bounce management sketch + 5 final UIs based on earlier wireframes and new nav. Click any for overlay.

Note: The interaction design above is focused primarily on the backend mailing list administration application, whereas iteration, testing and final outcome below are more focused on the front-end catalogue user experience.

Catalogue Front-end Interaction Design & Testing

We were originally only going to add a feature to our two catalogues without any major UI redesign. However, as our program catalogue had received a recent redesign and our course catalogue hadn’t, it became apparent a facelift would be necessary. In particular, I was concerned that the different user experiences between the catalogues would not only create confusion for our users, but also present difficulty for us to integrate the same application in the two UIs. As such, we decided to update the course catalogue to more closely match the program catalogue during this part of the project.

Early wireframes for the three main new end-user screens ~ course page, subscription form and mgmt panel

I used the old course catalogue design to build some quick fairly low-fidelity Omnigraffle wireframes (below) to convey our approach for the project team, and then a medium fidelity Axure prototype using design elements from the program catalogue, pictured below. This would also help me test the new subscription application in context with the new design.

L-R Axure prototype flow ~ Top, course page => textbook layout => contact => related programs.
Bottom, subscription page => confirmation email => subscription mgmt page => cart for registration checkout. Click any for overlay.

In addition to accommodating the new subscription form page, we decided to add a number of long-requested enhancements, including an optional contact us page, a list of programs the course fed into and more detailed textbook data. The prototype showed roughly how we would accommodate the new data, in addition to mimicking key interactions.

  • I regularly presented design iterations to key stakeholders, incorporating feedback.
  • I alpha-tested my Axure prototype subscription forms with internal and external (student) users.
  • On our development server, I ran full beta end-to-end system tests, including all email messaging/notifications and subscription management panels.

After prototype testing was finished, I moved entirely into project management mode, as development was handled by our front-end and back-end developers.


L-R final screen captures ~ course page, subscription form/confirmation email, section w/ textbook info, subscription mgmt panel. Click any for overlay.

We solved the key project design challenge by adding new subscription functionality to both our program and course catalogues. Thousands in direct mail costs have been eliminated from our marketing budget. Additionally we now have much cleaner and vastly improved layouts for our course sections, including tabbed semesters, clearer messaging and calls to action, and textbook data in context from our bookstore for the first time. Uptake on both course and program subscriptions have been good, with thousands of course and program subscriptions (see below for spring 2015 snapshot).

Spring 2015 Notification Metrics

  • 7,907 notifications sent, driving 1,271 site visits for a 16% response rate.
  • 15 course registrations
  • 77 new course notification subscriptions
  • 6 new program newsletter subscriptions
  • 3 contact forms submitted
  • 1 infosession registration
  • 1 spend-a-day registration

Go ahead, find a course you like and test it out.

Work Home →