Tuesday, September 27, 2011

Mozilla should make their own hardware lineup

Anyone remember Crunchpad? If you forgot about it, its a project initiate by  Michael Arrington of techcrunch to build a tablet like device to surft the internet back in 2008. Yes, it was started before the iPad. Hmmm, he should sue Apple for that :)

What's unique about this project is, for me, this is one of the first hardware project (not software development project like many startups try to build) initiate not by a hardware manufacturer or a company. We even can says that it was initiate by a personal idea, backup by the community. They develop the design concept, hardware, mockup, even a prototype by themself. No high profile super high budget reseach and development center included.

Sadly, the project didn't end up very well. But, this wasn't because of the hardware, or the manufacturing problem. It's a legal battle that killed the project.

Anyway..it shows us that this kind a approach to develop and marketed a product is doable in 2008. So..it even become more feasible now in 2011. Today, we have more resource to make it happen. We have kickstarter.com, more accessible hardware source and sure, manufacturing technology is progressing.
So, this leads me a question..why nobody try to do this again?

Personally, i think someone should and can do this, again. Its soo important for them to take this approach. To make sure their idea of perfect open standart internet can be realize..

Who are they? Mozilla

Today, Mozilla (with their Firefox flagship) is still hold many human being gateway to the internet (24% last time i checked), especially on the desktop. They just started move to the mobile devices with Firefox for Android and Meego. But is it enough? Its not. Recent survey said that their market share in declined. If Mozilla is lead by Stephen Elop (of Nokia), he must be said it again. Mozilla is sitting in a burning platform..

Lets see. Who is their main competitor right now? Google Chrome? Apple Safari? or even Internet Explorer? For Mozilla, i think is Google Chrome..its Mozilla closest competitor.

So, what is Google Chrome? It is Google attempt to build a gateway to the internet. Back then, Google has the service, but people is using other party browser to access it. Not anymore..

After some 3 years, look what Google Chrome has become along the way. It was a browser only. But not today, in order to achieve what Google think of perfect internet UX, they decided not only to expand the Chrome from browser to become a complete, self sustain OS, it is expanded even further, to become a devices..a complete laptop. Build from the ground up with the concept that integrate the hardware, industrial design to the UI as a perfect gateway to the internet, or the cloud as people say it now.

If Mozilla want to keep up, in the long run, i think Mozilla could take this direction too. Expand their browser engine to become a full self sustain OS. And at the end, provide a complete experience both from software and hardware.

The Mozilla OS is already began. They had "Boot To Gecko" project and other started to came up with similar idea base on Mozilla technology, like Webian for example.

But not the hardware.

Hardware business model
Today, is hard enough for a new brand/manufacturer to reach global market and marked their existance. In an exhibition like CES or IFA, we often saw some new brand with new idea came to the floor. But they won’t get to the international market most of the time and never had their impact.
If its hard for new brand, how about HP with their WebOS devices?

Its even harder for a non profit organization to do so. Just remember the MIT OLPC project. Mr Negoponte has to go around the world, meeting nation leader to distribute their product.
In my previous post, i imagine Mozilla has to build and distribute their own hardware sets (ultra notebook, tablet and smartphone). Design and build a new hardware is relatively doable (OLPC can do that), but to distribute and market it, thats another story.

Mozilla as a company is similar with MIT OLPC (CMIIW). Its a non profit foundation. But unlike OLPC, they don’t aim their product for kids only. So, no door to door goverment sales trip.
For Mozilla to success, there has to be another business model.

What i think is something more or less like the current most successfull open source hardware distribution model. The Arduino model.

Arduino open source hardware platform

If, somehow, Mozilla dediced to go this way and implemet similar model like Arduino, These are 5 things they have to do.

First, design a product with maximum modularity. Use standar modular parts. Make it common so the price can be low. Mozilla will be the one who purchase it from the OEM. The “branch" then buy from Mozilla and assembled the parts.

My modular concept for Mozilla's devices. Smartphone, tablet and laptop that share some of its module based on arm architecture.

Update 27/09/11. I've got a response via email about the http://elinux.org. The project have some PCMCIA size complete board. This will make the modular concept more visible to design and build. If anyone interested to develop the concept further, feel free to contact me.

Second build a industrial design concept (product-body case, packaging and print material) that can be produce easy around the world using existing facility.

Third. Design a production and quality assurance standar. This is important to gain trust from costumer. And it should be integrated down to the OS itselt to do the QC. Make the OS won’t boot if the hardware spec and quality doesn’t meet the standar requirement.

Forth, build a network of semi independent “branch”. They will be the one that produce and market the hardware locally. With the corrent product concept, the cost of setting up new “branch" can be relatively low. This will encourage local business to take part of this new crowd sourcing business.

Fifth, again..design a global identity and visual communication. From store concept, advertising and so on. Make them unique, clear but can be easily reproduce around the world.

The main advantage of this business model is, Mozilla can keep the cost down, while achieving their goals to bring the perfect internet experience to the world. They also encourage local business, creating more jobs and distribute both wealth and knowledge.

But, this is not the "white box" business model that PC industries have implement. In this case, the hardware is still in Mozilla control to maximum user experience. Only the assembly system is distributed, but all hardware came from Mozilla itself (except the monoblock case, this can be produced locally.

Thats it.

If you had any comment, feel free to drop me an email. I can't activate the comment for my blog, don't know why

User Interface concept for Mozilla Boot To Gecko

I repost this article, because the last time i post, the comment link can't load properly

This concept is my imagination of Mozilla Boot To Gecko web based OS user interface. Since its not officially use by them, i use the imaginary FXos as the name of the OS.

The name "FX" is derived from FirefoX. It will be use across the product lineup in my concept. Imagine FXu, FXt, FXm and so on. I will released them as soon as possible, so stay tune.

The concept is based on my previous UI concept posted on webian.org community. The original concept can be seen at

Previous UI concept for Webian Mobile

Please note that, this concept is far from finish, i still tweak it alot, and the ui mockup is still missing. I will complete it one by one.

FXos UI Concept - A Guideline 
last rev 26-09-11


When designing this concept, i also thinking about the hardware to make sure user will have the best user experience possible.

The hardware for this concept is monoblock bar shaped phone, without any physical button except the power button (and maybe camera button). So, no home key, back key whatever. The phone styling should be clean and honest.

An early sketches of the hardware concept can be seen in my next article. I will further explore the hardware design along the UI concept.

Basic concept

FXos use different UI concept than traditional desktop OS. In traditional desktop OS, which is based on old desktop methaphore, we usually found ui elements like desktop, application windows, taskbar, cabinet like file manager etc.

Instead, FXos develop its UI concept based  from a modern internet browser UI. In this UI, we found different common UI element than on desktop methaphore based OS. Here we have element like tittle bar that also function like a tab, address bar, status bar etc. And in browser UI, all content will be presented in full screen. So no windowed content.

In FXos, the browser UI is developed further to make it suitable as an stand alone OS for devices for desktop/laptop, tablet and smartphone.

There are 3 main container that represent 3 most importand element of the OS. These container is called layer. Beside as the representation 3 main element, the layer  also build related on how we can navigate the OS as natural as possible. The three layers are, the base layer, the presentation layer and expose layer.

Layer on FXOS

Base Layer
Is the lowest layer of all. It will always sit on the bottom of the others. The Base Layer will be the container for all setting of the device, from control panel, quick switch (something like power switcher in Android), the Tab Dock, Tray Botton and so on.

Presentation Layer
The second on is Presentation layer. This is the container of the content. All webpage and webapp and application launcher are places here. This is the main space for user interaction.

Presentation layer showing website in active tab. There is a small tip poin at the lower of the web indicating in which tab the website belong to.

Website shows in full screen. Note that, in full screen view, there is a small semi transparent icon in the lower left of the screen. I plan to use this as an alternative shortcut to the "Tab Dock" or may something else.

Expose Layer
And the last one is the expose layer. This layer is use to switch opened content either it is a website or a webapp. How the tab can be displayed can be costumized. It can be cover flow like, tile with preview or whatever.

Website/webApp can be pinned at expose layer. in this example, "the stream" is pinned at the top left of the screen for easy to remember location.

So, 3 layer. And each can be accessed with special different gesture. No button are required.

Key UI element

Tab Dock
The Tab Dock is a mash up between browser tab and an application dock (think MacOSX dock, or windows 7 new taskbar). The reason behind this, is that, "dock" size is usually bigger than traditional tab that browser has, so its more finger friendly (important for touch based UI). The dock also placed at the bottom of the screen, so it follow the concept of clustering main activity at the bottom of the screen.
The dock can also contain pinned webapp or UI element. In this case, the "Stream" screen can be access thru the pinned button placed at the Tab Dock.
Other important element that place at the Tab Dock is the "Tray Button".

New tab screen 
When user click a add new tab button on the Tab Dock, this screen is shows up. Its a combination of app launcher and traditional address bar set (address back, back, forward and search).

If you've seen my previous concept for Webian, i have move the url/search box on the top of the screen. This way, the box will not be covered by virtual keyboard. Or have to slide up when the virtual keyboard is shown. It can sit there peacefully and always accessible. This design will also be use across FXos app (see "the stream" bellow)

Stream is a replacement of traditional home screen. Like its name, it shows information stream related to user preference. Here user can have social network update, location where he/she is, related surrounding place,new sms messange, calendar alarm and to do list etc.

At the top of the stream, there is a text box. It can used to tweet, send sms, email, update your social network status etc. User can select what services they preffered.

I imagine that, with stream, we can reduce the time user need to access dedicated messaging app. They can send and response to message right here without having to open sms app, or twitter app for example.

The stream also represent how app will looks like in FXos.

Tray Button 
It is the replacement of current traditional system tray. It is a live button, means that, it will dynamically change the information displayed on it related to system condition. User can also click it to reveal more system notification and response to it.

Base screen 
This is the base layer. It contain device setting, quick activation bar, volume etc

System navigation

In designing a system navigation for the FXOS, we have to considered what is the main input device of the next personal computing. And from my perspective they are :
1. Touch screen - for tablet and smartphone
2. Touch pad - for laptop and desktop
3. Touch mouse - for laptop and destop.

From the three of them, the newest one is the touch mouse. I think it will be the next evolution of the mouse (begin with Apple Magic Mouse) and soon will be used by most of the pople.
I note the touch mouse because, the availability of it enable us to bring the same consistent way to interact with our OS. Some basic key element can now be done via simple gesture.

But, it will have a consequences. Since the touch mouse is buttonless, for the sake for consistencies, other devices will also have no physiscal button for navigating the UI. The tablet and smartphone loaded with FXOS will not need any physiscal button.

Again, make it simple, natural and consistence.


Here are standar gesture use to navigate FXOS

Double tap
Shows the expose layer.

Tap and hold
Reveal tab dock and reveal a simple popup option. Swipe left to open new tab, swipe right to close current tab.

Swipe from the bottom of the screen
Shows the base layer where device setting and control panel placed.

Swipe from the left edge of the screen
Back to previous screen, similar function to Android back button. Or can be used like browser back button.

Swipe from the right edge of the screen
Forward to previous screen. Or can be used like browser forward button.

Pinch zooming
Just like on the other platform, this for zoom in or zoom out the webpage/photo etc

Draw left pointed arrow with finger
Back to previous page for a website viewing.

Draw right pointed arrow with finger
Forward to previous for webiste viewing.

Application design

Basic design guideline for application UI.

Webapp function button
Like my previous concept ( getsatisfaction.com/webian) all the basic function of the devices is located near the bottom of the screen.
The webapp, in the other hand put all the function near the top of the screen. This will make it clear for the user, which one belong to the app, which one belong to the underliying OS.

Webapp presentation
All webapp (so does website) will presented in full screen.

App navigation
Content of the FXOS webapp will be presented horizontally (think Microsoft Metro UI without that overlapping content). The screen animation will give a clue to the user about this. This approach will also drop the need of dedicated physical back button. User can swipe back and forth with easy and natural way.

Imaginary Mozilla smartphone concept

Following last post, today i manage to draw some simple 3D model of the first lineup, the FXm smartphone.

The styling is simple and honest. But, it could be quite different when shown. The shape itself is designed with ease of manufacture and fits in hand perfectly.

This is merely an exercise of form and possible internal main component. The components included:
1. Main monoblock body
2. Screen (imagine a gorilla glass)
3. OLED display
4. Main board assy
5. Battery

I build the concept using PTC's Creo Elements. This software can be download and use for free, you just have to register at PTC website.

You can get it at http://www.ptc.com/products/creo-elements-direct/modeling-express/

The 3D model can be download at http://dl.dropbox.com/u/26421721/mobile2.pk2

Friday, September 23, 2011

Mozilla should make their own hardware lineup

im sorry, because some error, i cannot load the comment system properly for this post. I repost the article here

Thursday, September 22, 2011

User Interface concept for Mozilla Boot To Gecko

im sorry, because some error, i cannot load the comment system properly for this post. I repost the article here