SupChina new media platform – UX design

The challenge

Transitioning from old website to new

From both a branding and UX perspective it was highly important that the new SupChina website feel familiar in use and trustability. Because such drastic changes were made in the IA, user flow and UI we knew that we had to bring out the aspects of the branding, content treatment and labeling that highly resonated with the existing users, and create a clear user flow to make the transition enjoyable.

Information Architecture

The IA was a major challenge as the current website nor the internal staff had clear methodologies for hierarchy, labeling (including labeling, tagging, etc.) or content type treatment. Additionally there were many crossovers such as newsletter articles also being published in the regular news section.

Paid “Access” membership

Paid membership or a “porous wall” would be launched upon release of the new website. Many new features and user flows were created to realize this. This included an “Access-only” newsletter library, podcast previews, ability to remove ads and a customizable homepage. During the process of defining these a free, “light” version was also created.

Homepage

The homepage is the culmination of the user research. It served as the place to define all content-type treatments and features.

Wireframe

It was crucial to define the IA and features in the homepage wireframe. Important aspects include:

• Clear header navigation and hierarchy definition
• Differentiating treatment by content type
• Providing the category for all articles
• Showing article previews rather than subtitles
• Article and podcast read/listen time approximations
• Ability to star (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.

Landing screen

SupChina does not publish daily or on a certain set schedule, thus it was important to them that the landing is curated by the editors with a mix of recent and popular articles. Upon navigation, the articles move right/left across the screen, showing the preview of the article as it moves onto the left side. Additionally, it was a business requirement to feature the newsletter above the fold as it is the main revenue generator. This is shown as the user scrolls through the articles and naturally lands on the newsletter at the end of the stream or upon navigation.

Menus

User research showed that many readers were confused about the different types of articles and their labelings. At project start, it was unclear whether articles should be sorted by category (ie. Politics, Business, Culture, etc.) or by type. The old website had a single  hamburger-contained menu with no hierarchy. User research showed that because of irregular publishing schedule, it did not make sense to create main navigation by category, but instead enable the user to click on a category label if they desired to explore that category.

Perks of paid membership

The “Access” paid members are able to customize their homepage upon login with ability to:

• Add a section that is filtered by the categories of choice
• Add a section on homepage with starred articles that were saved in previous sessions
• Remove ads

Key pages

Of course each page within the sitemap was wireframed and designed, but the following pages are chosen to demonstrate the UX research impacts on the design.

Newsletter page

The newsletter page had many moving parts. It was important to understanding how the user and the SupChina staff interact with the newsletter. Paid newsletter subscribers receive the newsletter via email, but when clicking on an article (on the old) are taken to the general articles section of the website. General user arriving on the website directly, see know distinction between “Newsletter” and “articles” except through navigation. User research showed that both user types were confused of the difference. The new Newsletter page was built to be very distinct from the rest of the website and make clear navigational cues when the user moved from the newsletter to an article.

Access-only content is displayed to free users as a means to encourage paid membership subscriptions, but is clearly labeled and turns yellow upon mouseover rather than after a click to avoid an obnoxious user experience.

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 be available for the authors and editors to easily implement when curating their content. I spent much time in ethnographic research watching the authors create articles and watching frequent news readers read not only SupChina’s articles, but also those of many news outlets. Additionally, through the Google Analytics, I was able to determine that special treatment for content types such as quotes, pictures, and imbedded social media references was important for page time increase.

Suggested content at article detail bottom

User research showed that users are most likely to click on a suggested article based on related 1. topic 2. category 3. most recent but different user profiles varied significantly in this behavior. I chose to include all three but made them highly distinguishable.

Podcast detail page

The podcast detail page gives opportunity for each show to introduce itself and its hosts as well as present all of that podcast’s episodes. The user can choose to listen directly on the website or go to their podcast host of choice.

Creating clear hierarchy through UX and UI

The old website had no visual or UX distinctions between Columns, Features, Topics, and Categories. The UX research markedly showed that the majority of users didn’t understand a difference between these and more often than not, felt confusion when interacting with these distinctions.

I created “landing pages” for each categorization type with clear look & feel differences. Additionally, explanations of what a Column vs. a Feature were written, to provide a clear understanding. Each “Category” that every article is assigned, aka “Politics,” “Culture,” “Tech,” etc. was assigned a color in the design system, and each “Category landing” page corresponded with this color.

Event registration

The event detail page and event registration flow has many variables and required many 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 wireframe and design was approved by all stakeholders. The user flow pre-launch testing showed significant improvement.

Prototype testing

Initial prototype testing showed a significant improvement in user flow. Two prototype tests were conducted.

Familiar with SupChina users:

In this prototype test, I worked with users to set their own goals based on their past reading behaviors. Ie. “Find the most recent articles” or “Find a specific Newsletter article.” The user flow was tracked and the number of extra clicks to reach each goal was tallied.

New SupChina users:

People unfamiliar with the product were asked to complete specific tasks. (Tasks based on project goals, ie. “Sign up for paid membership,” Find an article related to Business and share it on Facebook”) The user flow was tracked and the number of extra clicks to reach each goal was tallied.

Conclusion

I learned a lot about building hierarchy based on user research rather than relying on assumptions by the client and myself. As one of the largest (in terms of page numbers) projects that I had completed, my awareness for consistency in user experience (cross-platform and cross-industry), became acutely aware and honed. I learned a lot about new media platforms that can applied both in future work in news platforms and also when dealing with a large amount of content, content types and complicated information architecture.

Unfortunately this platform was never published due to client’s internal management restructuring and resulting budget changes during development phase.

Read more about the research

SupChina new media platform- UX research