The website we have created represents what we were aiming for at the beginning of this course. After analysing the user personas, we felt like the original stuff website needed to be more simple to use for these personas. We wanted to make the website clear and well structured by categories. We wanted to have the website flow and get the user to where they want to be with minimal clicks. The ability to see the images and titles of each article on the first pages of the different categories + the home page makes it interactive and the reader can easily identify if that article is going to interest them. 
The way we have done the sub-categories in the separate category sections really narrows down and filters out the article that you may want to read. 
Visually we have stuck to a minimal colour palette of black, white, grey and yellow, we have also chosen a simple block font. We found this to work well as the images are such a dominant feature of the pages, we needed simple font and white space around the headings to balance those points. 
The 'animations' we have included in our website add the element of fun interactiveness which is popular on the web. It is subtle and not over the top which is important to note in a news website where primarily the articles and news stories are the most important feature of this site.
We believed that with the individual article pages it should have a dominant image as most can gather the overall jist of a story from this featured image. Breaking up an article with images in between was something we thought would help flow with the narrative of the story and keep the readers engaged with what they were reading about.
Including a sidebar with social media sharing, a comment form and a list of related articles, suggested stories etc. was important as they were requirements for multiple of our user personas.

feedback from week 6.

user journey ~ sarah blake. contributions page

 

This is an updated version of our previous menu (pictured above). We have taken away the 'follow stuff.co.nz' and have decided to add it into the footer of our website. I have added a colour so that when you hover over the category you can see what one you are selecting, this may be more helpful to those user personas who dont have the best sight and makes it an easier journey when navigating.

development~

After revisiting the user journeys, I discovered that the page for videos and podcasts wasn't as we had proposed for user persona Hemi. Previously our design looked like this:


When arriving at the videos and podcasts page it makes sense for the headline videos/podcasts or most popular or suggested etc. to be right there to view as you are welcomed to the page.

User Journey, Persona 2: Hemi Kamana

Hemi is interested in staying in touch with what is going on but doesnt want to sit round doing it, he is a multitasker and likes listening to things and watching videos whilst doing other stuff. He watches videos on demand on his laptop and also uses his phone to listen to music and podcasts whilst exercising.

This is a user journey for users that are similar to Hemi in which, listening and watching things is more engaging than reading articles. 

This user journey is also shown as if it was being used on a mobile phone.

The user is welcomed by the home page, which he is able to scroll down to see latest headlines. Hemi knows that he is only searching for news stories that can be listened to or watched. He doesnt want to scroll through the homepage searching for one that has that capability so he goes to the menu to see what he can find. 

He is welcomed with the category list, with 'video & podcasts' being one of them. He clicks on this and it redirects him to the page.

From there he can either scroll down and find ones he wants or if he is feeling more specifically like watching or listening to something he has that choice to have it narrowed down for him.

When being redirected to the podcast page he is greeted by the title of that news story and immediately the audio player too. This makes it simple and easy for Hemi as he can just click and listen and there is no mucking around having to scroll and find the audio he is after.

There is also the option for him to continue scrolling down and actually reading what the podcast is going to be about. He can choose to download and save the podcast to his device and leave a comment once he is done. The comment section also allows him to see other peoples opinions on this podcast and he can choose to give the comment a like or share it.

There are also more sharing options to social media available for him, and the live twitter feed.

User Journey Persona 5 : Andrea Pazmandi

Andrea likes to know whats going on and loves her sport. Her & her boyfriend constantly have their laptop hooked up to the tv so that they can read articles together. She is also a regular user of Facebook.

Here is a user journey designed for a user like Andrea. She is welcomed by the homepage and is invited to scroll down to the latest news headlines, she can scroll down and see gridded images, if one appeals to her she is able to hover over the image and get the news headline and the choice to 'read more' which would direct her to the article page.
If she decides that she doesn't want to read any of the headlines she has the ability to go to the category menu, there she is able to click on any of the categories she is interested in which will help narrow down her search for finding the articles she wants to see.
Once directed to that categories page, she can see the sub-categories within that, which narrows down her search even more. Clicking on the sub-categories will display the articles that are related to that topic. Same with the homepage, she can hover over the image and get an idea on what the article will be about.
Once she has found the article she wants to read it takes her to the article page, the article page is displayed in a simple way with the title shown first, when scrolling down the main image appears and following that is the news article.
There is a right hand column which has "share now" links, a comments section and a live twitter feed. For social media users like Andrea, this gives her the ability to see what others think of this article and gives her the opportunity to share it to her social media pages. 
There is also a menu for links to related articles, latest news headlines, editors picks, good reads, daily fix or oddstuff. This will allow Andrea to explore articles that are recommended, or similar to what she has viewed. 

User journey screen recording video : Haiyan Zhang

Personal statement “I like to find out about what’s going on in my city when I ride the bus to work. I used to buy a newspaper, but now I use my phone.”

Here is the screen rec for how Haiyan Zhang would navigate through the stuff.co.nz website on her phone. She is a grazer, so would take her time scrolling down the feed of news stories on the website. The ability to see the headlines on the homepage would be great for her as she doesnt have to click anywhere to access them and she can see the most important ones of the day that might appeal to her first. If she doesnt want to read any of them after scrolling down she can click the back to top box and it will take her to the top of the page. She has the option of going straight into the category menu and go into the category she is wanting to look at today. Within that main category on the page there are all the stories (relating to the category) on the page there too, just how the homepage is displayed. If she wants to narrow down her search even further she then needs to click on the next sub-category. Once she finds the article she wants she clicks on it and it comes up with the title and then the main image for the article. She can scroll through the article and read the information and then after the article has finished she has the choice to share this article to a social media page, or read through the tweets that are mentioned @NZstuff. There is also the list of visiting related articles, latest news headlines, editors picks, good reads, daily fix or oddstuff. This adds variety to her next steps when navigating through the website and may lead her onto other articles she might be interested in. There is also the comment box where she can leave a comment, like another persons comment and just see what everyone has thought about that article.

Wireframes of 3 user journeys

 

speculative sitemap

early concept rationale

Our concept is to take the Stuff interface, both mobile and web, and categorize it in a more sensible way to improve its functionality and user interface. Currently the website hosts many ads, distracting titles and an overwhelming amount of clickable titles and information, which distracts the user from the articles and important information. We plan to resolve the Stuff website through making the interface more user-centred by through providing the options for narrowing their search to their interests, their location, and their preferred language – transforming it into a personal news hub. Options will also be available for people to have a say and submit their own articles, making the user feel more involved and giving the people a voice. We will also have forums, options to customize the way information is presented to the user (podcast/video/article), and a more attractive and easy-to-understand design. We recognize that different users hold different interests, and will aim to cater to all demographics. We will ensure that the user needs are met through the use of easy navigation, multimedia handling, social media integration, sharing options, commenting, content contribution, related stories options, suggested stories options and signed in experiences.

UE and UX specifications

Sketch drafts of user journeys in wireframes

Some user journey drafts for what will be mocked up in psd & planning for more extensive, detailed user journeys

wireframe