Background

SupChina (renamed The China Project) is an independent, fully digital, new media company dedicated to informing, entertaining, and educating a global audience about business, technology, politics, and culture in China. Their product line includes a porous website, subscription-based newsletter, events, and a network of podcasts. I worked to transform a template-based blog website into a porous new media platform.

Challenge

With a loyal following, the platform needed to create a familiar and trustworthy user experience despite significant changes in information architecture (IA), user flows, and user interface (UI). 

Audience

SupChina’s two primary user groups of university-aged students with a focus on China and senior professionals from various industries intersecting with China (think diplomats and fortune 500 executives) varied greatly in digital adoption, everyday life environment, and goals for visiting the platform. I conducted various user research studies to not only better understand this audience’s perception of SupChina as a brand and its current platform, but also to better understand how they interact with news platforms in general.

Media industry

The industry-standard for news platforms varies greatly from simple newspaper digital adaptations to 100% Internet-founded. I conducted an audit of various news platforms ranging from major international media outlets to smaller topic-specific websites to help us identify where SupChina fit within the greater media industry and to inform a UX that feels familiar and meets user expectations.

Content types

SupChina’s existing website didn’t have clear IA or defined content treatment for its wide-ranging content types and subject matter. Through stakeholder and user interviews, card sorting, tree testing, and wayfinding research we defined a clear content structure and IA.

Design considerations

The importance of placing emphasis on resonating brand elements and clear user flows was key to ensuring a seamless platform transition. We worked to maintain familiarity while maturing and expanding the brand’s reach.

Branding

In addition to the stakeholder and user interviews, I created a mixed-survey to better understand how users view the SupChina brand and its current platform. Anchoring in the users’ perspectives helped us to expand and mature the SupChina design system, maintaining familiarity and orientation as the platform transitioned.

Paid “Access” membership

Paid membership or a “porous wall” would be launched upon release of the new website. We worked to create a transparent division between free and paid content and implemented an article counter for visibility of the remaining free articles. 

New features

• Account creation & login
• Automatically generated article read time approximations and podcast length
• Bookmark/save
• Social share
• Podcast integration
• Newsletter sign-up
• Paid member homepage customization
• Paid member ad customization
• Unauthenticated user free article count

Homepage

We designed the main elements of the site with awareness to users’ reading behaviors. Simultaneously, we defined all content type treatments. 

• Mobile-friendly and in some cases mobile-first
• Clear header navigation and hierarchy definition
• Differentiating treatment by content type
• Category subject-matter categorization
• Showing article previews rather than subtitles
• Article read time approximations and podcast length shown next to title
• Article and podcast read/listen time approximations
• Ability to bookmark (save) articles
• Articles are shown as “read” after user has opened them- this is important since SupChina doesn’t publish regularly
• Introducing all content types on homepage
• Dates fully written as numerical dates were a cause of confusion for a worldwide/multilingual audience.

Article detail page

Arguably one of the most important page types for a media platform, the article detail page needed to ensure that every foreseeable content type is available for authors and editors to easily implement when curating their content. I spent time in ethnographic research watching the authors create articles and watching users read not only SupChina’s articles, but also those of other news outlets. Through the existing Google Analytics, I was able to determine which special treatment for content types such as quotes, pictures, and embedded social media references stimulated more user engagement.

Suggested content

We implemented suggested articles for a natural content discovery, with awareness of user behavior in favoring article suggestions based on similar topic, content type, and publication date. 

Podcast detail page

The podcast detail page introduces each show and its hosts and includes a complete library of episodes. The user can choose to listen directly on the website or go to their podcast platform of choice.

Technical considerations

It was a massive undertaking to migrate all of SupChina’s existing content onto its new content management system. We needed to ensure that all historical content was sorted appropriately within its newly defined content structure. 

• Various user permissions
• Editing/approval content management
• Newsletter integration
• Multi-level paid member permissions
• Podcast integration
• SEO

Event registration

The event detail page and event registration flow has many variables and required many technical and UX considerations.

• Events take place in different countries
• Some events are online
• Users are in different timezones
• Some events are exclusively for Access (paid) members
• Western and Chinese payment methods may be used

Outcome

The entire design and technical specifications were approved by all stakeholders. The user flow goal completion testing showed significant improvement. Unfortunately this platform was never published due to the client’s internal management restructuring and resulting budget changes during the development phase.

Deliverables/artifacts

• Discovery report
  • Stakeholder & user interviews
  • Card sorting
  • Tree testing
  • Survey
  • Goal completion user flow testing
  • Media audit
• Personas and user flows (use case definition)
• Design system creation
• Newsletter logo design
• Desktop and mobile wireframes and prototypes for 20 key pages
• Migration strategy
• Technical specifications
• Content management system