The Fantastic Five

Saturday, 24 October 2015

Future Direction -- Digital Prototype Improvements

In this stage, the team is lack of resources and efficient time to fully accomplish the whole website as we still need more knowledge on constructing the database and front-end frameworks for more completed functions.

If the team has efficient time, efforts and skills on building the In The Know, we can fully implement the desired features, including a discussion board under the main article, a interactive tutorial section to help users to get to know the live comments, a more well organised article content with the author's name and a high quality image for each of the banners.

Imagine that the resources and database knowledge are allowed to accomplish this product, we would like to introduce the back-end database for storing all the live user comments to the server based on its precise paragraph/position of the article, updating the issues and articles in the daily base and allowing for a real rating system on each of the articles. Beside, we would like to set up a history issues section, so users can use the search bar to find the issue they want to read. By accomplishing all of these feature, we believe that In The Know can have a great success in innovating the journalism application and enhancing the way people read articles from different sources.

User Testing 2 -- Digital Prototype Demonstration

Main Page: contains the logo image and its enter button

Issue Wall Page: contains the top navigation bar and issues wall

This page contains the top 10 main issues happening in the daily base.

Each issue corresponds with a category logo, title and the issue image.

Specific Issue Page: contains the issue title page, title and its news organisations summary.

Each news organisation contains the voting buttons -- symbolised by the thumbs up and thumbs down.

Each News Organisations Summary Card

News Article Page: contains the title image, organisation's image logo, article title, article content, the live comments, toggle button of the live comments and input bar of the comment.

Live Comment Section: contains the input bar, toggle button and a submission button.

The live comment will be recorded to the database. All the users will see your live comments based on the paragraph they see.

Voting section inside each article: the vote will affect the ranking about the news organisation's ranking from the specific issue page.

The team conducted a digital prototype demonstration in the workshop on Friday. In the session, we also required our tutors and colleagues to join the user testing session.

During the testing we briefly explained the general idea of the In The Know, and introduced the basic interaction of the website prototype. In the testing section, we expected the users to complete the following instructions:

Enter the issue wall page
Read an article and make a comment
Vote the news organisation

We invited 7 participants to join the testing session, and we expected they can smoothly go through each of the steps. For each participants we recorded their responses when using In The Know, taking notes on their frustrations and confusions so we can have the direct feedback from our users.

In the user testing session, we received a lot of position feedback about the quality, design and content of the digital prototype. Our testers said that the issue wall page is an interesting design for displaying and arranging different news issues into single platform. Moreover, they satisfy with the functioning live comments that In The Know presented to the users.

Direct feedback from the participants:

Some participants can not see the button from the main page due to their screen resolutions.
All of our users could notice the live comments. Some users did not notice the input bar provided at the bottom, and they are not sure how to use the input bar and comment toggle button when they play with the live comments.
Some users expected the news organisation's name in the text form will be displayed on each of the article page.
Some of the users thought that each article should be presented with the writer's name.
Some of the users said the "like" and "dislike" buttons should not use the same colour.

Summarising all the users feedback, we obtained the following suggestions on improving the quality of the website and enhancing the design:

For the main page, make the "In The Know" image clickable so it can be an alternative way to start exploring the news
Introduce the live comment to users when you firstly entered the game -- design a tutorial for users
Added the name or news organisation and the author's name to the article or somewhere else -- make sure users can understand which news organisation is this
Change the colour of voting buttons -- make them different
Added a section for users to write and view in-deep comments -- set up a discussion board at the bottom of the page

According to the user's feedback, we found out these minor problems of the prototype and decide to improve the prototype based on the suggestions they gave on the testing session. However, due to the time limitation, we are not able to follow all the recommendations from our users, and the team decided to accepts the approachable changes -- the button colours and a clickable logo image.

Friday, 23 October 2015

Mockup 2 ---- Digital Prototype

This is the index.html page which contains a high quality video background, and a button to allow user to enter and explore the news. Users will be directed to this page when they enter the website.

This is the main issue page which contains the top 10 best issues from the globe. Each block contains the issue image, logo of the issue category and the title of that issue. For the navigation bar, the "In The Know" logo is placed on the left hand side for directing users back to the main page. On the right hand side there are the supportive linkage of our team blog, video and the login/sign up (which is not functioning).

We designed the timeline-view and the ranking view of articles. The time-line view is designed for sorting news articles based on its publishing time. The ranking view is designed for sorting news articles based on its ranking (the number of likes minus the number of dislikes). In order to switch between these pages, users can use the toggle button to change the view they wanted.

The article page contains the header image, a title with the news organisation logo, the article content, live comments and the input field of the comments. These comments will be appeared on the screen based on the time when users post their texts.