Ubuntu Browser

The Brief

A browser as part of a suite of first class native apps, that are innovative yet easy to use straight out of the box.

Ubuntu is the most popular Linux operating system with over 40 million desktop and phone users worldwide, and powering countless more in server systems for the world's most innovative companies such as Tesla, Netflix, Uber, Dropbox, Paypal, Snapchat, Walmart, and Google's self drive cars. If you've used these services, you've used Ubuntu.

Ubuntu Touch is the mobile version of the operating system and as part of its development, needed essential core apps for its users to start using their phone right out of the box.

Arguably the most important app, the browser, needed to be designed carefully. Designing a fun and useful different browser with great interactions, powerful tabbing and great usability is the biggest challenge. I produced a variety of sketches, and quick mocks. I worked with prototypers to bring these designs to life and presented several iterations to Mark Shuttleworth, the enigmatic billionaire owner of Ubuntu.

Sketching Ideas

A central tenet of the web is 'content is king'. The most crucial factor for any browser, is its ability to allow the user to view and manipulate content, ensuring that the chrome fluidly supports yet ultimately gives way to the content. This is particularly so on small screens.

A good metaphor to approach the browser is a picture frame - whilst it is there, it often recedes into the background allowing the user to frame and appreciate the content better. Essentially, the best kind of browser is where the user no longer notices its presence.

Sketches

One of the core features of modern mobile browsers is the ability to manage multiple tabs. Gone are the days of a maximum of 6 tabs on Safari, when processors could only manage a few open tabs at a time.

Given this, I explored all the different concepts for tab designs looking at full page screenshots on tabs to tiny thumbnails, using inspiration from different browsers on different devices.

Sketches

I explored how the tabs and history could be combined in an 'activity' mode section along with downloaded pages for offline viewing. These all had to fit in with the constraints of the Ubuntu Phone patterns for a bottom edge swipe, and a single taskbar. How to fit in all this functionality without overcramming the screen with buttons?

I looked into concepts that used cards from the Android multi-tasker interfaces, with the background image presenting a visual link to the originating tab the user came from. To problem solve this, I began looking at how the various concepts might expand to tablet, to see if there was a way to design from tablet down back to phone.

Sketches

Developing Concepts

To help figure out how many functions were really needed, I began mapping out the potential 'happy' journeys for the app. One of the concepts I devised included using a long pull swipe from the top to reveal a layer of buttons beneath.

Wireframe

An issue with this 'pull down page' design was that some websites have pull down interactions for their own site functions e.g. menus.

I iterated the design a little more as it still felt like there were many more options for tabbing as explored earlier in the sketches.

Wireframe

Part of my exploration dealt with letting the user see their originating tab in the background of a tab mode.

Wireframe

Prototyping

To better experiment and get a real feel for the interactions, I created two videos to animate my wireframes and for a third concept worked with a developer to create a prototype. Bringing the designs to life allowed me to understand what worked best and communicate the strongest ideas clearly.

In these concepts you can see the card or tile tab view overlay with the background originating tab just beneath. The square tabs of the Android Multitasker type tab concept allow the tabs to easily rotate in either vertical or horizontal phone orientation.