The following is a slideshow of the final animations for my app.
This animation shows the transition between different content within one page.
Filters are used to narrow down the search for certain content. Users can tap different filters to narrow the search and slide the filters tab to see more.
page to page
This animation shows how the cards react when a new page is being opened. The cards follow the same direction as the underline in the bottom navigation.
When the user has decided to open a card, the card expands to show more information. There are two ways to close the card, one would be using the back arrow at the top or use a slide down motion on the text area.
scrolling card list
To condense the page, the list is scrollable to have enough space for the image, titles and text.
open listen module
This animation shows how the open card reacts to opening an item from the list.
Playing/pausing the audio gives the user feedback through the album cover.
open bottom card
When the user wants to go back to the list of items, the card follows the opposite animation when it was closed in opening the item.
open watch module
When a content doesn’t have sections within it, it just has a title, text and a primary button to start the content. In this case, it is a video and it slides in from the bottom (landscape position).
fill in the blanks
Tests can be used while consuming the content. One of the tests can be a fill in the blank and the user will be prompted at different times during the video to fill in what was mentioned in the video.
Another test can be a multiple choice to reinforce what was mentioned in the content. This test can also be used multiple times, at random sentences, to quiz the user.
This test is used specifically for reading content. This is a test to get the user to start to pronounce once they know how to read. When they’re done reading out loud, the app will give some pointers on some words that were pronounced incorrectly.
This is the first page that the users see when they open the app.