Category Archives: UX

Hypothesis and goals for this study
Over the last few months, we noticed there were a higher number of digital subscription cancellations than we would like. Since the reason for cancelling was flagged as technincal we suspected that the majority of people cancelling were seniors. We wanted to find out if that was really true, and if it was, what pain points could be addressed to prevent further cancellations.

We also wanted to reach a deeper understanding of this valuable and traditionally news-engaged cohort, and how they interact with technology. 

Secondary objectives
Collaborate with colleagues in different departments and meet OKR and research goals

Teams consulted: Digital Product (Design + PMs), Editorial, Marketing, Call Centre
Research Team: Digital Product and the Market Research Team
Methodology: Survey, interviews 
Participants: 6 Seniors aged 67-85 via Zoom interviews, 1500 Survey responses received out of the 2K+ sent to Star Advisor panelists.

Process:
1. Gather research questions from the above consulted groups
2. Gather observations via Call Centre anonymous survey
3. Organize all questions, distill, simplify
4. Create survey questions
5. Collaborate with Research to build Star Advisers survey
6. Customer interviews with 6 subscribers
7. Distill findings

A few of the survey findings:
(a big thing we focused on in the survey was understanding sign-in issues. We see a lot of complaints about this and wanted to understand it better)

• 1/2 think it is a hassle to sign in
• 2/3 agree they don’t like to sign in so often
• 20% overall sometimes have trouble signing in

Quotes from some Interviews:

• On signing in: “It irritates me to the point that I don’t want to do it.”
• Understanding the difference between mobile web and the app: “I don’t see any added value in the app”
• On article swiping:  “No one told us that”  (discoverability principle does not work for this group)

HMW make use of these findings

• Create tutorials (article, step by step or video, making use of the YouTube Channel)
• Email release notes (collaborate with Marketing)
• Clearly communicate updates 

Resulting Changes: We are committed to doing much better at communicating. We have added Tool Tips indicating what is new in the App for each release and have a medium site with how-to articles. We are constantly working on bug fixes and UI improvements as the product evolves.

How might we better serve our future customers now so they will become paying customers later? 

Primary Research objectives for this study
Uncover ways that Youth consume news, their attitudes towards news and work with them to generate new ideas

Secondary objectives
Collaborate with colleagues in different departments and meet OKR and research goals

Research Team: Digital Product (Design + PMs), Editorial, Marketing
Participants: 25 Grade 11 students in 2 separate classroom zoom calls with teacher co-facilitating (15 – 17 participants depending on the day)
Methodology: Focus group, breakout rooms, interviews, design jam exercises

For the first session we had a broad discussion about news. We asked the students how they get news, how they know it’s real and who they trust. Some key comments we heard:

• on fake news: “I only believe something if enough people are talking about it.”
• on engagement:  “Honestly if you’re trying to engage our age a lot of people do get their news on TikTok; you’d see a 10 second video explaining something about Covid. People rely on those sources for news.”
• on sharing: “It has to be extremely easy to send to a friend quickly”

The following week we asked the students to critique the Toronto Star App and site:

• The sites were only “OK” (it seemed they were trying to be polite)
• For them, it was more about the other ways they get their news: Rather than seeking news, they happen upon it, or stumble across it. 
• When we got them to constrain the browser into phone width all 3 kids audibly expressed relief as if to say “this feels more in order”
• Too much news at once is overwhelming

3. Finally we asked the students to reimagine what an appealing news app they would use might look like. We did some ideation exercises, starting with Crazy 8s and then some prototype sketches.

HMW make use of these findings

• How to get ourselves into their daily lives via Instagram or TikTok
• How to be there in all phases/stages as people grow

Resulting Changes: Based on the research done in this study, the editorial team had a clear point of view that focusing on TikTok was the way to go. In just a few months after this study the new channel has more than 8K followers. This has been a significant boost to audience engagement and a strong start to building brand awareness with a new audience of future subscribers. 

Redesigning the homepage of a major national brand is a significant undertaking. Multiple business goals, customer needs and so many personal opinions and preferences on how to read the news make a project like this complex and time-consuming. Between change management and engineering complexity, a roadmap was needed to plot the phases.

It started with a Design Sprint

In early July 2019, we held what is known as a Design Sprint in order to kick off thestar.com Home Page redesign project. This program gets results hat can be validated with key stakeholders and end users after just 5 days.

At the beginning of the sprint we worked on a statement articulating what we wanted to achieve in the long term:

Vision Statement:
In 12–18 months our news homepages will be a relevant, intuitive personalized experience that honour the legacy of their brands.

We came back to this statement as we worked through the design activities, using it as a litmus test to remind us if we were on the right track.

Inspiration

Rapid Prototyping

The design team came up with two different designs: one based on the prototype we all chose to go forward with, and the other a re-skin of the HP we had at the time. We ran user tests on both desktop and mobile concepts with 5 people and learned what was working and not working with each design.

Iterating

These activities accelerated our work and thinking so we were able to enter into iteration and feedback cycles all fall and early winter. 

This is a copy of an article published on thestar.com in August 2020.

When the Star’s design and product team began the journey towards a refreshed website back in 2018, the goal was to meet the needs and expectations of digital-first readers and use reader-first design to showcase the Star’s bold, progressive journalism.

Today, thestar.com is designed with the reader in mind. From intuitive article recommendations to sleek navigation to our podcasts and newsletters, every element of the refresh ensures that readers get easy, barrier-free access to the best of the Star.

Kelly Payne, Torstar’s Director of UX and Design, sat down with Angus Frame, SVP of Digital Product, to talk about the strategy behind the new look, how the team’s work was fuelled by reader insights (including hundreds of reader interviews) and how the various design elements work to complement the Star’s journalism.

Angus Frame: What were you trying to achieve with the redesign of The Star’s home page?

Kelly Payne: We had very clear design goals in mind: elevate the site’s design to reflect our high-impact, enterprising journalism and eliminate distractions and barriers so readers can get their news more quickly, and easily discover the stories that matter most to them. Every big decision we made was based on feedback from subscribers and future subscribers. It was a very inclusive and collaborative process.

AF: What exactly has changed on thestar.com?

KP: Thestar.com has evolved rapidly in the past little while. We’ve transformed from the companion website to an advertising-funded print publication into a versatile, multi-platform news destination, supported by an ever-growing base of digital subscribers. And while we have been careful to respect our heritage as we evolved the design, thestar.com today is completely different from the site of only a few years ago.

We standardized fonts and eliminated needless visual clutter. We widened the desktop version of the site, which is more visually pleasing and allows editors to better package important stories. The site is fully responsive — it looks great on all devices, from mobile to tablet to desktop. We’ve also worked to make the site 30% faster, so that readers get the news they need now, without the wait.

We made it easy to find all of your favourite ways to experience the Star’s journalism, from podcasts to newsletters. Our “Recommended For You” tool suggests stories and gets better over time, so if you’re enjoying an article, there’s always more where that came from.

We established a rigorous culture of asking for and responding to feedback from customers — which includes our Star Advisor Group — and nothing is implemented on the site without first being validated by our readers, who are our priority.

AF: How did modern reading habits, especially the prevalence of reading news on your phone, factor into the new design?

KP: Many of our readers arrive directly on a story from their phone, and that’s why we redesigned those pages first, back in 2019. People have very different needs when they come to a news site: they might want to scan headlines, skim an article or spend some time doing a deep read. In the morning, the average reader may spend 20 minutes reading articles and then return later in the day for a quick headline scan. That same reader may come back again over the weekend when they have more time to read the site deeply.

Every element of the design took these preferences and habits into account, optimizing the site for a positive experience no matter what device you choose to read on and no matter how you get to us — through Facebook or Twitter, through newsletters, searching for an article or coming directly to thestar.com.

AF: How does the new design translate to a better experience for a Star reader?

KP: Readers expect that the news on thestar.com should always be fresh. One of the ways this feedback came to life on the site is the addition of time stamps and older content warnings. These tools clearly label when a story was published and flag when it’s older.

We’ve innovated more freedom and flexibility for editors to creatively package the biggest news of the day on the home page, whether it’s a breaking news event or a big, high-impact Star investigation. That means if they’re visiting us multiple times a day, readers will always find something new.

Readers have also come to depend on our trust labels — they appreciate being able to tell when an article is an opinion from a columnist and when it’s a news report. In this era of misinformation and information overload, design elements like trust labels are more important than ever.

In the Digital Product team at Torstar we use design and user insights to elevate and optimize the experience of reading news online in new and innovative ways. We use Design Thinking, a framework that helps accelerate creative processes and solve business problems to help us come up with innovative solutions for new products and to improve our existing ones. We recognize that great products are created only when we truly understand our customers.

Before:

In September 2018, a core team from three different departments came together to do a deep dive on the article-page experience. We set a vision, explored what success would look like and examined how our competitors addressed similar problems. Our research led us to interviewing experts from inside and outside the company (including a data scientist from MIT who has dedicated his research to understanding the online article page).

We sketched, debated, prototyped and interviewed customers to see if we could improve the experience of reading our online content while supporting our business goals of delivering great journalism, driving digital subscriptions and generating online advertising revenue.

After some intense brainstorming, the team combined their ideas into paper prototypes. Here we see some of the Sprint Team’s work taped to the wall. We used dots to vote in order to see what ideas were resonating.

An important part of a Design Sprint is validating the ideas with real customers. We invited Star readers to come in and tell us what they thought of the new ideas and designs. This led to some further iterations and us realizing that after getting the design details right, the interaction design details were equally important so we layered that work on too.

After:

Overall we utilized Star-specific brand elements including the Torstar font, and existing design patterns to establish visual tone unique to Torstar properties. We took visual cues from the print product to better align brand equity across all mediums. A stronger visual presence was created by improving readability and how we display media. We also improved the UI component scale to look more contemporary and refined but remain clean.

Additionally we have a new mobile first nav, AODA support including larger fonts, better contrast, optimal line lengths for reading on all devices on all orientations, in-brief overview for “scanners”, hidden captions to reduce scroll depth, support for Trust Labels.

With this redesign we have been able to enhance the overall reading experience. By redesigning our article pages we hope to entice users to stay on the site for much longer than had been before. The longer our readers stay with us, the more opportunity we have to learn about the kinds of content they want to see, and then give them more of that content.

Improved Business KPIs

Bounce Rate:
Time Spent:
Subscriptions:
Ad viewability:

When approaching redesign of thestar.com’s navigation in 2018, on top of wanting to change it to display content in a way that aligns to the Star Newsroom content pyramid, we wanted the new design to reflect our strategic direction. We also needed to confirm the changes made sense to our readers and that they would be able to find the content they were after. As a secondary objective, we wanted to create a more contemporary navigational experience that is more consistent with other industry-leading sites.

We knew we wanted a full horizontal navigation system for the desktop experience and that we wanted the hamburger gone. We also knew that since most of our traffic comes from mobile, we needed to optimize the mobile nav to better serve our readers.

The menu on first tap provided only a glimpse of all the content we have to offer. The rest of the categories could be discovered only by clicking See More (second tap) and then clicking All Sections (third tap) or as a last resort, by accessing the Site Map in the footer (we will come back to the significance of site map clicks later).

Additionally, there was a lot of unvalidated and legacy content that had to be weeded out. Plus the way the See More > All Sections functioned was an awkward and unexpected user experience.

We conducted usability tests that confirmed what we were worried about. One of the testers called the whole experience “clunky”. This became the first part of the experience to fix. When you are in the process of asking your audience to start to pay to access what they had been reading for free for 15+ years (which was where we were at when we were doing this testing) getting the information architecture simplified was a clear first step.

While we were validating current state with customers, we also created wireframes to validate future state with internal stakeholders.

Included here we have top level nav items that are based both on what is at the top of our content pyramid and statistics of user interaction on the Star’s most popular content. There is no Hamburger on the desktop view and we made sure that the Primary and Secondary navigation elements made sense to our users and aligned to our business objectives.

And now have this beauty:

Again, we have our user-verified top level nav items based on both top of pyramid content and usage statistics, no Hamburger on desktop

We have user-verified Mobile nav uses common expand/collapse pattern

It looks great, but what is even more exciting is how the new design has improved site performance.

The stats are showing increased activity in areas where we want to see increases, and significant decreases where we want to see decreases. The changes are working.

On mobile, sitemap usage has been reduced by a whopping 61% . Why this is particularly exciting is when we see that the reliance on the site map is diminished, it tells us that people are actually finding what they are looking for.

Continuing to iterate

We continue to monitor usage and optimize the experience as well as incorporate new strategic initiatives. With the addition of My Local content and with the newsroom’s growing podcast and newsletter repertoire we needed to layer in access to that content.