It took over 18 months to complete and was designed and built from the ground up by the team of designers, journalists, user-experience experts and product managers. The key goal was to deliver a new, fully responsive website, optimised for as many viewports and devices as possible.

THE GUARDIAN

One of the world’s most widely read newspaper websites, the Guardian, attracts tens of millions of unique visitors each year. With that audience increasingly migrating to mobile devices, the newspaper’s in-house team was tasked with rebuilding the site to improve user experience on mobile devices.

CHANGING THE ARCHITECTURE

One of the first things they did was look at how to simplify the information architecture. From analysing user data it became quite clear that once a user gets to a certain point in their journey, they stop using the navigation and instead navigate through content.

The old site had multiple levels of depth, and subsections would often had bespoke navigation that was out-of-date, cluttered and poorly used.

So what they did was basically strip the navigation down to two levels: primary and secondary, and also changed some of the groupings used to categorise content. This allows users to quickly find their way to the main topics they’re interested in.

WIREFRAMING PROCESS

From the beginning the project was wireframed in HTML, which has a number of benefits. For example, you can immediately see how an idea will work in a browser and iterate from there. These wireframes are also easy to present and share. Instead of explaining the interaction, all the people engaged in the project could see it live on the page.

Each of the breaking points was designed in accordance to the rest to get the best results when the resolution changes. All the content was placed on pages according to it’s value and place in the hierarchy, rather than it’s size.

USING CONTAINERS

The Guardian research team decided to thoroughly check the users’ motives for opening the website.

There are three major ones:

"Update" is the most frequent motive and describes the journey of readers who visit the Guardian – often many times a day – to find out about the news-agenda in general, or about news from their area of interest, whether it is sports, culture, the economy, etc..

"Extend" describes the motivation to then gain a deeper understanding of a specific story, which usually demands more time than a quick news update.

"Discover", is rather a whole group of motives, such as the wish to find inspiration and surprise, new perspectives, interesting debates with other readers or entertainment.

These research insights helped build the new website based on the readers’ typical journeys and needs.

They are built with what’s called „containers", which are sets of builiding blocks. They "contain" words, pictures, videos, graphics and data. Editors can group them together flexibly, creating modular homepages and article pages to create a representation of what is important each day.

FINAL EFFECT

The new Guardian site now has a more compact view, and provides more visual clues about each story’s importance.

Videos, photo galleries and interactives are now seamlessly integrated into pages. Videos can now be embedded and played anywhere on the website.

The new photo galleries allow users to browse them in different ways: either by scrolling through the images, swiping through them on mobile devices or viewing them in full-screen mode while using keyboard arrow-keys to browse through them.

And within each article, the Guardian editors now have many new ways of recommending related materials.

The Guardian’s team did a tremendous job getting the newspaper,it’s values and quality into the digital world. The website works perfectly on different viewports and there are no useless elements. It’s as easy to read and browse through as ever.

LONELY PLANET

Lonely Planet is a web guidebook. Founded in Melbourne in 1973, the company has grown to become the world’s leading travel publisher, providing fresh content to more than 120 million people every year across it’s different platforms.

Now, Lonely Planet has decided to make changes to improve the most important parts of their website. Let’s take a look.

CONTINENT AND COUNTRY PAGES

These two are the most important ones for users. So the key here is to organize content to help people quickly find the top things to do in each location, and a recommended sets of places and experiences that help get the most out of the travelling experience.

STUNNING IMAGES

To draw attention as well as immediately present the most distinguishable qualities of a place or a product, there is nothing better than photographs. A partnership with 500px helps Lonely Planet find the best images on the web, and then upload them to the continent page. The user’s journey begins here, looking at the photographs that tell a part of his future story.

ENGAGING USERS

Lonely Planet decided to use the power of community – in this case, travel enthusiasts and travelling writers. Each of the continent pages starts with a testimonial (or as they call it, a „love letter") that explains why you should visit a certain location. It is a great way to make users trust the website and its content.

TOP EXPERIENCES SECTION

The new design – through photography and placement – highlights the most important places to visit and recommended attractions.

MAPS

A completely new feature – interactive maps – will help connect all the content from all over the site. The user will be able to see all the destinations, as well as sort them using different filters.

GUIDEBOOKS

Lonely Planet is known as one of the best guidebook publishers in the world. So, they decided to make the only rational move regarding the website – place the guidebook in a visible place on the new destination pages for those who want to buy a guidebook for their journey.

CITY PAGES

One of the first changes made was making the design of city pages feel smaller. This was done to show the parent / child relationship between continents, countries and cities. The layout changes into an article at the city level.

HOTELS & HOSTELS

Travelling means finding the right hotels. One of the key elements that got improved is helping users find the best hotel or hostel in a city. Before, hotels were shown throughout the website, now they are shown only in places where the visitor is thinking about planning their trip.

ARTICLE PAGES

The article and detail pages are the most important ones from the Lonely Planet’s online brand. That is why all continent, country, and city pages place an emphasis on directing users to these pages.

APPLE

And last, but not least, Apple – the iconic manufacturer and service provider – has recently decided to redesign its website in order to change the whole experience of purchasing through the site. The Apple team has decided to organise and simplify the website in order to reduce confusion.

The old design had 2 designated areas: products & store. This was probably because Apple’s site served more as a marketing platform than an e-commerce one. Over time, e-commerce has grown but Apple never bothered to make the switch.

Finally, it’s properly combined together.

All product pages generally look the same with lots of photos and feature details. The classic Apple navbar is also fixed at the top, as you would expect, but without the inessential "store" link.

Now product pages lead right into the store, so purchasing is all done from the apple.com domain as opposed to store.apple.com. The latter now redirects back to the homepage so everything fits together.

This means your shopping cart can also be managed from any page on the site. There’s no longer a divide between browsing or shopping on Apple.

The checkout pages match the same design as before, so very little UI work has been done. There are minor aesthetic tweaks, but overall the redesign is more of a user experience upgrade.