SupChina new media platform design

I worked to transform a template-based blog website into a porous new media platform.

These thoughts are mine alone, I do not speak on behalf of any organization.


UX designer/Project director, Art Director, Web designer, Technical director, Full stack developers (2), Content manager/QA tester


As Project director, UX researcher/designer, and point of contact to the client, I ensured brand continuity, conducted user research, translated user research into the wireframe, directed the design, and wrote the technical and interaction specs.


~ 1 year


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.


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). 



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.



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



Screenshot of the SupChina landing page and open profile panel. Featured articles on screen include: "The Chinese Internet is freaking out over a five-year-old's résumé" and "The Domestic Tech Plan That Sparked Backlash"

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

Three images of the SupChina article detail page. Title of article is " Trade War Day 132: Xi feted in Papua New Guinea, as U.S. panel warns of Chinese tech dominance"

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

Wireframe and design of suggested articles including "On topic" "opinion" and "most recent"

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

Three sections of the SupChina Podcast detail page where users can select from different shows and episodes. Featured: Sinica podcast network, TechBuzz China.

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

Screenshot of the SupChina Event registration checkout. Shows the "Select your tickets" screen with Access member and non-member tickets "in cart"

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


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.


  • 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

Other work

Sign as a representative cover image with text: "VA Department of Veteran Affairs Sign as a representative” with mockup of form question. Linked to case study.

VA (Veteran Affairs) Sign as a representative

Understanding Veterans’ mental model to increase application acceptance and reduce VA staff processing burden.


Short form cover image with text: VA Department of Veteran Affairs Health care application: short form with image of user flow. Linked to case study.

VA Health care application ‘short form’

Leveraging policy and user research to reduce the amount of time Veterans spend applying for health care.


ResearchOps for Open Enrollment (OE) cover image with text "Open Enrollment end-to-end research observation & synthesis direction." Image of sticky notes on a notetaking board. Linked to case study.

Research-ops during Open Enrollment (OE)

Creating a scalable ResearchOps strategy for a program of 100.