Overview
My Role
Duration
Product Designer (Individual Work)
September - December 2022
Tool
Cross-functional Team
Figma, Drupal, Jira, Google Analytics
3 Product Managers, 5 Developers, 1 Data Analyst, 1 Editor
Background
Foreign Affairs is considered one of the United States' most influential foreign policy magazines, with 2.9 million website visitors monthly and over 600,000 subscribers internationally.
Problem
Disconnection between contents created an incoherent reading experience
The current Foreign Affairs website contains a variety of contents and sections that are independently categorised for readers to explore, which indirectly affected readership engagement.
Solution
Designed a tag module that can be used across product pages to improve the website circulation
Process
Research
Heuristic evaluation: Diving into the contents
In order to understand the current website's structure, I started by conducting a heuristic evaluation of the product pages and the Information Architecture. Some content from one product page may have more related content available under another product page, but there is no distinct way for users to find out right away.
Whiteboard Research
Information Architecture Analysis
User Off-boarding Survey: Validate assumptions
I then looked into User Off-boarding Survey we have conducted, and found one critical question we asked in the survey: What could we improve to make subscribers consider subscribing again? Aside from 90% of subscribers wishing for a lower subscription fee, 14% of subscribers wish there was more diversity or balance in content.
Current SuperMenu
Key Findings
_________________________________
How might we make content more explorable for subscribers?
_________________________________
Design
Ideation & Prioritisation
I proposed 2 design solutions to stakeholders and gained 2 critical insights moving forward. Option 1 is to redesign the main Navigation bar to bring more content options across.
Option 1
Option 2 is to add a topic tag section to improve the circulation of the web pages so we are providing more related content to users upfront.
Option 2
Insight 01. Contents are constantly modified and created by editors as "Module"
As a news media website, editors from Foreign Affairs need to update content constantly to adapt to current affairs, thus module system is used so they can easily edit at any time. Below is an example of how adding topic components as a module on the website works in Drupal for editors.
Module System on Drupal
Insight 02. The goal is to increase the content open rate on product pages
Working closely with the data analyst, we found the Bounce rate for the Homepage is 45% and 72% for the Archive Page. Some of the key features only got 290 clicks throughout the whole year. Not all pages/functions are been actively viewed/used by visitors.
Google Analytics Data
I then mapped these 2 options to a prioritisation matrix, and after discussing with the team, we found Option 2 is a more suitable option for our current state based on previous insights.
Design Iteration
I came up with 3 designs after we decided to move on with option 2 - the tag design. Region pages are one of those not actively viewed product pages, plus from a developing perspective, teats can be implemented more efficiently under this product page. The tag design used the South Africa page as an example, while ideally the design can be implemented as a module anywhere across the site.
Though I was introduced to the "module" system during the stakeholder interview by editors, I don't know exactly how developers built it, so when I presented this design to developers, I got rejected immediately.
The iterations I provided later worked better as a module system that can be implemented anywhere on the site. Iteration B was selected as the final design.
UI Style Guide
Since Foreign Affairs doesn't have an established design system available, I created a UI style guide by taking references from existing components based on the current website.
Takeaway
Great thanks to my great mentors Grace Finlayson and Nora Revenaugh. I have grown and learnt so much from them in 3 months.
One critical listen I got from this whole internship experience is to have one on one meetings with all group members and stakeholders as early as possible. I wasted some time doing inapplicable designs before talking to developers thoroughly.
