Portfolio Information

  • Skills: Adobe After Effects, Adobe Illustrator, UX Design/Research

Solution: CNews

A phone application that displays different User Experience interactions and features through an animation.

Goal of the Project

The project asked that I create an animation that is capable of solving several UX design problems within an application.

What is CNews?

This app is made for an audience who likes to read the news and know about new trends and/or articles that the internet holds. Using the internet this app allows the user to read articles and see news by simply selecting the topics they would like to see in their feed.

After they select the topics they would like to see they can then see their home page feed, profile (where they can reselect topics), notifications of new articles in the topics, and their favourites list. They can also search for more topics and see suggestions based on the articles that the user likes. 

How does it work?

1st Feature
The first animation exemplifies the statement “I don’t want to make my screen a mess”. Through this animation the user is able to see the very first screen of the app that displays example articles, to let the user know a little about what the app is for. The articles also have an arrow indicating that the grey box can be clicked to see more, which when clicked on, the user will be able to see more examples of the articles.

2nd Feature
The second animation I created was the filter page. This page allows the users to filter the topics of the news, that they will see on their own personal app. “The action is done” is shown when the login button is pressed and when the page loads. This same statement also is shown, when the user selects the filters they would like to use, with checkmarks. 

3rd Feature
In this animation, the user is able to choose different icons at the bottom of the app (favourites, search, home, notifications, profile). The animation shows the user clicking onto the notifications page from the profile page. To show that the action is done, I decided to animate the tab chosen as growing in size and the opacity increasing. The user clicks onto the favourites tab which is a couple tabs to the left. To show the action is in progress, I animated a white box sliding over the other tabs and ending up on the favourites tab, which does the same action of increasing in size and opacity. 

Final: