caitlinsweb

[caitlinsweb]

Mike Iterations

In the following, I have tried to separate the text and ensure there is an obvious sense of hierarchy in the text. The first one doesn't work and the slash isn't grammatically correct. I added the Dompost heading to the top of all the pages to act as a hyperlink which was a common piece of advice from user testing. 

[caitlinsweb]

Homepage Iterations

[caitlinsweb]

Hemi week 4/5

I have updated Hemi’s page significantly. 

First Iteration

One of the main parts of feedback for this interface was that it was too small for mobile version and that the images should go the whole length of the screen. 

Iteration Two

For this version, I increased the text size and added a grey rectangle under the photos to help separate them, this along with a greater gap should help. 

Final iteration

For my final iteration, I have moved the arrangement around so the videos are at the top and then articles and then keywords. This change was based on feedback in class. It makes sense to have an action at the top and then down the bottom a potential action, something you want to do. As the keyword option would act as a hyperlink taking you to a page of similar articles. 

I also got rid of all colours as I didn’t include colour in the other personaes. The border around Hemi looks like a button so I got rid of it and replaced it with a line, with works in well with the other lines used throughout my design. 

[caitlinsweb]

Andrea week 4/5

An idea I had for mobile phone was to have a photo slider. Here I have emulated this idea for Andrea,however, after testing this I quickly came to realise that the dots would be too small to click to the next picture and that for phone size, the slider option was rather impractical. 

Article Page Iterations

Here are my iterations for the sport section page

Final Sport section page

The changes I made include getting rid of the search and login button as its part of the menu page anyway. I increased the vertical space between the articles. I increased the size of the heading and subheading, making the heading bold to emphasise it and add a greater sense of hierarchy. I also increased the padding in the text boxes around the dates. 

[caitlinsweb]

Haiyan Week 4/5

I have since changed my main page layout from having an array of articles separated by date and changed it to have the different categories and the option to choose from there. 

First

Last Development 

Development of Article Page

Final Article Page

A few of the changes I made include getting rid of the log in and sign up option and instead including it in the menu page, this helps ensure the placement doesn’t look award, as it did before. I also got rid of the photo of the author as I didn’t feel it was pertinent and it felt awkward. 

[caitlinsweb]

Barry Iterations

 Here I have trialed another homepage option for the website.  

Iteration 1

Iteration 2

Iteration 3

Iteration 4

Final and finished homepage

Full article

Thank you comment

Politics page Iterations

Final Iteration

My final iteration features an enlarge text button for Barry who is vision impaired. My subheadings such as ‘National’ and ‘World’ run down the page rather than up the page, based on feedback that people don’t traditionally read upwards. The text on the side helps to frame the articles. The pictures have been enlarged and the options to log in and sign up are taken away. 

[caitlinsweb]

Hemi

I have been working on updating the mobile version as I've been struggling to resize everything and work out the layout for mobile in comparison to web. 

Below is the progression of Hemi’s layout

[caitlinsweb]

Haiyan Mobile Iteration

Changes to the Hamburger Menu, which now links off to a seperate page. 

Iteration 1

Iteration 2

Iteration 3

Changes to the Homepage Interface. 

National Page 1

National page 2

[caitlinsweb]

Andrea Layout

In paper prototyping stage Andreas layout became quite distinct from the others. 

I did this in an effort to test different stylistic approaches. I found that having squares impeded the layout in terms of typography. 

It makes it quite hard to follow along the words, especially with entertainment which doesn’t fit within the square and looks rather awkward. 

The structure on the grid page, however, works quite well. 

Having the layout based around time, enforcing the latch principle. This grid idea is a good idea, however, it needs to be improved. This improvement could be added with sections closing off each timeframe. 

[caitlinsweb]

Week 3 Changes

Here are the changes I made in 30 minutes during week 3s class interim. 

I only had enough time to change Sarahs and Mikes, in order to make it less obvious, where the story is, as it was the main headline on the main page. 

Sarah

Changed Sarahs from being on the main page to being under the National page, as usually the headline for ‘Wedding Scammers’ wouldn’t be found on the main page. 

XD File- https://xd.adobe.com/view/f4328605-8ee2-42b5-5bfd-9cd6aee75d39-8203/

Mike

I also changed Mikes story from being right on the front page and being the main headline as well. 

XD File- https://xd.adobe.com/view/fe1bdbac-c27c-44e4-6326-4efc9cd12235-882a/

[caitlinsweb]

User Testing Week 3 Feedback

Todays class was extremely helpful. I got to test all my user journeys with a lot of people that hadn’t yet viewed or tested my work. They gave me helpful feedback in which I will put to use. 

All of my user journeys worked, however, there were improvements needed to make them even more successful and interactive. Below is the feedback I received from my users. 

Round 1 

Barry- Very easy to navigate

Barry x2- Easy and worked well

Haiyan-Article title seems similar to another article, change article title for more distinction, this will ensure the user won’t get confused

Sarah- Wouldn’t of thought share buttons would be at the top right hand side. Need to have Dompost logo on the side to be a back button. 

Mike-Too obvious where to go as it’s right on the homepage, this wouldn’t normally be likely- need to make it a bit more evolved. 

Would’ve used the National section on hamburger menu to access article. 

Andrea- Could have fixed menu bar

Good layout- sorted by time is good but people might go from left to right instead of up to down when reading the headlines of the articles. 

What would happen if someone wanted an article past the timeline provided, would there be a button? How would they access it?

Round 2

Sarah-  Could have feature for regions under the National section. This helps narrow it down

-Good function of sharing article

Andrea- Need to work on grid for Sports page

Could have articles from today bigger and articles from yesterday and months ago/ years ago accessible through small circular buttons. 

Hemi- Too small for phone, needs to take up most of the space, with some negative space on the side 

Sarah x2- Latest story on homepage not obvious that its the latest story, as it kind of looks like the title of the page.

Make main story more obvious

Times on National need to go in order of most recent. 

[caitlinsweb]

User Journey Paper XD Part 2

Sarah Blake

XD File- https://xd.adobe.com/view/ab79a2c9-f333-4ca3-4218-6ff69ceebbf9-dd48/

Andrea

Option 1- 

Option 2-

XD File- https://xd.adobe.com/view/b8c431e2-591c-451d-654b-c0b155298ebb-cef5/

Mike

Option 1-

Option 2-

XD File- https://xd.adobe.com/view/bd7c3f8b-b3a2-42db-62ea-9c8162a446e3-cb4d/

[caitlinsweb]

User Journey Paper XD part 1

Below is my paper prototypes for the user journeys. This is the second step I took. My first step was creating them in paper, then I went on to do these, putting the paper into XD, then I went on to a more refined and clean XD version. 

Barry- 

https://xd.adobe.com/view/f4042a21-f41d-4f13-6887-6dc9a6a348a7-8235/ 

Option 1-

Option2-

Haiyan

Option 1-

Option2- 

XD File-https://xd.adobe.com/view/3a355945-5975-424d-46ba-ac723b75cebb-4c04/

Hemi 

XD File-https://xd.adobe.com/view/6060f130-66ea-4b48-5a27-4da9fe0b5da7-1651/

[caitlinsweb]

Haiyan User Journey

Option 1-

Option 2-

XD File-https://xd.adobe.com/view/e1caf3a1-7cbb-48e1-60d5-c2964aa1292e-97fb/

[caitlinsweb]

Hemi User Journey

Option 1-

XD File-https://xd.adobe.com/view/1386d5e6-bae0-4b55-5e2a-4f4dfba2ac2b-65b7/

[caitlinsweb]

Barry User Journey

Option1-

Option2-

XD File-https://xd.adobe.com/view/69cde64c-1f29-4b93-5537-068133830dfb-1ffc/

[caitlinsweb]

Sarah Blake User Journey

https://xd.adobe.com/view/f05a6b6f-9aef-4d1a-48e6-e0345b329462-866b/