week ten

final animations

The following is a slideshow of the final animations for my app.

card flips

This animation shows the transition between different content within one page.

changing filters

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.

open/close card

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/pause audio

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.

multiple choice

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.

pronounce practice

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.

splash

This is the first page that the users see when they open the app.