My Role
Product Designer (Individual Work)
September - December 2022
Cross-functional Team
Figma, Drupal, Jira, Google Analytics
3 Product Managers, 5 Developers, 1 Data Analyst, 1 Editor
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. ​​​​​​​
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. 
Designed a tag module that can be used across product pages to improve the website circulation
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?
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.
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.  

You may also like

Back to Top