Isobel Graham-Potts | UI Designer

The Project

The Globe and Mail

Reimagine the user flow of the Globe and Mail newsletters page to allow users to change or add additional email addresses to their newsletter subscription preferences.

Overview

My Role

Product designer

Time line

3 months

Problem Definition

The product design team at the Globe and Mail learned from user interviews that a common pain point for newsletter subscribers is the user's desire to change the email address that their newsletters are sent to.

This project was intended to explore how the user flow of the Globe and Mail website can be modified to enable newsletter subscribers to receive newsletters to the email address(es) of their choice.

Desired Outcomes

Readers sign up for a newsletter using a different email address
Readers sign up for multiple newsletters using several different email addresses
An increase in newsletter “opens”

Beyond Scope

Redesigning the Newsletter page
Significant alteration of the existing Newsletter flow

Project Link

See it in Figma

Design Process

Stakeholder Meeting

I began with a kickoff call discussing the brief, scope and desired outcomes with project stakeholders.

From this discussion I learned the user context informing the project's key assumptions and identified several important use cases to test my design against. I used this information as a rational for making my design decisions.

User Flow Study

I mapped the user flow and identified current pain points: primarily overly-varied and unpredictable navigation structures.

Design System Review

I reviewed the Globe and Mail's pattern library and familiarized myself with the Globe's various styles and UI components.

User Context

When Globe and Mail users set up their account they provide an email address to be associated with the account, then don't check it.
All newsletters are sent to this unmonitored account, so go unopened.
Users would prefer to receive emails to relevant email addresses that they regularly check.
Users want specific newsletters to go to specific email addresses based on the newsletter subject. Report on Business newsletter to a work email address. Health and Wellness to personal email address, ect.

Design Iterations

Round 1

I created a new user flow using current design patterns and page structures to stay within the scope of the project. To do this I made changes to two separate sections of the website: modifying the cards on the Newsletters page and adding a new section to the Account Settings page.

'Sign up' button triggers secondary state with 'select email address' drop down list. List accesses email addresses added in 'Account Settings' to present as options. New 'Add email address' link, redirection to Account Settings.

'My Newsletter Email' section in Account Settings. 'Email address' field is prepopulated by the primary email address by default. Interacting with the 'Email' field takes user through Email Addition.

Email Addition flow. User adds a new email address into the text field and confirms input with 'Add email address' button. Functionality and user flow is the same as the preexisting 'My email' interaction.

Once added the new email address appears in the Account Settings page. Email addresses can be deleted if no longer wanted by clicking bin icon. 'Customize newsletter preferences takes use to 'My Globe' > 'Newsletters' tab.

Newsletters tab identifies the email address previously selected and offers unique page. Newsletter selections associated with the email address can be toggled on and off here, customizing which newsletters will be sent to the address.

The 'Add Email Address' option on the Newsletters page redirected the user to their Account Settings, where they could leverage the new 'My Newsletter Email' section to add a preferred email address.

Having added any/all additional email addresses in Account Settings the user could then select them on the Newsletters page moving forwards, or customize newsletter selection on the 'My Globe' > 'Newsletters' tab by clicking 'customize newsletter preferences'.

My Concerns

While creating this option I asked is it too much set-up and would it be too complex or time consuming for the average user?

Pros

No major system changes.

Cons

Starting a process on one page and redirecting to another removes the user from their original intent.

Next steps

Find ways to achieve the outcome without redirecting the user away from the Newsletters page.

Round 2

I looked into alternative ways to fit the email address selection and creation toggle onto the Newsletters page. Possible options included cascading cards, drop down menus, expanded states and flyout widgets.

I searched other design systems for examples of my the functionality, as well as for preexisting samples within TGAM. I found a sample suitable for my purposes on the Globe and Mail's Podcast page, which I then modified for my own purposes.

Initial card state appears the same as Podcast page cards for visual consistency. 'Sign up' toggles an expansion of the card, displaying multi-purpose field for adding an email, or selecting one already known. Downward arrow icon indicates behaviour before clicked so the expansion does not jar the user. 'Change' now redirects to the 'My Globe' > 'Newsletters' tab, instead of 'Account Settings'.

Once directed to 'My Globe' > 'Newsletters' functions the same as proposed in round 1. 'Globe Email Newsletters' will redirect user back to 'The Globe and Mail Newsletters' page, returning user to original context. 'Change' refers the user onward to the 'Accounts Settings' page, where they leverage the 'My Newsletter Email' as designed in the previous round.

This idea was a fusion of found functionality from an external design system and TGAM’s visual style, leveraging the design of the Podcast page cards in combination with the smooth transitions of the expanding cards in the Material Design system.

Round 3

Round 3 began very much the same way as round 2: search for a way to present the user with the space to add or modify a new email address while remaining on the Newsletters webpage.

Returning to The Globe and Mail website I searched again for any samples of flyout or pop-out functionality which would be within the technical limitations of the website. The Podcasts page featured flyout functionality that I then leveraged for my next design iteration.

The Newsletters cards re-imagined using flyout functionality from the Podcast page. The 'Change' button returns the user to 'My Globe' > 'Newsletters' tab, featuring functionality as designed in round 2.

The structure of the Newsletter’s page didn’t allow for the smooth expanding functionality as designed without a large amount of redevelopment and so in this round I ended up going beyond the project's scope.

After completing round 3 with functionality I knew to be within the project's scope and website's capabilities I felt confident about my design and moved to test it against two of the use cases:

Use case #1

A first time newsletter user signing up to Top Business Headlines: Evening Edition and adding a new email address.

Use case #2

A user who is already subscribed to 2 newsletters and wants the Politics Briefing newsletter to go to a separate email address to the Report on Small Business newsletter

Next Steps

After testing against these two use cases I found that my design did not stand up under more rigorous user testing.

The proposed flow functioned well for Use Case #1, but led to a series of user redirections that did not return the reader to their original point of website interaction in Use Case #2, repeating the issues found in round 1 of the design.

Round 4

The final round of my design was dedicated to closing loops in the user flow, minimizing redirects and curating the language of new copy to be simple and plain, removing unnecessary verbosity.

I weighed these changes against the project's identified use cases and desired outcomes and was satisfied with the outcome.

Final revision of the Newsletter page cards. Functionality and appearance is consistent with Podcast page cards - triggering a flyout menu upon 'Sign Up'. The user is not removed from the page and can add or modify prefered email address. If additional customization is required the 'Change' link flows through to 'Your Globe' > 'Newsletters'.

'Add Email Address' link flows through to 'Account Settings' and offers another chance for user to add an email address if needed. 'Globe Email Newsletters' link returns user to previous page to finish loop. New 'Select an email address' drop down link is added, toggling the apperance state of the Newsletters tab to show which newsletters are associated with the selected address and allow them the radio buttons to be switched on and off per email address.

Final Round Account Settings page before email input

Wording of 'My Newsletter Email' section on 'Account Settings' is updated. Functionality remains the same as previous rounds.

Final Round Account Settings page after email input

The layout and presentation of added email addresses is modified for clarity. Repeated 'Customize newsletter preference' links are removed.

Project Debrief

Lessons Learned

Begin using ‘use cases’ much earlier to assess design suitability in initial rounds and avoid iterating upon flawed design concepts.
Speak to the devs about the scope of changes possible and the back-end constraints that inform project limitations before wireframing.
Spend more time in the brainstorming stage to better consider my solutions before progressing to wireframe rounds.

Things To Test

The verbiage of new labels. Are the clear enough? Should they be more succinct? Should they be more descriptive?
Do users understand the adjustments made to the newsletter pages? Or how to leverage the new functionality?

Going Beyond Scope

Had it been within scope this user flow would benefit from a complete re-design of the Newsletter’s page or a redevelopment of the back-end to allow the cards to cascade dynamically, allowing for greater functionality options and mobile-first user interface solutions.

Final Thoughts

This project was a brilliant design challenge. It represented a real issue that the Globe and Mail's users come across and required me to consider how front-end data collection could be made smooth and frictionless for our users on a part of the website that is not designed for data input (the newsletters page).

Had I the chance to do it again I would use my lessons learned and a conversation with the devs to redefine the project's scope and use brainstorming and storyboarding to refine my design concepts before creating further design iterations.

Hello,

I'm Isobel