Openbravo for Retail presents: "Golden Shoes"

Barcelona, May 2013. A short story about Lucia who has her mind set on a pair of golden shoes. Openbravo for Retail helps her find them but unfortunately there is no stock in her local store. All's well that ends well: Browsing the store's product catalogue on a mobile device, she is able to find an even funkier pair of shoes for summer.

In an entertaining way, we get to see Openbravo for Retail's latest capabilities:

• Single column support & responsive design. Retailers and customers alike, can now run Web POS on devices as small as the iPod. Thanks to responsive design, it will switch automatically to a two-column layout when screen size permits.
• Product details. For assisted selling, finding a product just to add it to the basket, is not enough. Now it is possible to configure Openbravo for Retail to display product details including image material.
• Stock visibility. In the mobile GUI, store staff has direct visibility in local and remote stock which leads to higher efficiency and client satisfaction.
• Product characteristics/variants. Especially in the apparel industry, characteristics such as color, size & style are essential. Openbravo for Retail offers fully customizable product characteristics and a friendly mobile GUI to use them effectively. Product characteristics will be available in RMP27, which will be September for QAA status.

Business Partners can use this video for marketing purposes. If you believe there is a need for a version with subtitles in your language, please contact us. There is also a uncompressed offline .mp4 available.

The Return of the Self Service Portal

Portals have not always lived up to their expectations but this is changing now. Modern, integrated enterprise business software built on open standards can be deployed easily as self service portals for customers, suppliers and employees alike.

Some thirteen years ago, when I started working for a big blue consultancy company, portals were all the rage. Vendors were tripping over each other to create portal software and both media and technology companies tried to get their part of the portal market. At that time, web portals were used by many users as their point of access to the internet, hence its commercial importance. Companies also took great interest in portals for internal use. The promise of tying together information and applications of all kinds of legacy systems in one place sounded appealing. I worked on three intranet-portals in my first year. Although we made them all look great and both customers and users were excited at first, the productivity boost that we all expected, did not fully realize.

In hindsight the reason for the unfulfilled promise was simple: Just aggregating information from different systems in little containers (portlets) on a workspace does not add a lot of value if you do not have the possibility to manipulate it without leaving the portal. An example is an expenses portlet that shows employee expenses to be approved by a manager. In a millennium portal the user would be taken away from the portal to an external expense report application to approve the expense. The employee would then receive a notification in her expense portlet. The portal in this example solely served as a notification system! For this, you might as well just use email.

Open up your Business Application

Now, in 2013, portals seem to go through a revival. Thanks to improved integration, personalization, RIA (Rich Internet Application) architectures, workflow, customization, scalability, the possibility to create mash-ups and the usage of open standards, portals finally live up to their expectations. The most effective portals are part of the business application instead of imposing an additional layer on top of it. Openbravo 3 was architected with portal functionality in mind from the start using open standards and having a Workspace tab out-of-the proverbial box. In most implementations so far we have seen the Openbravo Workspace being used as an internal portal for staff using Openbravo to manage their business processes. But there is no technical reason to not widen the scope and give access to the Openbravo Workspace to customers and providers. With Openbravo you can open up your business applications to both ends in the value chain and provide self-service that will lead to increased productivity, reduced costs and higher customer satisfaction.

Establish a Relationship First

The idea behind the Openbravo self service portal is that customers, suppliers and employees have direct access to Openbravo. It is important to understand that self service starts after a relationship has been established with the customer or supplier. The Openbravo self service portal does not aim to replace your company’s branded web site. Converting prospects into customers and potential suppliers into trusted suppliers are activities that are best done with your existing toolset but once these parties are in the circle of trust they should be able to interact with your system in a more direct manner. Note that this is not because of security but more because of reduced guidance. To use an analogy for suppliers: If you let someone fill up your fridge when it is empty, this means that this person should already know where to find the fridge and what your needs are.

Dumb it Down

Enterprise business applications are complex by definition because of their breadth and depth in functionality. Users usually receive training and even then, ease-of-use is not the first thing that comes to mind when thinking of ERP systems. Among those, Openbravo 3 is probably the most usable business application suite on the market as it was redesigned in 2011 from the ground up with the end user in mind. However, this does not mean that you want to force your customers, employees and suppliers to use your system as-is. The best approach for a successful portal is to take out all functionality and GUI elements that are not absolutely necessary and only present that what is relevant to the user’s task at hand. In the first two examples below you can see that the only tab visible is the Workspace tab. We have taken out the multi-tab feature for the sake of simplicity. We did the same for the top navigation: the quick search and launch menus are hidden, as well as the application menu. Obviously it is up to you to decide what you want to offer to your users but we recommend to dumb it down as much as you can.

Examples

A few examples of self-service portals with Openbravo:

1) Customer Self Service for Coworking. With more and more independent professionals who are looking for a desk or a conference room, the coworking business has grown spectacularly. As in any other business, coworking needs contract management, resource reservation, invoicing and payments. Openbravo has recently successfully implemented a coworking self-service solution in one of the largest coworking spaces in the United States and two more European coworking spaces have signed similar deals. The Openbravo for Coworking Spaces solution will be launched during the Coworking Spain 2013 event.

Coworking Portal

2) Employee Portal for Business Consulting: expense reports, time allocation, team calendars, social media, requisitions, HR services, training. It is worth pointing out the difference with the expenses widget in a millennium portal that I referred to earlier in this post. In the Openbravo employee portal, the expenses are actually part of Openbravo rather than using an external application. This means that data only sits in one place and there are no delays in processing or synchronization.

3) Supplier Portal for Sports Equipment Retailer. Your supplier can manage many processes autonomously. Just to name a few: invoice submission, shipment tracking, master data management, payment terms management and contract management. Openbravo can manage all these applications in one single database that is accessed by the supplier. Obvious benefits are: better stock optimization, higher transaction speeds, less errors and greater supplier (and thus customer) satisfaction.

Supplier Portal

4) Customer Self Service for Opticians: Measuring, ordering and preparing subscription glasses takes substantial administrative overhead of which a large part could be done through customer self service. Especially for repeat customers this is a time saver but the retailer also wins with higher customer retention.

5) Partner Portal: Openbravo’s partner portal provides business partners direct access to contract management, subscription extension, marketing materials, training and more administrative tasks. This helps them become more productive and effective and leaves them more time attracting and serving their own customers.

Partner Portal

Responsive Design For Mobile Retail

Openbravo for Retail can now be used on smart phones. This article explains its responsive behaviour and ends with a recommended device strategy.


Although computer devices so far only come with rectangular shaped displays, the wide variety of screen sizes nowadays makes designing software that runs well on different devices a much harder task than a few years ago. Apart from different screen sizes, developers also have to deal with different resolutions, aspect ratios and different operating systems. As for the last factor, fortunately Openbravo for Retail runs in a web browser which makes it platform-independent. This leaves us with the factors screen size, resolution and ratio to worry about.

Screen Sizes, Resolutions and Ratios

Smart phones are getting bigger, tablets are getting smaller and more laptops have touch screens. It is clear that there is a lot of overlap in device categories when only looked at from a specifications point of view. Here is a rough categorization:

1. Traditional desktop and laptop computers that are operated using a keyboard and a point & click device such as a mouse or trackpad. Screen sizes vary between 11” (e.g. a Macbook Air or Netbook) and a 24” external monitor. Resolutions vary roughly between 1024x640 and 1920x1200 pixels with aspect ratios from a more traditional 16:12 up to a widescreen 16:9 ratio. 
2. Tablets with touch screens that are operated by fingers or a stylus. These typically measure between 7” and 11”. With the introduction of Windows 8 it is expected to see much larger "tablets" because most Windows 8 laptops will also have a touch screen in addition to a keyboard. However, I believe that every device with a screen larger than 11” is best treated as a traditional computer since it will rarely be used on the go because of its sheer size. Tablets are operated using both hands but can also be placed in a stand and used with one hand or even an external keyboard. 
3. Smart phones with touch screens that are operated by fingers or a stylus. These typically measure between 3” and 5” with hybrids (“phablets”) up to 6” of display size. Aspect ratios vary between 16/9 (e.g. iPhone 5) and 16/12 (e.g. LG VU II). Mobile phones can be held in one hand while being operated by the other. With a smaller display size or bigger hands, one-hand operation is common. 

To add to the complexity, tablets and mobile phones screens can be used in either portrait or landscape mode.

One, Two and Three Columns 

The best way to deal with such a vast array of screen sizes, resolutions, ratios, orientations and operation modes is to design for mobile first and to apply responsive design. Responsive design is a term that is used for web technology that adapts the rendering of pages depending on the screen space, browser and device used. These are identified by the Javascript framework and the best possible viewing and usage experience is subsequently offered. In practice that means that more components are shown when more space is available or these components are shown in a different, optimized way. Note that in our case this does not imply that you would have less functionality on smaller screens, it is merely a matter of not showing everything at once.

For Openbravo for Retail this works as follows:

Large widescreen monitors will benefit from a three column layout. Besides the ticket and scan/browse/search/edit columns, users will also see an additional workspace column on the left hand side. Note that the third column has not been developed yet but is part of our roadmap for this year.


Medium sized monitors and tablets in landscape mode will be using a two column layout. This is what Openbravo for Retail is currently using.

Smart phones and tablets in portrait mode will work with a single column and depending on the task at hand, the user can switch between the columns by swiping horizontally or tapping a pagination button.


You may wonder why we have put in pagination buttons when you can swipe horizontally. We could have used the precious screen space for something else, right? The answer stems from our design philosophy which assumes that it is unknown which kind of input device people are using. A typical retail point-of-sale setup will use a touch screen but many stores also need a keyboard and mouse to look up products that require keying in long product codes or keywords. It could also be the case that a retailer simply does not want to replace his current monitors with touch screens. Simply stated: Openbravo for Retail and Openbravo Mobile does not want to impose a device or input method.

Device Strategy 

With such a large amount of factors choosing the best device for your context is not easy but with responsive design you will be able to run Openbravo for Retail on most devices if you take into consideration a few guidelines.

First, there is a minimum screen size. This has nothing to do with pixels but has everything to do with basic usability. If things get too small, you simply cannot read text anymore and controls will be hard to target. The minimum screen size for smart phones for Openbravo for Retail is 3.5”.

Second, there is a minimum resolution. The more pixels available, the more information can be shown. The minimum resolution for smart phones for Openbravo for Retail is 480 x 800 pixels.

Third, there is a minimum amount of memory and processing power that the mobile device needs to have to run Openbravo for Retail comfortably. Because everything runs inside a browser, theoretically the browser determines the need for system resources. As a rough baseline, make sure to have 512 MB RAM memory on board and a 1 GHZ processor.

Fourth, there is the need to use an up-to-date browser that is either Chrome, Safari or the Android stock browser.

Complying with the above, the remaining factors for choosing the right device will depend on your users and usage context. Sure, Openbravo for Retail now adapts itself to your device but picking the appropriate device for your users is as important as ever. We strongly recommend to spend some time investigating how Openbravo for Retail is going to be used. Is the device going to be used for client-side selling or as the main POS terminal? Does the device need to fit in a pocket or will it be attached to the wrist? What are the lighting conditions the device is going to be used in? I cannot stress enough the importance of doing contextual research. Observe and interview your users and try different devices before deploying any.

Design Guidance for Openbravo 3

Openbravo's modular architecture makes simple development of extension modules possible. Modularity allows people to develop extensions and to distribute them independently, as well as to leverage distribution channels.  The number of available commercial and non-commercial modules is growing and dissemination of modules is growing alongside. To avoid inconsistency or substandard user experiences, guidance must be given to the community on how to create high quality, usable, enjoyable and consistent modules and customized Openbravo windows. We have created two documents to help you in doing so. The starting point is the User Interface Guidelines wiki document that describes the main rules and tips for Openbravo 3 module and window design. In addition to this, we have built a mockup tool that lets you design Openbravo windows without coding. It is simply a shared presentation document that has templates and library components that lets you design your own windows and flows. Make sure to read the instructions before using it.

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