UBUNTU.COM

Redesigning Ubuntu.com to make it lighter

By Luca Paulina

evaluating the existing IA

Ubuntu.com averages at about 300k hits a day, it's an important site for the Ubuntu community and especially important for us to highlight key information about the Ubuntu project. The old Ubuntu.com was bloated, it had an abundance of third, fourth and fifth level pages which confused the navigation, the content on some pages was also incredibly dense and our key messages were being lost.

planning the new ubuntu.com

We setup camp in one of the meeting rooms to explore the IA in more detail. We critiqued each section and page and asked if it was important enough to deserve it's own page or a only a section, we identified our key messages and explored what was the best way to talk about our products.

new information architecture

The disparate mixture of products and company links of the primary navigation in the old Ubuntu.com was a problem and it was one of the first things we changed. We opted for a navigation which was product focused, all of the other sections were moved to the footer, leaving the new Ubuntu.com with a clarified, consistent primary navigation. This also lead on to a restructuring of all of the content and helped us simplify u.com into a lighter, primarily two level deep website.

megamenu exploration

One of the aspects of the workshops was to explore whether a megamenu could aid navigation of the site. I created wireframes for each concept and passed them onto one of the developers to prototype. After user testing the prototypes it was apparent that the new simplified IA for u.com means we could opt for a simple lightweight dropdown for each of the primary navigation link.

contextual footer

To aid navigation across the site we introduced a contextual footer. The contextual footer would sit above the primary footers of the site and prompt users to get in touch, download or highlight articles related to the content of the page, the user testing and analytics from the main site both gave positive feedback. The contextual footers are currently being reworked to be further improved.

Design

Along with the new IA we introduced a new fresh visual style. We aimed to make the site feel lighter and we cut back on the use of the vector pictograms and instead used product shots to reflect the new product focused IA. We decided to be bolder with the whitespace and copy throughout the pages, show better examples of our products and consolidate the calls to action to simplify the user journeys.

In the old design all business orientated sections were coloured Ubuntu aubergine. The new design guidelines meant that the cloud section saw the biggest design over-haul, the purple was replaced with a soft grey which made the white content area stand out. Product shots and smarter copy paced the users throughout the story better and a consolidation of the cloud products into a simpler IA meant that it was easier for us to provide a better mental model.

The old desktop section was called Ubuntu which confused users, the landing page didn't address key concerns that were highlighted in our research and there were elements that looked clickable which were not.

We change the old Ubuntu section to Desktop, provided targeted content for our different audiences, highlighted prominently the reasons you should download and trust Ubuntu, addressed why it was free and used better imagery throughout.

What are these photos about?

Cloud content revamped

Redesigning the site and consolidating the IA gave us a chance to simplify the Ubuntu cloud offering, once the new site design had launched we immediately started ratifying the cloud section.We found the content extremely dense and long winded and it lacked imagery to help pace the user throughout the pages.

We aimed to build a better conceptual model around the complex Ubuntu cloud offering. We simplified the journeys, created destination pages, consolidated the calls to action and procured better copy. The overall result was pages that felt lighter, coherent and exciting.