Captures of our final website

screenshots of CSS code for everything.

screenshots of html code for Article template page.

User Journeys Video.

https://www.youtube.com/watch?v=ydk9s1w3BXA 

User Testing Report

To test this User Journey we have chosen our flatmate, Caleb, who is entirely unfamiliar with our work and web practices. We believe that this will ensure an authentic and fair user test. Caleb often visits Stuff and enjoys catching up on the news, he also prefers listening to podcasts or watching informative videos online over delving into reading material. We believe this makes Caleb an ideal candidate to test Hemi Kamana’s (Persona 02) journey.

Interactions made throughout the user journey

Caleb as Hemi began this user journey on the home page on his smartphone, we prompted him with our User Objective Statement. “I’m about to go for a bike ride along the bayside and would like to hear the latest Stuff podcasts while I ride.”

Caleb begins on the home screen and scrolls down the page with his finger, after reading the latest headlines he selects the burger menu. Whilst Caleb doesn’t go directly to the burger menu, this user journey still totally works and is expected as Caleb explores the website. From the burger menu, Caleb quickly identifies and selects the ‘Video & Podcasts’ option. Caleb scrolls down the new page, and after reading a few of the latest podcasts headlines, he quickly selects the one he is most interested in. Caleb sees the player functions at the top of his chosen article and presses the play button, from here he also turns up the volume. The audio player being right at the top of the page, right below the article headline, makes the playing of a podcast a simple and easy task for Caleb, minimalizing unnecessary interaction with the interface for those on-the-go, such as Hemi.  

Overall we believe this journey was a success, Caleb could interact easily with the mobile prototype and easily identified the navigation and its functions. During early user testing we refined the smartphone interface and its functionality. During our final user test Caleb easily reached the end outcome and did not have to look for long to reach the user goal. Whilst developing the final prototype we adjusted the video and podcast menu to feature highlight videos of the week at the top of the page, immediately directing users to the most popular content. When selecting a podcast article, we also changed the player functions to sit them at the top of the user’s screen, making it easily accessible for those who didn’t want to scroll down to to the bottom of the page to play the podcast.

The user testing critiques over the past six weeks have been modified over time to heighten the functionality for each user. Making the video and podcast selection easily accessible from the burger menu makes it a fast way for Hemi to get to his desired content. He can also quickly reach the latest videos and podcasts from his smartphone as they sit, top of the hierarchy, on his screen.  Making all the podcast player features directly below the heading also makes it easier for the user to directly reach his content. Hemi can change the volume, buffer through the timeline of the podcast, pause and download the content without having to scroll down the article first. The download feature also makes it convenient for Hemi if he has limited data on his smartphone and wants to continue listening outside of Wi-Fi or save it for a later time.

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.