Interactive Article | UI Design
Redesigned The Original, an interactive article website under The Dong-A Ilbo. Increased the website's MAU by 130%.
Time
2 Months (May 2022 - June 2022)
2 Months (May 2022 - June 2022)
Team
Lead designer in a team of 4, including journalists and developers
Lead designer in a team of 4, including journalists and developers
Tools
Figma, Illustrator, Slack, Google Document
Figma, Illustrator, Slack, Google Document
Task
Branding, Research, Data Analytics, Responsive Web Design
Branding, Research, Data Analytics, Responsive Web Design
How can we increase the number of visitors?
Dong-A Ilbo saw potential in interactive articles as the future of journalism. However, The Original's visitors didn't increase due to a lack of proper navigation, content scope, and article categorization. To secure advertising revenue, the recreation aimed to expand the content scope and improve the website's navigation and categorization.
My role in recreating The Original for better usability
As a lead designer in a team of 4 collaborating with other departments, I recreated the website by reframing opportunities and reconstructing the website structure.
131% increased viewership as an outcome
After relaunching, my team increased the viewership by 31% in 2 months. We successfully create solid branding, categories, and curations for The Original.
Creating interfaces in 2 languages
I designed an adaptable UI in Korean and English to cater to diverse users, considering cultural differences and understanding various user expectations to create an inclusive experience.
Identifying Problems
98% bounce rate
Data analysis was conducted to examine why the website failed to establish regular readers. According to Google Analytics data, the website had difficulty retaining viewers, with 98% leaving after their initial landing. This result implied that the website needed more features to explore.
Main page before the redesign
Lack of categories and page navigation
I interviewed 10 readers of The Original to measure qualitative experiences about exploring the website. The interview includes questions like:
1.
How is their experience finding the specific article?
2.
If they don't know which article to read, how would they find one?
Interviewees felt the filters were confusing and experienced frustration with browsing articles, having to return to the main page repeatedly.
Knowing internal understandings for future usage
I conducted a focused-group interview with 6 possible contributors across teams and mainly examined the website's structure and content. This interview helped me understand the potential management from an admin's perspective. Key takes from the interview are:
The problem
1.
Many users leave the website due to poor navigation. How can we encourage users to explore more?
2.
Unorganized filters and categorization confuse users and interrupt content management. How can the website be more structured to inform people effectively?
Defining Solutions
Setting the project goal for various users
For readers:
•
Make filters comprehensible enough to assist readers.
•
Encourage readers to explore the website through appropriate navigation.
For content managers:
•
Group episodic articles and distinguish them from independent articles.
•
Revise filters to expand the future content scope to various topics, such as science.
Differentiating branding after competitive analysis
Competitors’ branding excelled in creativity and immersive experiences with article curation to aid navigation. In addition to adopting these features, my team decided to represent The Original as high-end journalism.
Competitors: The JoongAng, Hankyereo, New York Times
The Original had several unique award-winning episodic articles called Series. They are put together over 4 months by multidisciplinary teams, delivering on invisible social problems with website-based interactions. Since Series enhanced the website’s journalistic value, we decided to highlight Series in its section.
The proposals for the new website
We decided to make the website more explorable by reconstructing the sitemap and resetting the categories.
•
Use the main page to showcase selected articles for easier browsing and navigation.
•
Categorize articles into Series and independent articles.
•
Create a unified information page about each Series and its contributors.
•
Establish connections between pages with call-to-action buttons.
Easy navigation with intuitive categories
I struggled with categorizing rules: whether to divide articles by news desk or article type. I noticed a potential personal bias derived from my preference, so I made sure to discuss user research results with journalists and data analysts.
Our team concluded that there were not enough interactive articles for the news desk division yet. A focused-group interview also indicated an excessive categorization would create a distraction. We finalized the rule by setting Series/Independent article categories. Collecting opinions from users and potential contributors provided the insight I needed to understand the possible post-launch usability. It also deepened my empathy for the prospective users.
.png)
Low-Fidelity Prototypes
Design review once every two days with the team
I created low-fidelity prototypes on Figma and reviewed them with journalists every two days. I explored various layouts, especially the main curation, before continuing to higher fidelity iterations.
Visuals and High-Fidelity Prototypes
Visual language for connection and quality
The Original's visual language had to contain its unique identity and a connection to the parent website, Donga.com. I created a new style guide referring to the company's colors and font. Also, I implemented the parent website's footer and header.
High-fidelity prototypes with feedback
By incorporating feedback from Dong-A Ilbo's senior designer, I made the website more accessible and visually appealing by increasing the description text size and recoloring division lines.
Responsive design for mobile devices
I created a responsive design to ensure intuitiveness on all devices. This included larger article thumbnails for Series and horizontal layouts.
