Today was our small interim presentations, where we would go and present our wireframe prototypes, both on InVision and printed out, to either Tristam or Tim, and then in groups of four, we would do some user testing to make sure these websites were easy to navigate.
Early on in the class I got to see Tristam and present my work, I didn't really get too much feedback, although Tristam liked what I had done, and said that I was well on the right track. I had whipped up a full InVision prototype for my 6 user journeys, printed out all user journeys in wireframes, made a few photoshop mock-ups of how I want the pages to look, and then had also coded up a responsive web page, which was coming along quite nicely.
In the groups of four, I was with Xavier, Luke and Fraser, where we each went around and tested each other's user journeys via InVision. The feedback I got on mine was that it was all really easy to use, and they liked the 'date filter' which runs down the right hand side of the screen, which allows a simple filter of articles. They all managed to successfully complete each user journey without any real struggles. However, I will continue to go through and check to see if there are ways I can improve each user journey in relation to my personae.
Overall, I am really confident with where I am in this project at the moment, and think that I'm definitely on the right track. We don't have class on Friday due to it being Good Friday, so our next class isn't until next term. Until then I will look to continue developing my website and see how refined I can get it by next class.
Tuesday, 22 March 2016
Sunday, 20 March 2016
InVision Prototype
I spent today and yesterday working on creating some digital wireframes that I could then put into InVision, and test out the user journeys. These are the ones that I'm going to present at Tuesday's interim presentation.
I feel like I'm on track with this project, I've been working on the wireframes consistently, and have also been experimenting with code as well as you can see in my previous blog post. Overall I like how everything is coming along, and I'll wait until my feedback on Tuesday which I can then use to further develop my website.
The InVision Prototype of my wireframes can be found by clicking on the below link, I have only created hotspots for the necessary user journeys, which are also listed below.
InVision: https://invis.io/G26KPL0WA
User Journey One: Locate and article from a local paper, from 21st March 2016
User Jouney Two: Listen to a podcast from 17th March 2016
User Journey Three: View 3 of the most recent articles and then return to the homepage
User Journey Four: Locate an article from Lower Hutt and share it via Twitter
User Journey Five: Locate a rugby article and share it via Facebook
User Journey Six: Locate a business article from 18th March 2016, and download the article as a PDF
Below I have also attached some examples of my wireframes for a User Journey: The User Journey is for Persona 5, Andrea Pazmandi who loves to read about rugby and netball. She uses her laptop for keeping up to date with the news, and loves to use Facebook. Because of this, I have set her the task "Locate a rugby article and share it via Facebook".
I feel like I'm on track with this project, I've been working on the wireframes consistently, and have also been experimenting with code as well as you can see in my previous blog post. Overall I like how everything is coming along, and I'll wait until my feedback on Tuesday which I can then use to further develop my website.
The InVision Prototype of my wireframes can be found by clicking on the below link, I have only created hotspots for the necessary user journeys, which are also listed below.
InVision: https://invis.io/G26KPL0WA
User Journey One: Locate and article from a local paper, from 21st March 2016
User Jouney Two: Listen to a podcast from 17th March 2016
User Journey Three: View 3 of the most recent articles and then return to the homepage
User Journey Four: Locate an article from Lower Hutt and share it via Twitter
User Journey Five: Locate a rugby article and share it via Facebook
User Journey Six: Locate a business article from 18th March 2016, and download the article as a PDF
Below I have also attached some examples of my wireframes for a User Journey: The User Journey is for Persona 5, Andrea Pazmandi who loves to read about rugby and netball. She uses her laptop for keeping up to date with the news, and loves to use Facebook. Because of this, I have set her the task "Locate a rugby article and share it via Facebook".
Friday, 18 March 2016
Responsive Web Design Prototype
I've spent the last few days playing around with the code and altering it into my own, responsive website. I have really enjoyed doing this, and it's extremely interesting seeing how you can code up one website, and just by changing a few things on the different stylesheets, you can make them look similar but different in their own ways so easily.
As seen above, I have attached some screenshots of my prototype so far, which I will continue to work on and show at my interim presentation on Tuesday. I really like how it is coming along, and by Tuesday I am hoping to have a play around with adding in a footer at the bottom with the related stories etc, and getting that to fit into the current visual style. Some things that I've been making different in between the wide web display and the mobile display are things like the navigation bar changing, and I'm going to further work on the fonts changing size, so that they better fit the page.
I'm looking forward to seeing how I can develop this by Tuesday. Even if I change my concept or visual style completely, I feel like coding this up has been of great use anyway, helping me get a better grip on how to code, and I should be able to whip up a new website article page a lot quicker.
As seen above, I have attached some screenshots of my prototype so far, which I will continue to work on and show at my interim presentation on Tuesday. I really like how it is coming along, and by Tuesday I am hoping to have a play around with adding in a footer at the bottom with the related stories etc, and getting that to fit into the current visual style. Some things that I've been making different in between the wide web display and the mobile display are things like the navigation bar changing, and I'm going to further work on the fonts changing size, so that they better fit the page.
I'm looking forward to seeing how I can develop this by Tuesday. Even if I change my concept or visual style completely, I feel like coding this up has been of great use anyway, helping me get a better grip on how to code, and I should be able to whip up a new website article page a lot quicker.
Week Three Session Two
Over the past few days since our last class I have been looking at information architecture and developing my concept. I quite like the layout, although will continue to develop and refine it through user testing so that it can become far more effective. I had a play around with InVision, and it was good to get it on the screen and interact with it properly.
The class today consisted of another lecture from Tim, this time about JavaScript. I found it interesting to see how JavaScript can be used, as it was one of the trickier things to wrap my head around last year in the Kaitiakitanga brief.
For the remainder of the studio, I was playing around with the code and trying to develop the template to fit my concept. Below I have attached some photos showing my developments, the main titles at the top are just placeholders, as I'll focus on the labelling and branding later in the project, after the user journeys etc have all been developed.
The above snip is a development from my last one, where I was just working on creating a page for 'Team Wellington News' to practice some coding. I have been working on developing it for the smaller devices such as phones, and I will then progress it and work on it as a larger scale web version once this is further refined. We were told last lesson that it's generally easier and more efficient to do the mobile version first, and then the web one after that.
The attached image shows my developments during studio time today, where I continued to work on adding in sections and categorizing them, with the larger labels such as 'Sport'. I am going to colour code them so that each one is easily recognizable and easy to differentiate between sport, business, worldwide etc.
I really like how it's coming along, and I'm definitely getting more confident with my coding the more I play around with it. I feel like once I've refined this further, I'm going to put in one of the hamburger icons in place of the tabs at the top of the page, to reduce a bit of space.
I will continue to update my blog with iterations along the way. Next week we are having a interim presentation where we present some user journeys for each persona, and our progress so far.
I really like how it's coming along, and I'm definitely getting more confident with my coding the more I play around with it. I feel like once I've refined this further, I'm going to put in one of the hamburger icons in place of the tabs at the top of the page, to reduce a bit of space.
I will continue to update my blog with iterations along the way. Next week we are having a interim presentation where we present some user journeys for each persona, and our progress so far.
Tuesday, 15 March 2016
Week Three Session One
At the beginning of today's class, after the Daily Future's exercise, we had another quick workshop with Tim, on creating responsive websites, which can fit onto laptop screens, and mobile phones.
It was interesting to see how to code this, so that when the screen is reduced to a certain side, the layout changes so that it's more readable for the viewer, rather than having horizontal scroll bars to navigate the page.
Although we only need the web version or the moblie version, I'd quite like to code it so that it accommodates to both of them for my final hand-in.
By next class, we just need to continue working on the wireframing for the user journeys of each persona. I'd also like to have a go at whipping up some wire frames on Photoshop, and then chucking it into InVision, so that it's easier to test how a user navigates through the site. After this, I'll then look to develop my website in relation to the feedback I get given, so that I can continue to develop and progress the website over the course of the next few weeks.
It was interesting to see how to code this, so that when the screen is reduced to a certain side, the layout changes so that it's more readable for the viewer, rather than having horizontal scroll bars to navigate the page.
Although we only need the web version or the moblie version, I'd quite like to code it so that it accommodates to both of them for my final hand-in.
By next class, we just need to continue working on the wireframing for the user journeys of each persona. I'd also like to have a go at whipping up some wire frames on Photoshop, and then chucking it into InVision, so that it's easier to test how a user navigates through the site. After this, I'll then look to develop my website in relation to the feedback I get given, so that I can continue to develop and progress the website over the course of the next few weeks.
Sunday, 13 March 2016
Initial Digital Mock-Up
Following on from yesterday's research, I very quickly came up with an initial idea for how I want my website to look and work. It is very brief, and I'm sure it's going to undergo some heavy developments at each stage of user-testing, although I'm quite happy with it as a starting point.
Below I have attached the initial template I came up with.
Below I have attached the initial template I came up with.
For the lower snippet, I have included photos to show roughly what it would look like once content has been added in. My plan is to have some text on top of the images, maybe just the headline, however I could have it so the headline appears as you hover over the article. Much like the '4 News Wall' I had researched, I have included the date's tab down the ride hand side, where I am planning on using a similar hover effect, where the articles from that date stay in full colour, while the other images saturate and dull down in colour. Similar to the 'USA Today' I have included arrow features which will allow the user to navigate between tabs, such as 'Sport', 'Technology', 'Health' etc. These will be colour coded so you can see which category you will end up in if you click on it. As the mouse hovers over the arrow, I would like it to extend out and have the name of the category as well, so make it a bit clearer, which would save the user from then looking up at the top tabs to figure out where it'll lead them.
I quite like how this looks, and I feel like it will be an effective way to navigate throughout the site. However, I'm going to draw up some wire frames and paper prototypes so that I can get this system tested in our next class, and get valuable feedback on whether or not it actually works, and then how to develop them over the next few weeks.
I quite like how this looks, and I feel like it will be an effective way to navigate throughout the site. However, I'm going to draw up some wire frames and paper prototypes so that I can get this system tested in our next class, and get valuable feedback on whether or not it actually works, and then how to develop them over the next few weeks.
Further Research
Today I went through and did a bit more research, in order to solidify my approach to this website brief. I really want to make sure that the site is easy to navigate, just as much as I want it to look visually appealing. Ultimately, user navigation is the most crucial aspect, as it determines whether or not people will successfully be able to find what they're after, although visual systems and hierarchy can still be used in order to greatly assist with this process.
In terms of the 'USA TODAY' website, I quite like the layout and visuals of it. I like how the tabs are placed in order to filter down the searches, and I also like how there is the 'Right Now' section, which gives you the very latest news as it comes in. The tabs make it easier for the user to navigate through the site in order to find a desired article. Another aspect that I like is the use of the arrow keys on the left and right hand side of the page, which is another way of navigating between the tabs. Each new page is then colour coded as well, in order to make the page more unique, and make it easier to differentiate from the other pages.
In the above snippet, from 'Animation World Network', I really like the general layout, and how it is mainly image based as well. Images tend to be easier to remember and recognize rather than text, so if a user is returning to a site and looking to find the same article, I feel like using an image as a primary feature would be a key way of ensuring success in the user journey. The layout is nice as crisp as well, something I really like.
This approach, called 'News Wall' from Channel 4 News, is a way of condensing the articles into a GIF format. Each individual section is a GIF rather than an image, with the title of the article coming up one or two words at a time while the GIF continues on loop. One of my favourite features which I think will assist with the user journey and make it a lot easer, is the toolbar on the right hand side, which has the dates down it. Upon hover, the articles from that day stay in full colour, while all of the other articles are dulled out and strongly saturated. This allows the user to easily find which articles are from particular days without physically needing to click on the date tab, as the hover element allows for quicker navigation between tabs.
Saturday, 12 March 2016
On Friday we found out that we need to come up with the layout for the mobile version of our website as well as the laptop web version, so it prompted me to go and have a look at the existing Dominion Post one as an example. Even though I'm going to be doing the Open Brief, I thought that I should at least use the Dominion Post as a reference point, to see how easy it is to navigate.
Above, I have attached these two screenshots from my iPhone, which show the mobile version of their site. It is pretty basic, and relies heavily on the scroll feature that a phone provides. On the web version, for computers, the wider screen allows them to fit more content on, where as the narrow screen in this case means that the content needs to be placed into one long screen, then forcing the user to scroll.
The above screenshot appears when clicking on the button with three lines in the top left corner, it's the drop down/pull out menu. This is what allows the user to slightly filter their topics into certain categories. It's quite an easy way of filtering out the articles, although I feel like there would certainly be a more effective way of doing this, which I'll need to do some research on.
My primary focus will initially be on making the web pages easy to navigate for the user personae, although once I've got that nailed, I will then look at ways to enhance the visuals and aesthetics of the web pages. However, the visual changes can also be used as a way of helping with navigation by creating hierarchy, and making thinks appear clickable, headlines appear bigger, and all those sorts of things.
My primary focus will initially be on making the web pages easy to navigate for the user personae, although once I've got that nailed, I will then look at ways to enhance the visuals and aesthetics of the web pages. However, the visual changes can also be used as a way of helping with navigation by creating hierarchy, and making thinks appear clickable, headlines appear bigger, and all those sorts of things.
Friday, 11 March 2016
Week Two Lesson Two
This morning's class again began with the 'Daily futures' presentations. Following this, we then had Tristam speak to us more about some aspects of the brief, and clarify a few things for us.
After the small presentation we then headed back into the Studio and had some of our own time to crack into whatever we needed to do. For the remainder of class, I practiced coding up a prototype site, using the template Tim had given us via Stream. I'm quite happy with how it started coming along considering it was my first real experiment with the code, and creating a newspaper article.
Below I have included a couple of screenshots with how it is coming along, although it is still quite basic and rough as I get used to the code. There are a few aspects that I still need to adjust, such as aligning certain parts of the text, although I feel like I've made a good start.
I haven't fully decided what news source I'm going to use for my open-brief, so I just used Team Wellington as a placeholder while experimenting with coding. I'm thinking I'll look at doing a sports-related article for the page I'm coding, possibly even the whole website based on sports news.
After the small presentation we then headed back into the Studio and had some of our own time to crack into whatever we needed to do. For the remainder of class, I practiced coding up a prototype site, using the template Tim had given us via Stream. I'm quite happy with how it started coming along considering it was my first real experiment with the code, and creating a newspaper article.
Below I have included a couple of screenshots with how it is coming along, although it is still quite basic and rough as I get used to the code. There are a few aspects that I still need to adjust, such as aligning certain parts of the text, although I feel like I've made a good start.
The above snippet is the opening window, or as it can be called 'above the fold'. I tried to create some interesting with a large banner (which I created in Photoshop) and then having the title at the bottom of the page, insisting that the user scrolls downwards. I still need to center the 'Team Wellington News' text.
The above snip is the initial part of the article, where I have just put in a placeholder image, along with the text. It's pretty basic right now, although once I've experimented a bit more with the code, and become a bit more confident, I'll look to add social media icons, related story sections and all that sort of thing.
This snippet is the bottom part of the coded article so far. I experimented with making the pull out quote a slightly bigger font. I also added in one of the photos from the ASB Premiership Final into the article to see how it would look. I also need to adjust the image description below it, so that it aligns with image itself.
I haven't fully decided what news source I'm going to use for my open-brief, so I just used Team Wellington as a placeholder while experimenting with coding. I'm thinking I'll look at doing a sports-related article for the page I'm coding, possibly even the whole website based on sports news.
Tuesday, 8 March 2016
Week Two - Lesson One
In today's class we had an extremely helpful workshop with Tim, where he showed us the basics of crafting a functional website, and introduced us to the most common attributes and elements of code that we're likely to use during the coding of our website. We had done a bit of coding in a group during Kaitiakitanga last year, although it seems so long ago so it was very helpful to have a refresher!!
The instructions were very well explained and easy to follow along, and I was able to take notes on my laptop along the way so I could take step by step notes on creating a basic web page, so I will be able to go through the same process and craft my own.
Later in the class Tristam gave us a run-down on the requirements for the Open Brief, which I'm going to do. It sounds exciting and interesting, and I'm up for the challenge. It was good to get a more in-depth explanation of what is required, and basic parameters around what we are designing.
By next lesson, on Friday, I'm going to try and have a play around with some code and follow the notes I took during Tim's lecture/workshop. I feel like these notes are going to be super helpful when it comes to actually coding my site, and it's good to know that we will be participating in more HTML and CSS workshops in class so that we can fix any problems that we may come across. I'm really excited to see how this paper goes, and I'm looking forward to learning the basics of coding, journey mapping and dealing with user interfaces.
The instructions were very well explained and easy to follow along, and I was able to take notes on my laptop along the way so I could take step by step notes on creating a basic web page, so I will be able to go through the same process and craft my own.
Later in the class Tristam gave us a run-down on the requirements for the Open Brief, which I'm going to do. It sounds exciting and interesting, and I'm up for the challenge. It was good to get a more in-depth explanation of what is required, and basic parameters around what we are designing.
By next lesson, on Friday, I'm going to try and have a play around with some code and follow the notes I took during Tim's lecture/workshop. I feel like these notes are going to be super helpful when it comes to actually coding my site, and it's good to know that we will be participating in more HTML and CSS workshops in class so that we can fix any problems that we may come across. I'm really excited to see how this paper goes, and I'm looking forward to learning the basics of coding, journey mapping and dealing with user interfaces.
Monday, 7 March 2016
Paper Prototyping with User Personae
For independent study, we were required to create user tasks for each of the 6 user personae we were given during Friday's class. In my physical workbook, I've written a quick summary of each of the User Personae. From here, we were required to create the user journeys in order to test the user tasks we created.
All of the wireframed paper prototyping can be seen in my physical workbook, while the in-depth analysis of each are on this blog post.
The first user was Haiyan Zhang, a 55 year old female who lives with her husband in Petone. For her user task, since she lives out in the Hutt, and 'likes to find out what's going on in the city', I decided to do "locate the article about the Wild Food Challenge in Days Bay, Lower Hutt". The user journey for this would require three clicks if efficiently done. To clicks to filter down the search via the tabs near the top of the page, and one to click on the link to the article itself.
The user journey is quite basic, and very efficient to reach the article. However, the process could be made easier by reducing the number of clicks, and simply having a hover once the mouse cursor is placed above 'Local Papers' and could then give the user the selection rather than needing to load another whole page. Zhang only browses the web and doesn't stay online for long, so the quicker she finds the article the better. I also noted that Haiyan Zhang isn't loyal to any specific news sources, although would return if it was interesting, which would definitely prompt me to change the aesthetic approach to the website.
The second user was a 31 year old male, Hemi Kamana, who multitasks while interacting with the news. He listens to podcasts and music while working out, and then watches videos on demand on his laptop. The user task I set for him was to "comment on the article about IronMaori and IronMan NZ". The user journey can be completed in 3 or 4 clicks if done efficiently.
Based on the fact that Hemi multitasks while catching up with the news, I'd assume he would take a bit longer to navigate to the page, trying to juggle a few things at once, and not fully focused on the news source. The tabs are quite clearly labelled so Hemi would be able to locate the article quite easily. The 'comment' button on the article page isn't too obvious, although worst case scenario he'd scroll down the page and would quickly be greeted with the comments section. In order to improve the layout and approach to the web to specifically suit Hemi, I would look at making an audio feature which reads out the article, so that he can listen while working out, rather than reading the article. Any audio or video related approach would best suit Hemi Kamana.
Third was Mike Richards, a 48 year old news junkie, who constantly sits at work refreshing the home page waiting for the latest news to appear. For his user task, I assigned the task of "sharing the most recent news via Facebook". This can easily be done in 3 clicks, as the article can be immediately accessed via the automatically updated 'Latest News Headlines' segment on the homepage.
Out of each of my user tasks, this would most likely be the quickest and most efficient user journey. Mike would access the article directly from the homepage. Once the article page has loaded, there are a series of icons right next to the title, one which clearly represents Facebook, and once clicks, gives the option to share the article. However, there are only about 8 or so news headlines which appear in the 'latest news headlines' section, so if I were to make a change, I would add a tab up the top as well for 'Recent News' or 'Todays News' which would allow anyone to go onto a page and view every article from that one day. This would be handy since a new article on average appears each half hour, and would allow Mike Richards to access articles he missed before he arrived at work, and was wanting to catch up on.
My fourth user persona is a 27 year old female Sarah Blake, who is a freelance designer, and uses all of the primary social forms of social media, particularly Instagram and Twitter. She also believes that there isn't enough news coverage for everything going on in Wellington. Therefore, for her user task, I assigned her the task of "Sharing the an article about 'What's on in Wellington'".
For this user test, the user could easily click on a tab such as 'culture' in order to try and find what's going on, when they should click on "local papers". This would cause an extended delay in the journey. Once on the 'local papers' page however, it's all slightly more straight forward, as you'd then click on "The Wellingtonian" and then the article appears on the next page. Once on the article page, there is a clear Twitter icon near the heading as well, which would make it easy to share to one of her primary social media sources. In order to improve the user journey, I would add a drop down menu when hovering above the tabs, which would mean Sarah could easily see which tab "The Wellingtonian" falls under, rather than clicking on a certain tab and hoping for the best.
My fifth persona is Andrea Pazmandi, a 32 year old female who is extremely into sports, especially the All Blacks and New Zealand's other international sporting teams. I set her the task to "locate the article about New Zealand winning the 7's plate in Las Vegas". This task, much like the others, can be done in a couple of clicks.
However, where the user journey gets tricky, and would cause some confusion and hesitation with Andrea is where the Dominion Post's sporting tab doesn't have any options within to further filter down the search, such as choosing a specific sport etc. The user then needs to click on the 'Sport' tab right at the top, which is the general stuff.co.nz tab. This would cause some confusion and a bit of a delay in the process, as I can imagine she'd click the wrong sports tab and then find herself needing to backtrack. Therefore, to change this, I would add in some more filters into the 'sport' section of the Dominion, to easily narrow down and find specific articles relative to the user's interests. This could be done via more tabs, or simply adding a menu which drops down by hovering over the 'sport' tab on the home screen.
The final user persona is a 64 year old male, Barry Down, who has worked in politics for 42 years. The user task I assigned him was to "locate the article in 'commercial property' about the Council's $10m leaky building". If efficiently executed, this user journey can be completed in two clicks and a quick scroll down the list of articles.
He opts to print and read his articles rather than read them online. Therefore, if I were to make the site more relative to Barry, I could include a link to download a PDF of the article, or even print directly from the site. However, in terms of the site's current design, it's not too difficult to navigate and Barry should be able to easily find his way to the article. However, I would add an extra tab or drop down menu (upon hover) which shows 'Commercial Property' rather than only having it as a sub-heading further down the page. This would be in case Barry didn't end up scrolling down the page, it would help make sure that he didn't backtrack or miss the article.
This exercise on analysing the user journeys for each of the 6 user personae was quite interesting, and it has definitely got me thinking on various ways to accommodate each person's characteristics and traits into make the experience easier for them as an individual. However, website need to cater for wider audiences to attract more interest, although there is always the chance to add features which would also make it cater for the personae we are using for this task. I really enjoyed the wireframing task, and breaking each website and user journey down to it's roots, in order to see the bare basics of each site. Again, the physical wireframes of each user journey can be found in my physical workbook, while the analysis' have been written in this post on my online blog.
All of the wireframed paper prototyping can be seen in my physical workbook, while the in-depth analysis of each are on this blog post.
The first user was Haiyan Zhang, a 55 year old female who lives with her husband in Petone. For her user task, since she lives out in the Hutt, and 'likes to find out what's going on in the city', I decided to do "locate the article about the Wild Food Challenge in Days Bay, Lower Hutt". The user journey for this would require three clicks if efficiently done. To clicks to filter down the search via the tabs near the top of the page, and one to click on the link to the article itself.
The user journey is quite basic, and very efficient to reach the article. However, the process could be made easier by reducing the number of clicks, and simply having a hover once the mouse cursor is placed above 'Local Papers' and could then give the user the selection rather than needing to load another whole page. Zhang only browses the web and doesn't stay online for long, so the quicker she finds the article the better. I also noted that Haiyan Zhang isn't loyal to any specific news sources, although would return if it was interesting, which would definitely prompt me to change the aesthetic approach to the website.
The second user was a 31 year old male, Hemi Kamana, who multitasks while interacting with the news. He listens to podcasts and music while working out, and then watches videos on demand on his laptop. The user task I set for him was to "comment on the article about IronMaori and IronMan NZ". The user journey can be completed in 3 or 4 clicks if done efficiently.
Based on the fact that Hemi multitasks while catching up with the news, I'd assume he would take a bit longer to navigate to the page, trying to juggle a few things at once, and not fully focused on the news source. The tabs are quite clearly labelled so Hemi would be able to locate the article quite easily. The 'comment' button on the article page isn't too obvious, although worst case scenario he'd scroll down the page and would quickly be greeted with the comments section. In order to improve the layout and approach to the web to specifically suit Hemi, I would look at making an audio feature which reads out the article, so that he can listen while working out, rather than reading the article. Any audio or video related approach would best suit Hemi Kamana.
Third was Mike Richards, a 48 year old news junkie, who constantly sits at work refreshing the home page waiting for the latest news to appear. For his user task, I assigned the task of "sharing the most recent news via Facebook". This can easily be done in 3 clicks, as the article can be immediately accessed via the automatically updated 'Latest News Headlines' segment on the homepage.
Out of each of my user tasks, this would most likely be the quickest and most efficient user journey. Mike would access the article directly from the homepage. Once the article page has loaded, there are a series of icons right next to the title, one which clearly represents Facebook, and once clicks, gives the option to share the article. However, there are only about 8 or so news headlines which appear in the 'latest news headlines' section, so if I were to make a change, I would add a tab up the top as well for 'Recent News' or 'Todays News' which would allow anyone to go onto a page and view every article from that one day. This would be handy since a new article on average appears each half hour, and would allow Mike Richards to access articles he missed before he arrived at work, and was wanting to catch up on.
My fourth user persona is a 27 year old female Sarah Blake, who is a freelance designer, and uses all of the primary social forms of social media, particularly Instagram and Twitter. She also believes that there isn't enough news coverage for everything going on in Wellington. Therefore, for her user task, I assigned her the task of "Sharing the an article about 'What's on in Wellington'".
For this user test, the user could easily click on a tab such as 'culture' in order to try and find what's going on, when they should click on "local papers". This would cause an extended delay in the journey. Once on the 'local papers' page however, it's all slightly more straight forward, as you'd then click on "The Wellingtonian" and then the article appears on the next page. Once on the article page, there is a clear Twitter icon near the heading as well, which would make it easy to share to one of her primary social media sources. In order to improve the user journey, I would add a drop down menu when hovering above the tabs, which would mean Sarah could easily see which tab "The Wellingtonian" falls under, rather than clicking on a certain tab and hoping for the best.
My fifth persona is Andrea Pazmandi, a 32 year old female who is extremely into sports, especially the All Blacks and New Zealand's other international sporting teams. I set her the task to "locate the article about New Zealand winning the 7's plate in Las Vegas". This task, much like the others, can be done in a couple of clicks.
However, where the user journey gets tricky, and would cause some confusion and hesitation with Andrea is where the Dominion Post's sporting tab doesn't have any options within to further filter down the search, such as choosing a specific sport etc. The user then needs to click on the 'Sport' tab right at the top, which is the general stuff.co.nz tab. This would cause some confusion and a bit of a delay in the process, as I can imagine she'd click the wrong sports tab and then find herself needing to backtrack. Therefore, to change this, I would add in some more filters into the 'sport' section of the Dominion, to easily narrow down and find specific articles relative to the user's interests. This could be done via more tabs, or simply adding a menu which drops down by hovering over the 'sport' tab on the home screen.
The final user persona is a 64 year old male, Barry Down, who has worked in politics for 42 years. The user task I assigned him was to "locate the article in 'commercial property' about the Council's $10m leaky building". If efficiently executed, this user journey can be completed in two clicks and a quick scroll down the list of articles.
He opts to print and read his articles rather than read them online. Therefore, if I were to make the site more relative to Barry, I could include a link to download a PDF of the article, or even print directly from the site. However, in terms of the site's current design, it's not too difficult to navigate and Barry should be able to easily find his way to the article. However, I would add an extra tab or drop down menu (upon hover) which shows 'Commercial Property' rather than only having it as a sub-heading further down the page. This would be in case Barry didn't end up scrolling down the page, it would help make sure that he didn't backtrack or miss the article.
This exercise on analysing the user journeys for each of the 6 user personae was quite interesting, and it has definitely got me thinking on various ways to accommodate each person's characteristics and traits into make the experience easier for them as an individual. However, website need to cater for wider audiences to attract more interest, although there is always the chance to add features which would also make it cater for the personae we are using for this task. I really enjoyed the wireframing task, and breaking each website and user journey down to it's roots, in order to see the bare basics of each site. Again, the physical wireframes of each user journey can be found in my physical workbook, while the analysis' have been written in this post on my online blog.
Friday, 4 March 2016
For today's class, we started off with the 'Daily Futures' presentations from three groups. These were quite interesting to hear them analyse existing interfaces which deal with user experience etc. A couple of groups chose the new Facebook like and reaction system, which indicates that it's quite a hot topic right now.
After this, and a small presentation from Tim, we hopped into groups and began to wireframe and draw out paper prototypes for some of the articles we had analysed for independent study the past few days. Fraser and I chose to do it about the article on Manchester City winning the Capital One Cup, which was found on stuff.co.nz. Below I have attached photos from during our wireframing process.
While wireframing, we were trying to pick up small flaws that could be improved in the layout and interface, to make the experience easier and more enjoyable for the user. One thing we noticed, was that it took multiple clicks to access different pages as there weren't any hover/drop down menus, which made the process a lot slower, needing to reload a new page each click and hope what you're looking for was on that page. To tackle this, as shown in the attached video, we added a little drop down menu which would drop down while the user hovers over the tab.
Another strange part we saw was on the final article page. The 'Sports' page on stuff.co.nz had one main article showing, and then had other articles running down in two columns below hand, which a small description, title and image. However, on the 'Football' page which is accessed directly from the 'sport' page, the articles have been placed in more of a list approach, rather than columns, and they've got awkwardly and unnecessarily long line lengths for such a small amount of text. Therefore we changed the basic layout of that in order to reduce the time spent scrolling down the page looking for an article.
I found this paper prototyping quite fun, and it's a super effective way to see how users interact and navigate around the page, without putting too much time into coding a website and crafting the aesthetics. Rapid paper prototyping will come in handy throughout this, as it will allow me to whip up heaps of mock-ups before spending time to digitally create a prototype.
The video showing our changes to the stuff.co.nz website is attached directly below. We reduced the number of interactions required to reach the desired outcome, as well as making it a smoother journey for the user. Tristam trialed our changes and thought they were well thought out and effective changes, as he also trialed the initial paper prototypes we had done of the existing website.
Another strange part we saw was on the final article page. The 'Sports' page on stuff.co.nz had one main article showing, and then had other articles running down in two columns below hand, which a small description, title and image. However, on the 'Football' page which is accessed directly from the 'sport' page, the articles have been placed in more of a list approach, rather than columns, and they've got awkwardly and unnecessarily long line lengths for such a small amount of text. Therefore we changed the basic layout of that in order to reduce the time spent scrolling down the page looking for an article.
I found this paper prototyping quite fun, and it's a super effective way to see how users interact and navigate around the page, without putting too much time into coding a website and crafting the aesthetics. Rapid paper prototyping will come in handy throughout this, as it will allow me to whip up heaps of mock-ups before spending time to digitally create a prototype.
The video showing our changes to the stuff.co.nz website is attached directly below. We reduced the number of interactions required to reach the desired outcome, as well as making it a smoother journey for the user. Tristam trialed our changes and thought they were well thought out and effective changes, as he also trialed the initial paper prototypes we had done of the existing website.
I am still trying to decide which of the briefs to do, just like the majority of the class. Tristam did a quick survey today to see who would do the open brief and who would do the Dominion/Stuff redesign to gauge interest, before further clarifying the expectations and requirements of the briefs, as a few people were unsure as to what exactly fell under the 'open brief' category in terms of submission requirements and so on.
Wednesday, 2 March 2016
Independent Study - Article Analysis
For homework this week, we've been asked to analyse three articles from the Dominion Post, and also 3 online articles from stuff.co.nz.
It's very interesting seeing the difference between online and published news sources. Online sources have the ability to take the user to another article within the click of a button, and allows the user to search via their search bar as well. It's also super quick to navigate between stories, in comparison to flicking back and forth through pages. The online resources have an advantage because of this stage of the user journey, which allows a fast transition between stories and articles. Published news articles have a benefit in a sense that the user may become more engaged due to the materiality of the newspaper itself, and physically being in contact with the resource.
For my first article from Dominion Post, I chose an article names "Meet Grey's new Kiwi McHunky" (attached below). It wasn't so much the content of the article that drew me to it, it was more the scale of the images and story that caught my attention. The story took up the whole page, with the main image taking up about a quarter of the page, and being placed right in the middle of the page. The article was located in the TV Guide section, one of the few articles in that section of the paper. It was fitting to be in the TV Guide section as it was talking about a TV show, Grey's Anatomy.
Below I have attached my initial article, which is 'stuff"s web version of the article I analysed in Dominion Post. One of the things I like is how they have the top of the secondary photo appear slightly in the screen, as a subtle indicator to keep scrolling. The social media icons are a great tool which then allow users to share the article as well.
I'm looking forward to seeing how I can redesign either of these, depending on which one I choose. When recreating them, I'm going to focus strongly on creating an easy and clear user experience, so they aren't confused or lost at any point. The key aspect will be for simple navigation of the site and between articles. The online stuff articles aren't too aesthetically appealing, and although the navigation is quite basic I believe it could definitely be improved a great deal, by changing the location of things, as well as the general aesthetic of each page.
It's very interesting seeing the difference between online and published news sources. Online sources have the ability to take the user to another article within the click of a button, and allows the user to search via their search bar as well. It's also super quick to navigate between stories, in comparison to flicking back and forth through pages. The online resources have an advantage because of this stage of the user journey, which allows a fast transition between stories and articles. Published news articles have a benefit in a sense that the user may become more engaged due to the materiality of the newspaper itself, and physically being in contact with the resource.
For my first article from Dominion Post, I chose an article names "Meet Grey's new Kiwi McHunky" (attached below). It wasn't so much the content of the article that drew me to it, it was more the scale of the images and story that caught my attention. The story took up the whole page, with the main image taking up about a quarter of the page, and being placed right in the middle of the page. The article was located in the TV Guide section, one of the few articles in that section of the paper. It was fitting to be in the TV Guide section as it was talking about a TV show, Grey's Anatomy.
The second article I chose a sport article (attached below) which had a secondary article along with it. The secondary article seemed similar to a "Next Story" link on an online news site, which encourages the reader to read another similar story. The reason I chose this article was definitely because of the content, as football appeals to me a great deal. The layout of the page wasn't too appealing, as the heading was squeezed into a small box on the left hand side, as shown in the wireframe (in my physical workbook). The way that the columns are arranged is also quite random. This article was located within the sport section of the newspaper.
Below is my third choice of article from the Dominion Post. Although another sports article, the reason I chose it is because it consisted of slightly different editorial components such as the previous results column, with multiple lists within the columns. The layout of this article is what drew me to it, as the article itself takes up the whole page vertically, and about 4/5 of the page horizontally, so it's predominantly the scale that caught my attention.
In terms of online news sources, it's interesting to note the ability to transition quickly between links, and the speed of navigation via the online news sources. Options such as "more stories", "related articles" and "previously read" also allow the user to find more suitable stories for them, as well as backtrack and retrace their steps if they're trying to find an article they previously read and found interesting.
Below I have attached my initial article, which is 'stuff"s web version of the article I analysed in Dominion Post. One of the things I like is how they have the top of the secondary photo appear slightly in the screen, as a subtle indicator to keep scrolling. The social media icons are a great tool which then allow users to share the article as well.
Below is my second article, which is based on Manchester City winning the Capital One Cup. The good thing about having this article online, is the fact that you can include video footage and highlights, which will of course increase interest by giving the user a chance to view footage of the game rather than just see a still photo from the game. Further down are some photos as well as the article as well. Down the bottom is a comments section which allows readers to post comments for other users to see, and is also a tool of communication between 'stuff' users. I quite like how the banner up the top of the page changes colour based on the category in which the article falls under.
My third article choice has been posted below. Unlike the Dominion Post's published article, this one doesn't actually include previous results. However, through the search bar and 'related articles' sections I'm sure it'd be easy enough for the user to navigate through and find the results if they wanted to do so. However, there could be somewhere which directly links to the past results as in improvement, to minimize the amount of work the user has to do, and make their journey on the site a lot easier.
I'm looking forward to seeing how I can redesign either of these, depending on which one I choose. When recreating them, I'm going to focus strongly on creating an easy and clear user experience, so they aren't confused or lost at any point. The key aspect will be for simple navigation of the site and between articles. The online stuff articles aren't too aesthetically appealing, and although the navigation is quite basic I believe it could definitely be improved a great deal, by changing the location of things, as well as the general aesthetic of each page.
Tuesday, 1 March 2016
Introduction to Guide (Web)
Today we had our initial welcome and introduction in The Pit, where we were welcomed back for the start of our third year. The lecturers outlined the framework that we are working within. Once we went back up into our classes, we were introduced more to our respective briefs for each module, in this case we are doing "Design to Guide" which is the web-based module.
The module sounded pretty exciting, and I'm really looking forward to the process of designing and coding a website, and after doing some electives on user interface, I really enjoy altering designs in order to make them more user friendly, through rapid paper prototyping.
Initially we went in groups and had to discuss and draw wireframes for some articles in 'Dominion Post' newspapers. We had to look at why everything had been placed where it was, for what purpose, and the overall effect of each individual aspect. It was quite interesting analysing a newspaper in a similar way that we usually would with other pieces of design work.
For homework, we are required to make sure we have completed an analysis of three articles from the 'Dominion Post' newspaper, as well as three analysis' of the same articles from the website stuff.co.nz. I think it'll be very intriguing to compare how different the layouts and intentions are between printed and digital news sources. I would imagine the online one would be more structured, and from experience tend to try and encourage you to read more articles and click on other stories via multiple hyperlinks, where as a newspaper has more of a traditional method of just flicking through the pages and reading stories which tend to catch your eye.
I'll have this work done by Friday, our second studio session of the week. The wireframes and brief analysis of each article can be found inside of my physical workbook, which I will be using hand-in-hand with this online digital workbook. More in-depth analysis of each article, consisting of comparing and contrasting between print vs web, will be uploaded onto my digital workbook.
The module sounded pretty exciting, and I'm really looking forward to the process of designing and coding a website, and after doing some electives on user interface, I really enjoy altering designs in order to make them more user friendly, through rapid paper prototyping.
Initially we went in groups and had to discuss and draw wireframes for some articles in 'Dominion Post' newspapers. We had to look at why everything had been placed where it was, for what purpose, and the overall effect of each individual aspect. It was quite interesting analysing a newspaper in a similar way that we usually would with other pieces of design work.
For homework, we are required to make sure we have completed an analysis of three articles from the 'Dominion Post' newspaper, as well as three analysis' of the same articles from the website stuff.co.nz. I think it'll be very intriguing to compare how different the layouts and intentions are between printed and digital news sources. I would imagine the online one would be more structured, and from experience tend to try and encourage you to read more articles and click on other stories via multiple hyperlinks, where as a newspaper has more of a traditional method of just flicking through the pages and reading stories which tend to catch your eye.
I'll have this work done by Friday, our second studio session of the week. The wireframes and brief analysis of each article can be found inside of my physical workbook, which I will be using hand-in-hand with this online digital workbook. More in-depth analysis of each article, consisting of comparing and contrasting between print vs web, will be uploaded onto my digital workbook.
Subscribe to:
Comments (Atom)











