18. Crit Improvements

Web 1920 – 1@2x.png

I have been able to create a new design based on my concept and the feedback I received from my Crit. I did not like my final design as much due to the level of coding I had to do and my ability to do this. To resolve my problem, I decided to use Adobe Experience Design to add to my previous website. I have improved it a huge amount  in order to make it more appealing to the user, which I think my previous design did not do. I have also added more features such as videos, a weather and calendar widget to make it more personal for the user.

Access to my redesign: https://xd.adobe.com/view/12d2801a-0700-41aa-91c9-bad392edcdfe/ 

17. Crit & Final Design

Today in my Crit I explained to my class and tutor where I had collected the information from, explained my questionnaire results, influential designs I had found and analysis of other news pages,  initial designs and my outcome.

Screen Shot 2017-01-30 at 11.33.54.png
Presentation
Screen Shot 2017-01-30 at 11.31.26.png
Final Design

From my class, I received some feedback and suggestions which could help me develop my design further. It was suggested to me to think about the colours on the navigation bar as it was quite dark and the current location of the search bar as users may not notice it as much. Another suggestion was to think about the layout and how people view the webpage. I wanted to make the “In Other News” section smaller in order to add another section next to “Today’s Featured Article.” I also wanted to change the style of the “Welcome to Wikipedia” box as it did not look finished.

I wanted to improve my design further as I don’t think it works well as a Wikipedia newpage due to its layout.

 

 

16. Final Design

wiki redesign.jpg

In today lesson I was able to finish my final design, with the help of Oliver as I was finding the layout and CSS quite difficult due to the code. I increased the amount of photos within this design compared to Wikipedia’s to make it more appealing to the user. I kept the original colours of Wikipedia as I felt they worked well together. I feel the way Wikipedia uses the colours could have been improved hugely.

Link to my design: https://www.dropbox.com/s/wv71vkri728x8o0/Wikipedia_Redesign.html?dl=0

Responsive Web Design

Responsive Web Design (RWD) is used to allow desktop webpages to be viewed on other devices by responding to the size of a screen or web page the user is viewing it on, allowing you to see key elements of the website. RWD uses a grid format and flexible images by using ‘@media’ when placed into code.

This will help me hugely in my current project as it is important to add this element to a webpage in order to make it dynamic and easier for the user when using a webpage on different devices.

To understand this further, in class we learnt about how to use Responsive Web Design by using it ourselves. I wanted to see how a Wikipedia article would look on different devices. I was able to change the device the article was being viewed on by using the developer tools.

After viewing the article on a phone, I thought there might have been a number of differences between the iPhone 6 and Nexus 5x, however  the size of the text only changed. The were an obvious difference between then iPad Pro and the responsive view due to the screen size.

15. Designing (2)

Development:

Screen Shot 2017-01-30 at 11.26.10.png

I created this design by combining both of my initial designs as there were elements in both that I felt would look well together. I made sure to make “Today’s Featured Article” large so that was the first piece of information they would look at. However, I was not sure about the colour scheme as I felt it made the homepage quite dull, and I wanted to change where the logo and “Welcome to Wikipedia” was placed.

This design can be improved further, especially in its layout.

14. Designing (1)

Today I started to think about my initial ideas/ designs. I made sure that I incorporated elements of design that I found from my analysis of news pages and the responses I received from my questionnaires. I wanted to focus on the way news was displayed on the homepage in order to increase the amount of views it would get and I thought the News was a huge part of it.

Wikipedia Redesign.jpg

In my first design, I chose to enlarge the main featured article in order to make it the first thing the reader looks at. Whilst I was looking at Wikipedia’s homepage, I found that “Today’s Featured Article” did not stand out which I thought was a very important element for the users and it should be the first thing they look at. I created a side bar along the side of the screen, however from my questionnaire, I learnt that people do not use it. Also when looking back at this design, I felt some of the sections I added, such as “Today’s Featured Picture” was  unnecessary and did not need to be included in the design.  Also I thought this design was too similar to the redesigns I had looked at previously. This stopped me from developing this design further but helped me think about what I should include in my design.redesign-wikipedia-crit-008

The first design helped me through the creation of this one as it made me look further into into that sections I wanted to design. I changed the layout completely and used a grid to create this. I wanted there to be two sections towards the middle of the page so that it was the first section of news the user would read. I was not sure on the colour scheme, however I can develop that further later on in this process.

13. Questionnaire Feedback

I received feedback from my questionnaire (shown below)  from 13 people which will help me when designing my concept. From my questionnaire, here are is some of the information I found out:

  • 60.2%  people use Wikipedia for Educational Purposes.
  • 20 minutes is the longest amount of time people will use it for – this surprised me as I thought people would use the site for longer if they were using it for work.
  • 61.5% of people dislike the colour scheme.
  • Most people type their subject they want to look at in a search engine and the article appears.
  • 84.6% do not find Wikipedia’s homepage enjoyable to read.
  • 100% do not use the side bar – I think the sidebar is an important within a Wikipedia Page as it stores a lot of information but I feel there is too much on the current sidebar and it needs to be condensed.
  • 100% find the homepage legible and easy to understand.
  • Most people would like the homepage to be brighter in colour and more images.

Although I collected a very small amount of data, I will use what I have learnt from this questionnaire in my design in order to meet the users need.

untitled-1

12. Research (13)

I wanted to find out people thoughts and opinions about the homepage of Wikipedia, I decided to create a questionnaire which included questions about colour schemes and the way Wikipedia’s homepage works for looking at news.

The questions I asked were:

  • What do you use Wikipedia for?
  • How long do you use Wikipedia for?
  • Do you like Wikipedia’s colour scheme
    • If no, why? How can it be improved?
  • How do you visit a Wikipedia article?
  • How often do you visit Wikipedia’s homepage in a week?
  • Do you read the news on Wikipedia’s homepage?
  • Do you find the homepage enjoyable to read?
    • Why?
  • Is Wikipedia’s homepage legible and easy to understand?
    • If no, why?
  • If Wikipedia’s homepage could be improved in terms of how news is displayed, what would it be?
  • Would you prefer Wikipedia’s homepage to be made into a news platform in order to show more information about current events?
    • Why?
  • What other features would you like to see on the homepage?
  • Do you use the Wikipedia’s sidebar?
  • How well does Wikipedia meet your needs?
  • How appealing do you find the website?
  • Do you like the interface of Wikipedia?
  • Do you have any other comments about how Wikipedia can improve their homepage?

I will be able to put what I have learnt from this questionnaire into my designs, making it user friendly.

11. Research (12)

I further my research I wanted to analyse different news pages in order to see any differences or similarities in they way they layout information. This will help me when designing as I will able as to use similar elements in my own work in order to make the homepage into more of a news platform rather than a page that people do not look at. I decided to look at four popular news sites and compare them to see the differences and similarities within my work.

screen-shot-2017-01-23-at-21-17-22
Sky News
screen-shot-2017-01-23-at-21-14-23
BBC News
screen-shot-2017-01-23-at-21-13-10
The Independent
screen-shot-2017-01-23-at-21-12-11
The Times

Similarities:

  • From the four webpages, Sky News, BBC News and The Independent had a navigation bar located at the top of the screen to help users move to different pages.
  • All webpages had a main featured article, making it the first thing you look at when you visit the page.
  • They all include the  logo which is located around the top of the screen.
  • A search bar is included on all webpages apart from The Times.
  • BBC News and Sky News include a live section towards the top of the page.
  • They all include adverts.
  • A grid layout is used to divide different sections of news.
  • They all contain videos.

Differences:

  • Although they use a grid layout, the colour schemes are all different from one another.
  • The Independent and The Times uses more of the page whereas BBC News and Sky News use more padding on each side of the page, making it smaller
  • Each webpage, shows different sections in the navigation bar.
  • The Times does not have a navigation bar.
  • The typeface is very different between all the news pages.

10. Research (11)

Wikimedia’s Sister Projects

“Wikimedia sister projects are all the publicly available wikis operated by the Wikimedia Foundation, including Wikipedia.”

Screen Shot 2017-01-28 at 15.34.03.png
Current Sister Projects

Whilst looking at Wikimedia’s Sisters Projects, I came across Wikinews.

wikinews-logo-en
Wikinews

“The Wikinews project was launched in December 2004 with the mission to report the news on a wide variety of subjects. Contributors from around the world write news articles collaboratively. Reports range from original reporting and interviews to summaries of news from external sources. All reports are required to be written from a neutral point of view.”

Compared to other Wikimedia projects, Wikinews is licensed under Creative Commons Attribution 2.5 rather than Creative Commons Attribution-Share Alike 3.0.

Currently Wikinews has two aims: providing a free content alternative to commercial news sites and making sure that articles are checked and reviewed thoroughly to see if the information is correct.

Screen Shot 2017-01-28 at 15.57.56.png

This has led me to design concept which combines the Wikipedia Homepage and Wikipedia, in order to make it into a news platform rather than a page that visitors do not visit so often.

Furthermore, I was curious to find out how many views Wikipedia’s homepage gets compared to Wikinews. On Wikipedia I was able to find a Pageview Analysis which allows you to see a comparison on any webpage from Wikipedia. A was able to select the homepage and Wikinews in order to see the differences in views. I chose to see the data from the past year and see how often desktop users use it.

Screen Shot 2017-01-29 at 17.27.13.png
Home page VS Wikinews

I found out that Wikipedia’s Homepage is visited more with there being 148,389 views a year, compared to Wikinews being viewed less at only 26,010. This suggests people may not know about Wikinews due to where is it located on the homepage.

9. Research (8)

Wikimedia foundation is a non-profit organization that supports and operates Wikipedia and the other free knowledge projects. Furthermore, it gives out a mission which is to give and share knowledge with everyone in the world, for free but keeping 16 foundations “fast, secure, and available” for anyone who may need to find out different information.  A community of volunteers help support Wikipedia’s projects. “We make free knowledge accessible wherever you are — on your phone or laptop, on a boat in the South Pacific, or in the hills of Nepal. We help bring new knowledge online, lower barriers to access, and make it easier for everyone to share what they know.”

Screen Shot 2017-01-27 at 12.28.14.png

Alongside Wikipedia, the Wikimedia Foundation supports numerous free knowledge projects:

  • Wiktionary – a free dictionary
  • Wikiquote – a free collection of quotes
  • Wikibooks – a free collection of books
  • Wikisource – a free collection of primary source materials
  • Wikimedia Commons – a free media repository
  • Wikispecies – a science based wiki for documenting all the species of the world
  • Wikinews – a collaborative journalism site
  • Wikiversity – a free educational resource repository
  • Wikidata – a structured data repository used by all Wikimedia projects
  • Wikivoyage – a free travel information site
  • MediaWiki – the open source wiki software behind all our public websites

 

8. Research (7)

Whilst looking at other information about Wikipedia, I have started to look a different Wikipedia redesigns in order to see how designers would change the look of the online encyclopaedia. To find this information and designs, I used the reading list we were given which gave me a link to unsolicited redesigns on a Wikipedia Page.

https://en.wikipedia.org/wiki/Wikipedia:Unsolicited_redesigns

I was very interested in the redesigns, shown below as I found them very simple and easy to use. Comparing it to the current version of Wikipedia, I found the redesigns to have a huge improvement in look and design.

1910 redesign of Wikipedia:

http://blog.weare1910.com/post/75576312730/a-readable-wikipedia

“As always when constructing grids we like to start with the typography. We wanted to push the content to the center, use a readable text size, fix the measure at an appropriate length, increase the leading, make the images bigger, and provide a proper structure with adequate white space and an easy to follow hierarchy.

On desktop, we wanted to make room for the main text paragraph and an additional side-bar including images and tables to the right. We also wanted a design that could easily adapt from desktop, to tablet and mobile, without requiring additional apps or mobile versions of the site.”

I think this design has been designed very well as it is easy to understand due to the length of text used in each section. I also like how the design is spilt up into different sections.

Wikipedia Redefined:

http://wikipediaredefined.com

The concept of this design was to make the webpage look more organised.

This design uses a coloured bar to navigate through the pages. to find the information that you need. I like the use of a language drop down menu as it stops the page from looking untidy

Wikipedia concept:

https://dribbble.com/shots/1508672-Wikipedia-concept

dribble_shot
Article

Redesign and rethinking concept:

I think this design is very appealing to use user as it makes it very enjoyable to read and you are able to navigate though the pages easily.

http://wikipedia.gkvasnikov.com

Wireframes and prototypes were used to make it better for users, this was done by creating   a very simple way to search and navigate between different articles. This redesign was created to  more user-friendly with the use of  legible typography to improve the user experience. Easily readable font have been used to improve user experience, “by creating a universal experience for text, pictures, graphics, formulas, tables and more, thus focusing on the most important things.” The menu has been structured easily and the features are easy to use. Each articles is displayed as piece of paper, which you can easily organise, sort and navigate between them.

I  chose to analyse this design as its very different to any other designs I seen. I feel the home screen has too much information as it looks quite overwhelming especially the images section on the left. However, I like the use of grids as it devices the news into different sections.