Openbravo Mobile: Agile Business at White Valley

After announcing our plans for a mobile solution of Openbravo 3 last year, we decided to first launch the Openbravo for Retail solution with Web POS as the primary mobile interface. Having delivered, we continued working on the core mobile experience. Based on earlier interaction design, we are now in the last stage of completing the Openbravo Mobile platform.

This video shows the power of Openbravo Mobile. It features a lightweight HTML5 GUI that uses Enyo, the state-of-the-art open source development framework. This is an important step towards delivering our mobile vision where all standard windows in Openbravo 3 can be accessed through any mobile device with a web browser. This means full functionality, including record addition and modification, process execution, reporting, notes and attachments.

The featured video demonstrates Openbravo Mobile in different business contexts. Elena´s outdoor store is selling a lot of winter gear due to the cold weather that is coming up. Rob, the sales director, notices this trend while looking at Openbravo Mobile widgets on his phone and directly requests the purchase manager to order additional stock. A few minutes later he receives a notification that the order was placed and he approves, again using his mobile phone. The next morning, the goods are received in the store and Miguel, the warehouse employee, uses Openbravo Mobile on a tablet to register the incoming goods. The circle is closed and business continues.

Openbravo Mobile works seamlessly together with the standard Openbravo 3 browser experience against the same centralized database--further enhancing productivity and accessibility, making your business truly agile.

Is the Nexus 7 the Ideal In-store Retail Device?

Openbravo Web POS is well on its way and in a few weeks time our partners and retail customers will be able to start using it for their businesses. We at Openbravo produce software and unlike Google or Microsoft we don´t plan to stray into designing hardware. We are proud to be hardware-agnostic in the sense that we believe our software should run on anything with a browser. With Google´s new Nexus 7 tablet however, it is hard for me to hide excitement about a piece of hardware and especially its usage in combination with Web POS. I can totally imagine using the Nexus 7 for client-side selling in stores. Here´s why it looks like an ideal candidate. 



The Size
With a 7 inch diagonal screen size and 340 grams weight, it seems like a tablet you want to keep with you at all times while talking to customers in your store. You could tuck it in a pocket or shove it in a waist-pouch similar to what some waiting staff wear in restaurants. The resolution of 1280x800px is ample (Openbravo Web POS has a 1024x768px minimum requirement) and its display size is probably just large enough to allow for low-volume product browsing and selling. Pythagoras helped me out with a^2 = b^2 + c^2 to model a quick mockup in real-life dimensions to assess the usability by printing a Web POS mockup on paper. Whereas a Galaxy Note would not be usable without stylus and an iPad is just too big to carry around, the Nexus 7 seems to have the perfect size.

The Specs
This tablet is designed for media consumption and gaming and the tech specs show this. A quad-core Tegra 3 processor should make it fast and smooth and Google claims eight hours of active use on a battery charge which is enough for a full day of selling.

The Jelly Bean
Android 4.1, aka Jelly Bean, is great for its browser experience. It runs Chrome which allows for smooth switching between active browser tabs and full integration with Google services. You would be running Openbravo most of the time while interacting with customers but little sidesteps to the back-office, product comparisons or even the competitor´s site will be easy. Also, staff can access other non-Openbravo internal business applications without having to find a back-office desktop computer. Having a quick meeting with other store staff via Google+ Hangouts also sounds very useful. Another nice feature is speech-to-text so you can find products by talking to the tablet, even in offline mode.

The Price
The Nexus 7 is cheap: 199 USD. This is a lot cheaper than the iPad (starting price 499 USD) and cheaper than most Android tablets in the market, apart from some cheap makes with low specs. The additional cost of adding a few more Nexus 7 tablets to extra staff on the shopfloor on busier days are peanuts compared to losing customers because of long waits for check-out lines or bad customer experiences. Mind you, your sales staff just needs a tablet and point their browser to the Openbravo Web POS instance in the cloud (or your server on-site). No installs, no maintenance, no risk, highly scalable. You could even let them bring their own tablets.

The Catch
There is none. Well, there is maybe one. I have to be frank with you: I did not try Openbravo Web POS on the Nexus 7 hands-on yet. Based in Barcelona Spain, I have to wait for one of my US colleagues to bring one over. I will keep you posted on our hardware experiences.

UPDATE 03/09/2012
I finally got my hands on the Nexus 7 and it is indeed a wonderful device. However, there is one big BUT that I did not anticipate, which is the lack of a full-screen browser view mode for Chrome on Android. The standard browser that is used in Android 4.0 (and lower) has a full-screen mode but with Jelly Bean (Android 4.1) Chrome is the standard and only browser. This said, it is expected that full screen browsing is coming soon to Chrome for Android. Until then, I do not recommend the Nexus 7 for Openbravo Web POS yet. It works fine technically but the tabs, address and navigation toolbars take away too much of the available screen space, which is far from ideal. I apologize for the confusion I may have caused with my original post. Find recommended and tested tablets in the retail documentation.

Openbravo Mobile Web Preview (Web POS example)

We've just released an 11 minute long video showing off our Web POS (Point of Sale). Enjoy!

Ya tenéis disponible un vídeo de 11 minutos que os muestra el nuevo TPV (Terminal Punto de Venta) en entorno Web. ¡No te lo pierdas!

ENGLISH

CASTELLANO

Web POS Graphical Design

With the technology and interaction design well on their way, we´re now about to close the graphical design phase for Openbravo Web POS. It's going to look like no other Point of Sale you have seen before and sets a new design direction for Openbravo Mobile and Retail. Here's the design rationale.

Minimalist & direct: Openbravo Web POS features a minimalist design inspired by De Stijl and the Metro design language, that prefers content over GUI chrome. It uses straight and rectangular forms and is strongly typography based. The user is encouraged to interact directly with labels. For example, to add an item from the product catalogue, you just click the label (1). To reduce the amount, you just click the amount (2). There is no need for additional buttons and a minimum amount of taps is needed.

Light & flexible: Elements float on top of a background, emphasizing the lightness and flexibility of a web based application where the presentation layer is separated from business logic and data.

Optimized for modern touch screens: The new design makes use of modern touch screen capabilities that are offered by consumer devices such as the iPad but also increasingly by more industrial terminals. Products are browsed by swiping lists rather than using tedious next/previous or scroller bars. These are only rendered in case of older touch screens or mouse/keyboard operated keyboards.

Happy to be personalized & customized: Openbravo Web POS runs on anything with a browser - which means it must look good on all platforms and devices. It should also blend in with the retailer's shop and brand. The open architecture and use of standard web technology (HTML5) allows for easy adaptation for specific environments and even without coding, personalization should be easy. Colors and backgrounds can be matched with the company's corporate identity and adjusted to temporary themes.

Playful and proud to be seen: Most POS GUIs are dull looking, which is a missed opportunity because the exposure of these systems to staff and clients is high compared to other back end systems. POS systems take central stage in most restaurants and bars and retailers more and more let their customers co-interact with the system. Openbravo Web POS wants to be an appealing, fun and professional piece of software that staff and customers love to use and show. Nifty little design details such as the folded corner, animations, illustrations and intelligent messaging add to the experience. The exposure of the POS GUI to staff and customers is also an opportunity to communicate with them, through the GUI itself (e.g. branded themes), the message area (for staff) or the customer display (for customers).

Here's the full set.

Openbravo Web POS

The last month we have been working in stealth mode on the Web Point of Sale (POS) project so you may not be aware of what this is all about. Good things need to be shared and stealth is stupid, so let me give you an update on the latest exciting developments for retail.

What is Openbravo Web POS?

• Openbravo Web POS is intended for multi-store retail businesses. The solution will be modular, providing a full list of advanced functionality to cover all requirements needed from the point of sale, store management, to the central head quarters.
• Openbravo Web POS will have an agile, flow oriented, best of breed web user interface oriented to tablets and touch screen systems. The solution aims to provide a highly satisfying staff and customer experience but also needs to be easy to customize and personalize by business partners and end users.
• Openbravo Web POS is an enterprise level solution that is fully integrated with the ERP using one logical data model. It is also highly scalable and offers web services to expose the enterprise model to the outside world.
• Openbravo Web POS is an addition to the existing POS client. The choice of deployment options will be left to the business partners and customers.

What have we done so far?

• The architecture has been decided. Read details here.
• The main flows and functionality have been designed. Here´s a SlideShare presentation showing the latest iteration.
• Interactive mockups were built for both desktop and iPad. Download HTML Mockup (unpack zip and run in browser). Download iPad Mockup (you need an app called Presentation Link to run the iPad version).
• Usability tests were conducted on 12 users using the interactive mockup mentioned above.
• Based on the findings, we improved weaknesses of earlier versions along the way, resulting in the 8th iteration, which is considered mature. This means that we are now very confident this is going to work for our users.
• The visual design phase has started. Here's where colors, typography, layout and style are defined. Most POS software is butt ugly and this needs to change. I will share some art work in the next few days.

We're very excited about the Openbravo Web POS. Mind you, this is not your average POS system. This is a retail solution that combines a great web-based user experience with a solid enterprise architecture.

Creating Interactive Mock-ups on iPad

A week ago I started to search for a mock-up tool for tablets. What I wanted to do is to use a set of ready-made page designs and add interactivity to make it come alive. This is business as usual for desktop: I have been doing this for years in tools as simple as Powerpoint or in Dreamweaver by just dropping image maps (linked hotspots) on top of bitmap images. It turned out to be quite hard to find similar tools for tablet and mobile.

The whole point of an interactive mock-up is that it gives the user the impression that they are dealing with a fully functional application. Interactive mock-ups are used to test a much more detailed version of your application design than you would do using wireframes. The difference between mock-ups and wireframes is in the level of maturity. Wireframes are used to communicate the functional flows, the specifications and the layout of an application with very low fidelity. Most designers intentionally draw wireframes in black and white using sketchy lines to make sure their audience understands that everything is still rough. Mock-ups are the next iteration of wireframes. They add more look & feel, interactions, color and graphical elements. Ultimately there is the prototype which is a first real implementation of the design intent. It is developed by engineers and it aims to prove that the technology can do what the designers had in mind.  Here´s an image showing the different stages:

The different stages in application design

Application design comes to life in the mock-up stage and the user - or client - may even think the application was built already. Let me just give you a tip as a side note: Always make sure to communicate that in this stage not a single line of code was written yet and that everything is just smoke & mirrors.

There are plenty of wireframe tools on the market for PC/Mac but also web based applications that do a good job. Here´s an overview of a few years ago that is still valid as things have not changed that much. Good quality wireframe apps for tablets are thinner on the ground and it really gets hard to find a good interactive mock-up builder. Deceptively, most wireframe apps for iPad promise easy image importing but fail on the delivery. Images either have a maximum size, a maximum amount (e.g. ProtoTap) or just can´t deal with full-size rendering in high quality  (e.g. iMockups). Also, when you need to use your mockup for usability testing, you don't want disturbing toolbars that come with the app, as they distract the user who can't distinguish between the controls of your app and the mock-up app. Most mockup tools just don't seem to be designed by designers.

In theory, you could create interactive mockups in HTML (images + hotspots) the same way for tablet as you would do for desktop. The problem however, lies in the playback. The iPad does not allow users to run local html files in the browser, an annoyance of iOS. Android is more flexible but here we run into the second problem: Images are not scaled optimally in the browser which results in nasty slider bars appearing.

So after wasting too many euros on useless - for my purpose - wireframe apps in the App Store (it´s a shame that you can´t return an app if it doesn't do what it says on the tin), I finally found a decent interactive mockup builder app in the business category; a place where I did not expect it. Don´t get fooled by the boring name but mind you: Presentation Link  is quite an exciting find for interaction designers that need to test their work on users. Presentation Link lets you import your images (or PDF presentation) from Dropbox or iTunes. You can then add transparent hotspots on top of these images that turn dead pixels into interactive components. Just draw a rectangle on top of (an image of) a screen element and tell it which slide should appear next when tapping it. By adding enough images that represent different scenarios, you can get very close to the behavior of the final application. Here´s a little demo of Presentation Link:

 

How to create a simple interactive mockup

Presentation Link might actually disappoint tablet users that are looking for a fully fledged presentation maker à la Powerpoint or Keynote but this was obviously not the intention of Zuhanden GMBH, the authors of this tool. Knowing that slick presentations and interaction designs are much better produced on desk/laptop computers, Presentation Link just imports external beauty, links it together in a non-linear way and presents high quality, snappy clickable mockups that can be used for usability testing and demonstrations.