[← 返回作品檔案](https://cheyuwu.com/zh/work/) 早期專案2017 # Taipei Metro Soundscape - Interactive Website ![Taipei Metro Soundscape - Interactive Website](https://firebasestorage.googleapis.com/v0/b/wucheyu-portfolio.appspot.com/o/images%2FTaipei%20Metro%20Soundscape%20Project%2Fcover.jpg?alt=media&token=aadd606a-2460-4f98-9db1-decd68fea3e5) 合作單位 Harvest Music Production / Department of Rapid Transit Systems, Taipei City Government 原始日期紀錄 01/2017 – 03/2017 類型 Graphic design / Web page development 參與工作 UI UX design / Frontend and backend web design 目錄與作品資料 合作單位 Harvest Music Production / Department of Rapid Transit Systems, Taipei City Government 原始日期紀錄 01/2017 – 03/2017 類型 Graphic design / Web page development 參與工作 UI UX design / Frontend and backend web design ## 專案紀錄 以下保留原有英文專案說明、製作過程與影像。 ## Background This project was in cooperation with Harvest Music Production. Together we ordinated the 2017 Metro Soundscape Contest, hoping to collect musical works from local musicians and providing sounds exclusively belonging to the metro stations. We collected natural sounds at popular sites such as Dongmen, Songshan Airport, Long shan Temple and recorded sutra chanting, vendors’ greeting, and many other sounds familiar to residents of Taipei. The Department of Rapid Transit Systems hoped to play these sounds at each station upon approaching of the car. My main responsibilities included planning and developing the image of the web page. ![Taipei Metro Soundscape - Interactive Website](https://firebasestorage.googleapis.com/v0/b/wucheyu-portfolio.appspot.com/o/images%2FTaipei%20Metro%20Soundscape%20Project%2Fimg%2Fw18cb5rbave.jpg?alt=media&token=315ed479-7943-4294-b002-cb0809fa3b80) **Problem Definition** ### ### Emphasizing the memory and the carrier sounds in our daily life The city government originally requested a simple website containing application information, but I proposed to do things differently when I learned more about their needs. It would be a shame to use the recordings as mere references. Those sounds were exactly what people tended to ignore in their lives. Wouldn’t it be better if we could play back the recordings and remind passengers of their association with the communities they lived in and guide them to explore those minute details in life? ![Taipei Metro Soundscape - Interactive Website](https://firebasestorage.googleapis.com/v0/b/wucheyu-portfolio.appspot.com/o/images%2FTaipei%20Metro%20Soundscape%20Project%2Fimg%2Fwgax5w9sn7p.jpg?alt=media&token=8f9774c4-a8ad-41d1-9b3e-9c5d77a364c6) ## Illustration - Feature Taipei Scenes To enhance user experience, I focused the web design on two things. One was to incite users’ curiosity about the environment and then prompt them to go on exploring the sound and landscape. The second point was to allow non-competitors to create their own music and thus engage them in the page content without their leaving the page immediately after realizing they were not part of the competition. ![Taipei Metro Soundscape - Interactive Website](https://firebasestorage.googleapis.com/v0/b/wucheyu-portfolio.appspot.com/o/images%2FTaipei%20Metro%20Soundscape%20Project%2Fimg%2F0fnwcuo4spba.jpg?alt=media&token=0f4d8a5a-3e64-4c1c-89ba-0bbb5563167c) ## Interaction Design For the first purpose, we went through those tourist attractions in Taiwan and added dynamic effects to the illustration, allowing users to interact with the scenes including religious lot drawing, chanting, airplane take-off, and traditional icecream scooters. These elements were to remind users of things they probably have overlooked. ![Taipei Metro Soundscape - Interactive Website](https://firebasestorage.googleapis.com/v0/b/wucheyu-portfolio.appspot.com/o/images%2FTaipei%20Metro%20Soundscape%20Project%2Fimg%2Fu74eixm6z3.jpg?alt=media&token=d0c9ed1e-52c3-4f88-a8c1-36125f8e024e) ## Interactive Sounds A real-time music panel was embedded to allow visitors without musical knowledge to create music by clicking the keyboard, adding accompaniment and ambient noise. This feature also allowed them to create something unique to their imagination and joy. ![Taipei Metro Soundscape - Interactive Website](https://firebasestorage.googleapis.com/v0/b/wucheyu-portfolio.appspot.com/o/images%2FTaipei%20Metro%20Soundscape%20Project%2Fimg%2Fnzjvwnuz9w.jpg?alt=media&token=4386c58e-08e0-4a47-b2b5-aa751a5971d1) ![Taipei Metro Soundscape - Interactive Website](https://firebasestorage.googleapis.com/v0/b/wucheyu-portfolio.appspot.com/o/images%2FTaipei%20Metro%20Soundscape%20Project%2Fimg%2Fbmoscaxbgos.jpg?alt=media&token=ecf96d3a-aa62-4121-a38d-c437340b53f5) ## Results 點擊後連接至外部媒體服務。 [在新分頁開啟 ↗](https://www.youtube.com/embed/9cmHD5wZT9I) The project lasted about one month, and it was pretty effective in terms of broadcasting and impression. I was glad to have seen comments on social media, like “It is nice to see a government website with modern design” and “I didn’t know there were such lovely sounds in our lives.” Within two days, the website had more than 10,000 views and later I added a slide show of five scenes, which enhanced the exploration of landscapes while lowering 10% of bounce rate. The competition received more than 200 musical works from around the world. With such a good result, more than 10 metro stations will have their specific sounds in 2018. ## 延伸閱讀與來源 - [原始專案連結 ↗](http://taipeisoundscape.com/en) 展出、研究與合作 [聯繫藝術家 ↗](https://cheyuwu.com/zh/contact?work=Taipei+Metro+Soundscape+-+Interactive+Website&from=/zh/project/-L3BAn3HOg8fE1jx5B79/) ## 沿著作品繼續閱讀 ![Selinko & Remy Martin APP UI Design](https://firebasestorage.googleapis.com/v0/b/wucheyu-portfolio.appspot.com/o/images%2FSelinko%20%26%20Remy%20Martin%20APP%20UI%20Design%2Fcover.jpg?alt=media&token=27f49fad-2c24-4b9a-94d7-89e0bd20eefc) 03/2015-05/2015 ### Selinko & Remy Martin APP UI Design [https://cheyuwu.com/zh/project/0](https://cheyuwu.com/zh/project/0) ![Unleash the Future - n3xtcon brand design](https://firebasestorage.googleapis.com/v0/b/wucheyu-portfolio.appspot.com/o/images%2FUnleash%20the%20Future%20-%20n3xtcon%20brand%20design%2Fcover.jpg?alt=media&token=fc69f24d-f81f-4959-a481-b5ef671433c4) 06/2017 – 12/2017 ### Unleash the Future - n3xtcon brand design [https://cheyuwu.com/zh/project/1](https://cheyuwu.com/zh/project/1) ![Chang Gung Memorial Hospital 3D Animation of Graphene-based Cancer Treatment](https://firebasestorage.googleapis.com/v0/b/wucheyu-portfolio.appspot.com/o/images%2FChang%20Gung%20Memorial%20Hospital%20Presentation%20of%20Graphene-based%20Cancer%20Treatment%2Fcover.jpg?alt=media&token=ee3c3269-c7bf-41d1-b200-9f268da34bd2) 08/2013 ### Chang Gung Memorial Hospital 3D Animation of Graphene-based Cancer Treatment [https://cheyuwu.com/zh/project/-L3BCgTFdd5Wbetc5KQO](https://cheyuwu.com/zh/project/-L3BCgTFdd5Wbetc5KQO) 1 / 0