Within the video, Jack will show how the hypothetical user 'Ron Smith' uses the app.
These were the final category layouts:
Each category has its own assigned colour, to make identifying the categories within the app's interface much more straightforward. Since this is on screen, a bright colour palette worked well to instill some vibrance into the app, since some people view the news as boring. In this section, the user can go through each category and choose whether it is something they're interested in or not. If they tap on the tick, the category is saved, if they choose the cross, it is filtered out, and they will not have to see articles they don't want to.
Adding imagery in the background creates a sense of real life, and avoids the app looking too 2D. It brings the composition to life.
The user can revisit this at any time if they change their minds, however it is the first section they will see when downloading the app.
The next stage of the app is the homepage after choosing the categories. This shows the most up to date news catered to the individual. So here for example is a politics news article, which can be interacted with by flicking left or upwards. Flicking left moves onto the next article, flicking up (as shown on the right), brings up an article preview and the option to read the article now. The user can 'save to stack' to read later or 'appreciate' the article at any point in this section.
The toolbar at the top represents the different categories the user has selected, so for example here are Politics, fashion and sport. The different colours let the user know how many articles are left for each category on their homepage. They can quickly scroll through these by swiping too.
This is the full scroll image of an article within the app. The overall aesthetics and features were discussed prior to me putting this together, and Jack experimented with how articles would look. Taking his experiments, I would apply this composition to other pages within the app.
Firstly, the top of the page contains a burger bar to access navigation to other sections of the app, and a customise tool. The next section is the article title, within a 'card', which inclines the user that this section is interactive. The user can swipe left to preview the next article titles in their daily stack, and with a tap, the whole article will change to the chosen one. This feature allows users to see what they can read before having to leave an article page, creating a quick experience.
I prepared these files so Jack could animate them within the video:
The next section offers users the choice to share the article online to others who may be interested, and simply implements another social element.
The next section is media. Having all images and videos in one spot has a much more effective experience as users do not need to keep scrolling to view important media, its easily accessible in one space.
Further down is the 'Popular Response' section, containing that particular article's most popular response from the users. This can create inspiration for the user's own responses, or give them someone to follow on the app who may have similar interests. The user can make a response at any point by clicking the red chat bubble, which is movable, similar to Android's facebook chat bubbles:
This makes it accessible at any time during reading the article, and since it is movable it will not be in the way. The user can also access 'create a response' by using the icons at the bottom of the page. Users may forget about creating a response while reading the article, so by adding a prompt at the bottom of the page, this is an easy reminder.
These are the files I prepared for when the user writes a response using the red chat bubble. There's an option for text, video and audio at the top, however for the video we will just be demonstrating how text Responses look. When the response is complete the user can share it online onto their social media.
In the video it is demonstrated how to write a response. This is the example which will be included, in which the user "Ron Smith" writes his own response to this article. This shows the journey the user takes, from choosing their own news categories all the way to creating their first response. It also shows how easily the app is manipulated.
The profile page also conforms to the layout of the other elements. The profile page is customisable, users can move the 'cards' and reorganise their page. It's a place for their responses, appreciated posts, pinned responses and top categories. Users can build up their profile by following other members and interacting them and posting their own content. This is a highly interactive social element to our app.
Everything within the app has been colour coordinated by a palette I created for each category
This made it easier to remain consistent throughout. Having colour coordinated categories, this allows the user to identify them with ease, whilst maintaining a contemporary and vibrant aesthetic.
These files were then shared with Jack, for him to use whilst animating the video showcasing the app.
No comments:
Post a Comment