-
Part 1: The Brief
For this assignment I had to redesign Wikipedia focusing on adding or changing elements to enhance the Wikipedia website; the redesign was to be more than an asthetic redesign.
Part 2: Research
The research began in class when I was parterned with Patrick. We spent some time looking into the current wiki page designs and what we though could have been executed better, we used this time to question the validity of some page functions like the effectiveness of sidebars.
Following on from the work in class, I used the reading list to look into Redesign some more. There was a source with rich information that came in abundant from the government website: Design Principles of Government Digital Services. There were quite a few pieces within the website given, I found it a little difficult to understand some of the information given through these sites due to the copious amounts of texts within several links the government site linked me to.
In my design research out of the sites visited, Pitchfork’s Music review page design layout is one I favoured for displaying the bulk of text from their reviews. They decided to use a Serif typeface which, I believe is better for reading longer amounts of text. Another thing that I found they to do different to than the current wiki page is add a prominent underline to links added in the page. Whilst it works for their reviews, Wikipedia does include many links within their text on the wiki pages. Adding this kind of feature to the current design may make the text frustrating to read, which might explain why they go for their current design of adding a light blue.
A second thing I noticed within the Pitchfork website is they have two elements that are divided by the review being in the middle of the page. When looking at the effectiveness of these elements grabbing attention I would love to use eye tracking technology to gauge where the users look whilst on the page.
Through further exploration into other redesigns I looked into Wikipedia’s Unsolicited redesigns page. This site gave insight into what Wikipedia looks for with redesigns of their site, links to redesigns they have acknowledged and more. With this page it allows them to guide people who are interested in redesigning their website.
The live website redesign from Moe Salih below was taken from the Unsolicited redesigns wikipage. The simplicity of the site and increased text size make navigating and reading important information easier. Whilst making things more asthetically pleasant the designer has managed to miss key components like a navigation area/menu which links to other internal wikipedia pages.
Part 3: Prototyping
I worked on designing two types of layouts for my redesign. I worked on trying to cut down the information that feels distracting when scrolling down on the site. In my draft 1 I looked into exploring typography and navigation. In the wireframe I cut down sentence length as there are sentences that read past 16 words in a line. In draft 2 I took inspiration from the Pitchfork website where they had two side elements to the main page. In my version the two side elements would be:
Sidebar left = a fixed position sidebar that shows the small bio that is on the right hand side of the current wiki page.
Sidebar right = a fixed position element that shows the content that would normally be featured in the contents section.
I used information from a Google Forms Feedback I sent out to craft some of the ideas on what people like and didn’t favour on the current wiki page.
After working on the initial designs, feedback given during a 1-to-1 session was there is too much of a focus on asthetics of the design. I decided to change things and looked into adding improved functionality which has a practical use.
With the feedback from Tobias. I searched around and worked on thinking of an idea to execute. With the research using Google Forms I initially conducted I noticed it would be hard to find a practical redesign for the wikipedia page. After discussing things with a classmate I decided to look into accesibility and making it easier for users to view content on the links if they were to hover over anchor links to pages.
As the user hovers over the targeted element the script searches for the anchor attribute containing the specified link. The script then adds a dialog window to the DOM body using Iframe this is how the target element is loaded. The links body is scaled down to fit with in the dialog window using CSS3 transform properties the window can appear above or below the link as well as left & right with absolute position. When a user hovers off the targeted element, the dialog window is removed completely from the DOM body.
Part 4: Product
Link: http://shuffz.co/zai/UAL/wikipedia
Whilst working on the site, I stuggled to implement the changes to the code that would have allowed for a more clean asthetic due to complications with conflicting stylesheets.
