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.

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.

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.

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.

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.

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.

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. 

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.

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.

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.

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.

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.

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.