White Chronicle is a wiki project built for a community of fans of a Japanese band. It introduces the artists, the works and the collaborations of the band to Chinese fans. It is powered by wikidot.com, a framework similar to but different from Mediawiki. Launched in 2015, it has expanded its user base to a community of 1500+.

As the design lead and the project manager, I hand coded fully responsive interface with Bootstrap enabled, shaped the information architecture, oversee content management, and created various tools catering to the needs of users and content writers. The band itself is very particular about booklet design and lyric styles, which is incorporated on the web pages as themes and reproduction of lyric layouts. Our readers love the styled lyric translations and would also love to copy & paste them as plain text, which is implemented with markups only visible in the plain text for easier reading. An editing tool quickly followed up for content writers to generate these style with ease. Based on communication with the users, a news archive was added to this wiki project, created solely with wikidot’s own modules and functioning just like a news feed.

Some features and tools I created:

  • Responsive infobox tailored to album information display
  • News archive with auto archiving and navigation
  • Affixed table of content with responsive view
  • Support of conversion between Simplified Chinese and Traditional Chinese
  • Formatted entry editing tool to achieve complex style and sturcture while minimizing writers’ effort on wiki syntax
  • Auto index of albums with cover image query
  • Auto track list on album pages
  • Lyric display reproducing booklet design and simple copy & paste
  • Lyric style tool to generate complicated styles
  • Easy setlist generation based on track numbers and albums
  • Easy footnote reference based on track numbers and albums
  • Share buttons for sharing current wiki entry to major social networks

You can see it live at: http://www.horizon-wiki.cn

  • Project type: Web design
  • Skills: HTML, CSS, Bootstrap, scripting, Photoshop
  • Project since: 2014