Competitive Analysis

I compared the top three Traditional Chinese media in Hong Kong that is not financially tied or are influenced by the political pressures of the Chinese government.

CitizenNews acts as a platform that brings in-depth news reports, as well as allowing users to submit articles that are previously read and edited by experienced journalists. CitizenNews will also succeed in creating unique mini interactive websites that is data-driven with an investigative journalistic narration. A clear emphasis to distinguish news and opinions needed to be implemented to stay unbiased and on topic.

Feedbacks

In 2020, we have gained a sizeable amount of readership and donations greatly due to the 2019 protests in Hong Kong as more and more citizens of Hong Kong were paying attention to the news. This helped us gain resources, and as the protests slowed down, we had the time to do a full website revamp.

Typography

A few team members feel like there could be a more dynamic way to use typography. A way to use both sans serif and serif fonts in different times to bring a richer variety to present.

Colour

While the gradients help us stand out from our competition. Some feel it being too in the face and tacky.

Usability

The original website were buggy, positions of certain elements did not make sense. User retention were extremely low. Majority of users enter from social media posts and rarely land on homepage.

Categorisation

There needs to be a more intuitive way to recategorise articles and colour code accordingly.

Legibility

Our readers as well as team members are very diverse, ranging from 20s to 60s. There was constant debate on text sizes and title lengths.

2.0

The user journeys and wireframes were very straightforward. The website itself were structured based on an infinite scrolled homepage that showcases a masonry grid of articles that can be sorted and filtered. The menu accesses specific article categories, settings, and a donation page. This was not a full website revamp and act more as a reskinned version of the original website, with restyled spacing, typography, and interactive elements.

3.0

In the third iteration, there was a push to revamp the whole website. I have decided to go minimal, and to only put hierarchal emphasis where its needed.

Categorisation

Clear and distinguished categorisations of all the posts in the website.

Typography

A slightly more playful way to use typography without creating inconsistencies on the overall presentation. The use of Noto Sans and Noto Serif were chosen for the diversity on English and specifically Hong Kong Traditional Chinese.

Overall Aesthetics

The overall look of the website design was based on the traditional newspaper, but of course modernising it with responsiveness and digital legibilities.

The unfortunate events that had CitizenNews shut down have not let this design to fully implement. Even though the design was not implemented, it was a great honour and I have gained valuable experiences working with a team of passionate journalists at a socially and politically sensitive and aggressive time at a place I have grown up in. A lot of my works are now censored, but I believe what I did was right, and have kept backups of whatever I can to keep the truth alive.

Interviews

I decided to first approach the junior reporters and learn some of their processes. As they were the ones who needs to do their own graphics while also less familiar with the CitizenNews brand.

Time Constraints

They often have less than half an hour to work on the graphics, spending most of their days running around the city or writing articles. There needs to be a way for them to quickly create assets to both work within the CitizenNews website and social media posts.

Skillsets

Fortunately, most younger team members and fresh grads are tech savvy and have taken digital media classes to learn graphic tools as part of their journalist degrees. As long as the tools are not too complicated, they will be able to use with ease.

Asset Distribution

Surprisingly, most of the new employees of the company did not know where any of the brand assets were (which were in the company NAS). And did not know the original brand guide, which was a pdf, even existed at all. Adding to this, other team members will end up sharing images through WhatsApp ti each other. Resulting in layers and layers of optimisation, and loss of quality in shared images.

Brandguide website

I have created a brandguide website that team members can access anywhere as long as they have access to the internet. The website has rules for team members to follow, so we can stay on brand. As well as access to all the assets needed.

Pre-made Photoshop templates

A pre-styled photoshop template was created to save time for the team.

"Mememaker"

Due to the Adobe Suite limiting low active users, a developer have suggested to repurpose a "meme maker" to even save more time. Team members can access this remotely, add and position the logo and text, and be ready to post within minutes.

A lot of the team members didn't end up using the tools. Similar issues happened as we tried to get the team to use Slack rather than WhatsApp for a more effective internal communications. But, old habits kept people away from newer tools. And there was a lack of authority within the team to demand others to use these tools. I was in a senior position, but not a creative director, I did not have the authority to make these demands. In early 2019, I have moved to a part-time role to explore other opportunities, while still able to help out the team.