With interim presentation coming up on Tuesday, today's class was mainly spent developing our idea and concept, and fleshing out our idea, keeping in mind that we need to develop and progress this idea throughout a trans-media suite, not just on one poster.
I've started mocking up a few more concepts for Tuesday's interim, and I'm feeling confident with the ideas I've come up with so far. I'm looking forward to the Interim presentation on Tuesday, where I can get some feedback on my posters and see which ones to develop and keep working with.
We have been asking to come up with 2 posters, either for different conference concepts, or just different stylistic approaches, as well as to research some of our speakers work.
Friday, 6 May 2016
Tuesday, 3 May 2016
Week Two - Lesson One
During today's class, we had a small presentation/lecture on using Random Input and Movement in order to generate ideas quickly. I found this super helpful, and it was interesting to see how quickly you could come up with more abstract and intriguing concepts to show the same theme, ideas that I definitely wouldn't have come up with without trying the random input.
To do this, we grabbed a magazine that Lee provided us with, and we picked out a couple of words. From these words, we generated four concepts for each, relating to some form or aspect of Graphic Design.
We had some more 1 on 1 sessions with the lecturers to run over our homework, and show them the concepts we had generated over the weekend. I initially spoke with Lee about mine, and showed her my initial digital mock-ups. I also showed her my thumbnail concepts. She had some good feedback about the idea, and encouraged that I try to put some sort of funny 'pun' or 'in-joke' in the poster to increase interest. Lee really liked the thumbnail of a man washing and cleaning the type as if it was his car.
I later spoke to Donald, and he liked the idea of 'dissecting typography'. Upon looking at my thumbnails as well, he said that I could use a few of the ideas as part of a series, that could develop and progress throughout my poster, brochure, and other forms of media.
These thumbnails can be seen in my physical workbook.
By Friday's class, we have been asked to continue to research and decide on our speakers, conference name, and keep working on a tagline and brief description of the conference, to go on our poster.
To do this, we grabbed a magazine that Lee provided us with, and we picked out a couple of words. From these words, we generated four concepts for each, relating to some form or aspect of Graphic Design.
We had some more 1 on 1 sessions with the lecturers to run over our homework, and show them the concepts we had generated over the weekend. I initially spoke with Lee about mine, and showed her my initial digital mock-ups. I also showed her my thumbnail concepts. She had some good feedback about the idea, and encouraged that I try to put some sort of funny 'pun' or 'in-joke' in the poster to increase interest. Lee really liked the thumbnail of a man washing and cleaning the type as if it was his car.
I later spoke to Donald, and he liked the idea of 'dissecting typography'. Upon looking at my thumbnails as well, he said that I could use a few of the ideas as part of a series, that could develop and progress throughout my poster, brochure, and other forms of media.
These thumbnails can be seen in my physical workbook.
By Friday's class, we have been asked to continue to research and decide on our speakers, conference name, and keep working on a tagline and brief description of the conference, to go on our poster.
Sunday, 1 May 2016
Independent Study - Researching Speakers and Rapid Ideation
Over the past few days, I've been looking at some potential speakers for my design conference, and I've decided I'm going to do a typographic conference.
I've come up with a list of 8 speakers so far which I'd consider using, who I feel fit the theme quite nicely. I don't think I'll use any of these 8 as my keynote speaker, and I'm instead going to look at using a more famous and well-known designer as the keynote, in an attempt to draw more interest and attraction to the conference.
In terms of a famous typographer or graphic designer that would fit this conference, my initial thoughts string straight to Neville Brody and David Carson. They'd both be a good fit as they deal with typography, and craft it so carefully, although in a very different way to the modern typographer.
The 8 speakers I've looked at so far are:
Fay McApline (NZ)
Kris Sowersby (NZ)
Hannes von Dohren (Germany)
Dave Foster (Australia)
Charles A. Bigelow (US)
Vincent Connare (US)
Matthew Carter (England)
Stefan Sagmeister (Austria)
In my physical workbook, I've also sketched up 2 pages of thumbnails for a few different takes on the typographic conference. I've come up with about 32 different ideas at the moment, and also mocked up a few basic ones on Photoshop and InDesign to show at Tuesday's class.
On Tuesday I'll look to get some feedback on these concepts, and which ones I should continue to develop. I feel like I've got a few more decent thumbnail concepts that I will look to create digitally as well.
I've come up with a list of 8 speakers so far which I'd consider using, who I feel fit the theme quite nicely. I don't think I'll use any of these 8 as my keynote speaker, and I'm instead going to look at using a more famous and well-known designer as the keynote, in an attempt to draw more interest and attraction to the conference.
In terms of a famous typographer or graphic designer that would fit this conference, my initial thoughts string straight to Neville Brody and David Carson. They'd both be a good fit as they deal with typography, and craft it so carefully, although in a very different way to the modern typographer.
The 8 speakers I've looked at so far are:
Fay McApline (NZ)
Kris Sowersby (NZ)
Hannes von Dohren (Germany)
Dave Foster (Australia)
Charles A. Bigelow (US)
Vincent Connare (US)
Matthew Carter (England)
Stefan Sagmeister (Austria)
In my physical workbook, I've also sketched up 2 pages of thumbnails for a few different takes on the typographic conference. I've come up with about 32 different ideas at the moment, and also mocked up a few basic ones on Photoshop and InDesign to show at Tuesday's class.
On Tuesday I'll look to get some feedback on these concepts, and which ones I should continue to develop. I feel like I've got a few more decent thumbnail concepts that I will look to create digitally as well.
Friday, 29 April 2016
Week One - Lesson Two
During the lesson today, the teachers came around and had some small 1 on 1 conversations with each of us, in order to see what ideas we had come up with over the past few days, and trying to help us clarify and flesh out our ideas.
I had come up with three ideas which I was thinking of using:
1. How to measure success in design: Fame vs Satisfaction, Money vs Enjoyment etc.
2. Confusion around design degrees: Workload, what we exactly do, future jobs etc.
3. Crafting and Polishing of typography: The fine micro details of typography
Out of these three, since I really like typography, I was leaning towards the third one. A design conference about the perfectionists inside of us, and the polishing and crafting details that type requires.
For homework, we have a couple of tasks that needed completing. Firstly, we are required to continue to define our design conference, come up with a name, and try to come up with some sort of tagline/subheading for it, which works hand in hand with the title or imagery used. Along with this, we have been asked to research some potential speakers for out design conference, and then come up with some thumbnail poster concepts. Once we come up with a decent amount of thumbnails, we need to either draw or print in A3, three of these concepts to see how they work once digitally created.
I will come up with these for Tuesday's class, and they'll be in my physical workbook.
I had come up with three ideas which I was thinking of using:
1. How to measure success in design: Fame vs Satisfaction, Money vs Enjoyment etc.
2. Confusion around design degrees: Workload, what we exactly do, future jobs etc.
3. Crafting and Polishing of typography: The fine micro details of typography
Out of these three, since I really like typography, I was leaning towards the third one. A design conference about the perfectionists inside of us, and the polishing and crafting details that type requires.
For homework, we have a couple of tasks that needed completing. Firstly, we are required to continue to define our design conference, come up with a name, and try to come up with some sort of tagline/subheading for it, which works hand in hand with the title or imagery used. Along with this, we have been asked to research some potential speakers for out design conference, and then come up with some thumbnail poster concepts. Once we come up with a decent amount of thumbnails, we need to either draw or print in A3, three of these concepts to see how they work once digitally created.
I will come up with these for Tuesday's class, and they'll be in my physical workbook.
Tuesday, 26 April 2016
Introduction to Print
Today's class was an introduction to our new studio paper, this term I am doing 'Print'. The lecturers introduced themselves to us, and we got introduced to the brief as well.
I find the brief quite interesting and exciting, as we have a whole suite of things to produce. I'm looking forward to seeing how I can make them all look as part of one larger trans-media set, and how I can develop and refine my concept across the next 6 weeks.
Most of today's class was around brainstorming initial ideas around potential concepts to look at for our design conference. We had split into groups at first, and brainstormed some key words or ideas that relate to graphic design, and how we could use these. Once we had done the group work, we joined back up as a whole class, pinned them up on the wall and began discussing the key points of each.
I've drawn up our initial brainstorms in my physical workbook.
By Friday, we have been asked to narrow our ideas down to a couple of concepts that we think we would like to go with, so that we can then begin conceptualizing these and coming up with quick thumbnail sketches for part one of our suite, the poster. We've also been asked to begin searching for some visual precedents of some posters or trans-media suites that we find appealing or interesting, which we could go on to use as inspiration.
I find the brief quite interesting and exciting, as we have a whole suite of things to produce. I'm looking forward to seeing how I can make them all look as part of one larger trans-media set, and how I can develop and refine my concept across the next 6 weeks.
Most of today's class was around brainstorming initial ideas around potential concepts to look at for our design conference. We had split into groups at first, and brainstormed some key words or ideas that relate to graphic design, and how we could use these. Once we had done the group work, we joined back up as a whole class, pinned them up on the wall and began discussing the key points of each.
I've drawn up our initial brainstorms in my physical workbook.
By Friday, we have been asked to narrow our ideas down to a couple of concepts that we think we would like to go with, so that we can then begin conceptualizing these and coming up with quick thumbnail sketches for part one of our suite, the poster. We've also been asked to begin searching for some visual precedents of some posters or trans-media suites that we find appealing or interesting, which we could go on to use as inspiration.
Friday, 22 April 2016
Hand-In
Once arriving in class, we were instructed that the class was going to be solely studio time, where we had the chance to ask Tim and Tristam for any final feedback or last minute questions around submission criteria.
I spent this studio time sticking my final few print-outs into my physical workbook, as I had already finished my PDF presentation of User Journeys, and UI/UX Specifications. Towards the end of class, I downloaded my InVision files, zipped up all of my folders and submitted them on stream.
I spent this studio time sticking my final few print-outs into my physical workbook, as I had already finished my PDF presentation of User Journeys, and UI/UX Specifications. Towards the end of class, I downloaded my InVision files, zipped up all of my folders and submitted them on stream.
Thursday, 21 April 2016
Concept Rationale
NZNW, (New Zealand News Wall) is a condensed news wall which allows for efficient navigation of news, in a more entertaining, image-based way. It was inspired by 4News Wall, created by Channel 4 News. However, their site was compiled out of GIFs, which in my opinion got super annoying and distracting seeing so many moving images all at once.
The creation of this News Wall came down to the notion that people are more likely to remember, or identify things with pictures than they are with words. If someone was to try and remember the main picture used in the article, or what the heading said, the chances are they’re more likely to remember the image having registered it visually rather than skimming past it to the body content and not fully taking it in.
Within the site, there are category and sub-category filters, which allow these news walls to be filtered down somewhat, in order to improve the efficiency of the navigation. Along with this, I have added in some date filters, which run down the right hand side of the news walls. What this does, is it allows the users to filter their searches even further if they’re looking to find something specific, otherwise they’re free to continue scrolling down the pages. The dates are written down the page, so by scrolling further down, you are able to click on older dates from further back. In order to improve efficiency for a user trying to find an article from a couple of months, or even a few years ago, I have further included a ‘Change Dates’ tab, which allows the user to change the months and years that they view articles from, via a small pop-out menu.
Another strength of NZNW is the chance to set notifications to receive updates upon the release of new articles, and the ability to customize these to suit your own preferences, as the user gets to select exactly which categories they want to be notified about.
The New Zealand News Wall is an intriguing step away from the plain old website, while making sure to keep the same news website feel to it, through the use of some traditional and common aesthetics such as the category tabs at the top of the page, although getting more creative in the approaches to how the site is actually navigated.
The creation of this News Wall came down to the notion that people are more likely to remember, or identify things with pictures than they are with words. If someone was to try and remember the main picture used in the article, or what the heading said, the chances are they’re more likely to remember the image having registered it visually rather than skimming past it to the body content and not fully taking it in.
Within the site, there are category and sub-category filters, which allow these news walls to be filtered down somewhat, in order to improve the efficiency of the navigation. Along with this, I have added in some date filters, which run down the right hand side of the news walls. What this does, is it allows the users to filter their searches even further if they’re looking to find something specific, otherwise they’re free to continue scrolling down the pages. The dates are written down the page, so by scrolling further down, you are able to click on older dates from further back. In order to improve efficiency for a user trying to find an article from a couple of months, or even a few years ago, I have further included a ‘Change Dates’ tab, which allows the user to change the months and years that they view articles from, via a small pop-out menu.
Another strength of NZNW is the chance to set notifications to receive updates upon the release of new articles, and the ability to customize these to suit your own preferences, as the user gets to select exactly which categories they want to be notified about.
The New Zealand News Wall is an intriguing step away from the plain old website, while making sure to keep the same news website feel to it, through the use of some traditional and common aesthetics such as the category tabs at the top of the page, although getting more creative in the approaches to how the site is actually navigated.
Tuesday, 19 April 2016
Weel 6 Session One: Final Presentation
Today's class we had a chance to user test in small groups, as well a present in groups to Tristam. In the user testing, it was our final chance to see what worked, and what needed changing, so that we could go and make any last changes before Friday's hand-in.
For today's class, I had prepared my two InVision prototypes, one for mobile and one for desktop, my speculative sitemap, as well as my fully coded web pages. Below are the links to each of my InVision prototypes.
Mobile: https://invis.io/BM6ZR5CYV#/151592638_Home_Page
Desktop:https://invis.io/BX72B3IKQ#/150904397_Home-Page
In the user testing, my group had no problems with navigating their way through both my mobile and my desktop version. They were super impressed with the visual aesthetics of my website, as well as how it was easy to navigate, they said there weren't any stages where they were unsure on what to click next to get to the next part of their user journey.
The second part of class, my group went up for our presentations with Tristam. During this presentation, I got more good feedback on my website, and didn't come across any major changes that I needed to make by Friday. This meant that I was able to continue working along and begin whipping up the UI and UX specifications. It was good to get clarification on what exactly to do for the speculative sitemap, as my initial mock-up was 'too-detailed', as I had included more possible links than was required.
In a way I'm looking forward to handing this project in on Friday and moving on to the next assignment next week, in my Print module, although I'm going to miss this paper. At the beginning, I didn't really have many ideas as to how I was going to make my newspaper unique and stand out from the rest, although after working on it consistently, and ideating week in week out, I feel like I've come up with a strong concept. My concept's layout in terms of tabs at the top of the page, search bar top right etc are all very conventional, although it's more in the actual user's navigation of the site where my website stands out from an ordinary news site.
At the beginning I also found coding super confusing, and struggled to wrap my head around it. Surely enough, it helped by jumping straight in early on and having a play around with it, even during the wire framing stage I was experimenting with the coding of the article page. In the end, starting on the code so early on worked in my favour, as week in week out I was able to slowly craft my website and refine the detailing to get it exactly as I wanted it.
For today's class, I had prepared my two InVision prototypes, one for mobile and one for desktop, my speculative sitemap, as well as my fully coded web pages. Below are the links to each of my InVision prototypes.
Mobile: https://invis.io/BM6ZR5CYV#/151592638_Home_Page
Desktop:https://invis.io/BX72B3IKQ#/150904397_Home-Page
In the user testing, my group had no problems with navigating their way through both my mobile and my desktop version. They were super impressed with the visual aesthetics of my website, as well as how it was easy to navigate, they said there weren't any stages where they were unsure on what to click next to get to the next part of their user journey.
The second part of class, my group went up for our presentations with Tristam. During this presentation, I got more good feedback on my website, and didn't come across any major changes that I needed to make by Friday. This meant that I was able to continue working along and begin whipping up the UI and UX specifications. It was good to get clarification on what exactly to do for the speculative sitemap, as my initial mock-up was 'too-detailed', as I had included more possible links than was required.
In a way I'm looking forward to handing this project in on Friday and moving on to the next assignment next week, in my Print module, although I'm going to miss this paper. At the beginning, I didn't really have many ideas as to how I was going to make my newspaper unique and stand out from the rest, although after working on it consistently, and ideating week in week out, I feel like I've come up with a strong concept. My concept's layout in terms of tabs at the top of the page, search bar top right etc are all very conventional, although it's more in the actual user's navigation of the site where my website stands out from an ordinary news site.
At the beginning I also found coding super confusing, and struggled to wrap my head around it. Surely enough, it helped by jumping straight in early on and having a play around with it, even during the wire framing stage I was experimenting with the coding of the article page. In the end, starting on the code so early on worked in my favour, as week in week out I was able to slowly craft my website and refine the detailing to get it exactly as I wanted it.
Friday, 15 April 2016
Responsive Web Design
Below are some mock-ups of how my coded article page reacts when used on different sized browsers, such as desktop, mobile and tablet.
Coded Responsive Article Page
After class today, I continued working on my coded article page, and making it responsive. I'm super stoked with how this has come along, and how similar I've managed to get it to my Photoshop mock-ups. Below, I have attached some images of my responsive mock-ups with some annotations.
I have created a responsive page, so that it is suitable for all different sized devices, such as a desktop, mobile, and even tablet:
I have created a responsive page, so that it is suitable for all different sized devices, such as a desktop, mobile, and even tablet:
I've worked a lot on these different screens and tried to figure out how I can make theme suitable for each device. The desktop screen is obviously a lot larger, hence the larger font sizes and image sizes etc. I've also included the main navigation bar in there also. Once the browser width gets below 940 pixels, the search bar become a smaller search icon, the navigation bar turns into a hamburger menu, while the logo moves centrally and the tagline disappears, as it would become too small to read anyway. The secondary navigation bar (to navigate within the category) also shifts to two lines rather than one, for when the browser width gets smaller. The social media icons also get smaller.
The font sizes all reduce, while the photos get smaller as the browser shrinks. As it keeps reducing in size, into the mobile width, the photos continue to shrink so that the whole photo fits on the screen at once, while the 'related stories' photos move into two columns rather than one, otherwise they'd become too small to see and read the headline. The comments sections become longer as the browser becomes narrower, in order to fit in the whole comment.
I am extremely pleased with how this has turned out!! I'm going to Photoshop up a mock-up to see how they would look on desktop, iPad and iPhone display, so that it puts it into context.
On Tuesday we have our final presentation before hand-in, so over the next few day's I'll continue to steadily work on the InVision prototypes, and once they're done I'll move onto the UX and UI Specifications, as well as the Speculative sitemap and Rationale. I feel like if I continue to work at the rate I have been so far in this project, I'll be able to polish it up to a standard that I'll be proud of and hand in work that is to the very best of my ability.
The font sizes all reduce, while the photos get smaller as the browser shrinks. As it keeps reducing in size, into the mobile width, the photos continue to shrink so that the whole photo fits on the screen at once, while the 'related stories' photos move into two columns rather than one, otherwise they'd become too small to see and read the headline. The comments sections become longer as the browser becomes narrower, in order to fit in the whole comment.
I am extremely pleased with how this has turned out!! I'm going to Photoshop up a mock-up to see how they would look on desktop, iPad and iPhone display, so that it puts it into context.
On Tuesday we have our final presentation before hand-in, so over the next few day's I'll continue to steadily work on the InVision prototypes, and once they're done I'll move onto the UX and UI Specifications, as well as the Speculative sitemap and Rationale. I feel like if I continue to work at the rate I have been so far in this project, I'll be able to polish it up to a standard that I'll be proud of and hand in work that is to the very best of my ability.
Week Five Session Two
At the beginning of class we had a brief talk about user experience and user interface, and how we need to present these for our final submissions, to clear things up for anyone that was confused about exactly what was required.
After this, we had open studio time. I decided to work on doing the detailing for my coding of the article page, and getting it to perfectly match the aesthetic I have created on my InVision prototypes and Photoshop mock ups. Tim helped me with a few bits I was unsure about, although after he cleared those couple of things up I found myself understanding the code a lot better, and managed to do the rest of the site completely independently with ease.
That's one of the areas that this project has helped me grow in, learning how to code using HTML and CSS, as I now am aware of what each attribute and function will create or edit when typing it, rather than guess work.
I also spoke to Tristam about the ideas for the responsiveness between my desktop and mobile versions, and clarified all of this. After having a chat, I've realised I'm well on my way to having this finished and refined to a high standard by next Friday's submission. For Tuesday's presentation, I'm aiming to have my mobile and desktop prototypes completed on InVision, and I'll finish up my coding of a responsive article page tonight, so that will also be ready for Tuesday's final presentation before submission.
Once I've finished crafting it tonight I will post another blog post with attached images of my coded site. I'm super happy with how it's looking now and how far it's come during today's studio time and I'm excited to see the finished product tonight.
After this, we had open studio time. I decided to work on doing the detailing for my coding of the article page, and getting it to perfectly match the aesthetic I have created on my InVision prototypes and Photoshop mock ups. Tim helped me with a few bits I was unsure about, although after he cleared those couple of things up I found myself understanding the code a lot better, and managed to do the rest of the site completely independently with ease.
That's one of the areas that this project has helped me grow in, learning how to code using HTML and CSS, as I now am aware of what each attribute and function will create or edit when typing it, rather than guess work.
I also spoke to Tristam about the ideas for the responsiveness between my desktop and mobile versions, and clarified all of this. After having a chat, I've realised I'm well on my way to having this finished and refined to a high standard by next Friday's submission. For Tuesday's presentation, I'm aiming to have my mobile and desktop prototypes completed on InVision, and I'll finish up my coding of a responsive article page tonight, so that will also be ready for Tuesday's final presentation before submission.
Once I've finished crafting it tonight I will post another blog post with attached images of my coded site. I'm super happy with how it's looking now and how far it's come during today's studio time and I'm excited to see the finished product tonight.
Thursday, 14 April 2016
Working on the Desktop InVision Prototype
Today I kept working on creating my final InVision prototype for the desktop, and creating the final few screens in Photoshop. I'm really happy with how it's all coming together, and am excited to see how I can create a responsive piece with this prototype and my mobile prototype.
I have attached a few images of a couple of the InVision screens below, and will upload the link to view the InVision in a couple of days once it's all completed. The images should give a good enough idea of how it's coming along.
I have attached a few images of a couple of the InVision screens below, and will upload the link to view the InVision in a couple of days once it's all completed. The images should give a good enough idea of how it's coming along.
Tuesday, 12 April 2016
Week Five Session One
Today's class was pretty much completely studio based. At the beginning, we went over all of the submission requirements, which allowed everyone to be extremely clear on what needs to be handed in next week.
For the remainder of the class, I continued working on creating a polished InVision prototype, and created some more screens in Photoshop.
I decided that for my user journey for Mike Richards, since he always refreshes his laptop looking for new articles, I'm going to add in a feature which allows you to get notifications on your laptop every time a new article appears, and I'll include an option so you can further choose exactly what categories you want to get notifications for.
I feel like I'm on track for the deadline, and I'll continue to steadily work on this project over the next week so I can get it as refined as possible for the deadline. I'm really happy with how my project is coming along, and the photoshop screens are starting to look really good!
For the remainder of the class, I continued working on creating a polished InVision prototype, and created some more screens in Photoshop.
I decided that for my user journey for Mike Richards, since he always refreshes his laptop looking for new articles, I'm going to add in a feature which allows you to get notifications on your laptop every time a new article appears, and I'll include an option so you can further choose exactly what categories you want to get notifications for.
I feel like I'm on track for the deadline, and I'll continue to steadily work on this project over the next week so I can get it as refined as possible for the deadline. I'm really happy with how my project is coming along, and the photoshop screens are starting to look really good!
Monday, 11 April 2016
Daily Futures Presentation
Tomorrow is my turn for my Daily Future's presentation in front of the class. The website I have chosen to talk about is called "In Pieces", and it's a creative way of showing animals that are nearing extinction, in an aesthetically interesting way. They use a low poly illustration style for each of the animals, as can see below in the screenshots.
The website URL is: http://www.species-in-pieces.com/#
The website URL is: http://www.species-in-pieces.com/#
I really like the illustrative style of the website, it's very unique and definitely attention grabbing. It's really effective how the low poly shape style is used consistently. It's used effectively when the user clicks to look at the statistics for the particular animal, and the animal blows up into pieces and the pieces fly away before revealing stats in the centre of the page. I have included some screenshots at the bottom of this blog post.
I feel like they have gone for this more interactive and unique approach in order to get people talking about the site, and make it memorable. For me, as soon as I saw the site I was interested in what it's about, and continued to look through to find out more. Even if it's just getting the user to have a little play on the website, it's still a way of attracting attention.
Below I have also created a mini diagram showing the information architecture, and what each link on the page leads to. I have screenshotted each screen and drawn arrows going from the links.
Sunday, 10 April 2016
Coding in Brackets
Today I had another play around with the code, and I decided to try and make another article page, by changing all of the content and colour scheme to fit it. I have attached the outcome below.
By using the colour coding, it makes it easier for the user to visually identify which section of the website they are in. At least this way if they forget the name of the category, they are more likely to be able to remember the section based on the colour they saw when they visited it previously.
Below are screenshots of my coded sites so far, comparing the two different pages:
By using the colour coding, it makes it easier for the user to visually identify which section of the website they are in. At least this way if they forget the name of the category, they are more likely to be able to remember the section based on the colour they saw when they visited it previously.
Below are screenshots of my coded sites so far, comparing the two different pages:
Below are some screenshots of my coded site when the screen size is a lot smaller, which would ideally be for when the user is interacting with my site on a smaller device such as a phone or tablet:
Tuesday, 22 March 2016
Week Four Session One
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.
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.
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.
Subscribe to:
Posts (Atom)