Creating an engaging reading journey

Experimenting creative interfaces and unique layouts

Role
UI/UX Design
Interaction Design
Design System
Period
1 month
(Oct 2021 - Nov 2021)
Tools
Figma
Team
Frontend - Wanlin Lin
Backend - DaHung Liu
Product Manager - Trek Lee
UX Writer - Angela Chu

Background

Hiragana Times is a monthly magazine published in Japan that focuses on promoting Japanese culture. It was first published in 1986 and is written in both Japanese and English. Each issue of the magazine contains articles on a wide range of topics, including Japanese culture, society, business, politics, and current events.

Since launching the Hiragana Times app in 2019, it has become the leading Japanese learning platform. Our editors provide valuable articles that have helped us accumulate a large collection of Japanese learning materials. To allow readers to access our content on various devices and improve our SEO performance, we decided to create an article-reading website.

Objectives

1. Enhance the SEO performance of Hiragana Times.
2. Explore the market potential of an article-based business model rather than a magazine-based model.

Ideation

Building a new website from scratch, I decided to experiment with creative interfaces and unique layouts.

Design system

To create a well-designed and efficient website, it is important to establish a strong foundation. As part of this process, I defined the color scheme, typography, and grid system for the website. These design elements serve as the building blocks for the overall look and structure of the site, and will be used consistently throughout the design to create a cohesive and visually appealing experience for users.

Design result

Simple but unique layout

By featuring the latest article prominently in the hero section, users can easily access the latest content. In addition, by refining the layout and presentation of the article information, I aim to create a more polished and elegant experience for our users.

Engaging reading experience

As users scroll through the page, a red progress bar at the top indicates the amount of content remaining. I also designed the copy link, text display options, and audio button on the left side of the page.

For an engaging reading experience, I also designed an audio playback component at the bottom of the page when. These simple but effective design elements aim to help users have a more engaging and enjoyable experience.

Live website - try it out!

En
繁中