Learn
Japanese
Pod
Website &
Mobile App
Design
This project is an assignment for "Screen Design" module (BPD05 LIMKOKWING).
Learning a new language via podcast seems promising, but does have flaws. Online application such as TuneIn and SoundCloud made podcast a practical way to pick up a new language through the means of understanding its culture, history, sociology and native's thinking, the best one being Learn Japanese Pod which provides few of the best contents on learning the Japanese's way to everything.
The redesign website and newly developed application starred bright, cheerful and simple layout. The positive, playful outlook of user interface aims to encourage users to visit the app often (instead of opening social media apps).
Efficient learning can only be achieved via good user experience. Several functionality such as "tab" and "transcript" features were added for people who has busy lifestyle and wish to learn (or revise) Japanese OTG easily. View animations to preview all features.
All graphics were done using Adobe Illustrator, animated in Adobe After Effect.
 LANDING PAGE -LEARN JAPANESE PODThe landing page of Learn Japanese Pod spots a full screen fluid layout displaying the mockup image of the tutor. The statistics at the bottom of the page serves as a testimonial to attract first time visitors to sign up for the podcast. Note that signing up is not compulsory for the original website. However, having users to log in enables more customisable features such as tailored tags and videos. |  MENU - LEARN JAPANESE POD.jpgFull page menu with dim background. Menu featuring the vast features of the website. |
|---|---|
 HOMEPAGE & DASHBOARD -LEARN JAPANESE POD.jpgThe original podcast page was remade to give a fresh look following the contrasty colour palette (navy blue & orange) to give a familiar look across all webpages. News, contests and updated contents will be shown at "above the fold". Live video and mini forum section are available via scrolling. Users are able to search contents via tags, inspired from google's "I'm Feeling Lucky" as randomness provides surprise. |  VIDEO PAGE - LEARN JAPANESE PODThis page stars the TED-talk alike live transcript for beginners ease of use. |
 FORUM SECTION -LEARN JAPANESE POD.jpgQuora inspired forum layout provides better viewing experience. Users are able to rate or flag comments, designed with "community for community" in mind. |  LOG IN PAGE - LEARN JAPANESE PODA mobile application was made for this project too. All interface visualised on Google Nexus (and it's UI). Sign in via Facebook / Google account for quick access to the application. |
 TUTORIAL - LEARN JAPANESE POD |  TUTORIAL 1 - LEARN JAPANESE PODView video for demonstration |
 TUTORIAL 2 - LEARN JAPANESE POD |  TUTORIAL 3 - LEARN JAPANESE PODView video for demonstration |
 HOMEPAGE - LEARN JAPANESE POD.jpg |  MENU - LEARN JAPANESE POD.jpg |
 COMMENT SECTION - LEARN JAPANESE PODA toggle which enables users to switch between comment and transcript section. Only one section will be shown at once to let users concentrate. |  TRANSCRIPT - LEARN JAPANESE POD.jpg |
 VIDEO PAGE - LEARN JAPANESE POD.jpg |  SIDE MENU - LEARN JAPANESE POD |
 TABS - LEARN JAPANESE PODInspired by Wikipedia App, this feature enable users to get back to their last viewed video by opening it in a new tab. Users can also switch in between tabs anytime to refresh their memory right after learning something new. |  FULL SCREEN VIDEO - LEARN JAPANESE POD.jpg |
Note: To view all animations in playlist, click the card on the upper left of the video.