Openbravo's User Experience Lab
GUI design, ERP Usability and Visual Design

The Openbravo 3 Design Process

Thursday, June 2, 2011

We´re on the brink of an exciting moment in the ERP space with the publication of Openbravo 3 - Production in a few weeks time. It brings the most radical change in the product´s history.

While the development team is working day and night to make this happen, I would like to share a bit of background information on the design process, context and principles that we applied in this project.

Release Candidates rather than a Big Bang

Big changes carry big risks so at the start we chose to deliver Openbravo 3 in seven subsequent release candidates rather than one big-bang launch. Every release candidate was a working version that customers could try and in every subsequent version the number of bugs decreased and the number of features increased. Releasing this way does not only reduce risk but is also a great way to get early customer feedback, especially being Open Source.

The first release candidate gave birth to multiple tabs, then we added workspace widgets and finally a new master-detail paradigm using redesigned forms, editable grids and split views. With these pillars, our vision for a highly productive, usable and enjoyable ERP system was realized.

From now till the production release we will focus on testing and fixing bugs.

Design Imperatives

A redesign project of such scale and complexity needs to be confined within high level design imperatives. So we started out with stating what Openbravo 3 had to be:

  • Holistic: The solution had to make sense as a whole, not just a set of independent features
  • Relevant: The solution had to make sense to our users by making work more productive and more enjoyable
  • Open: The solution had to be created using a transparent design process involving stakeholders at all times
  • Supported: The solution had to be evangelized both in- and outside the company to get buy-in
  • Realistic: Dreaming is easy but the solution had to be built eventually with limited resources
  • Shipped: Because that is all that matters

Obeying these design imperatives does not guarantee success but it was clear from the outset that not obeying them would guarantee failure.

Big Design Up Front

Big Design Up Front (BDUF) means that a product´s design is completed and perfected before the actual development starts. Although this approach clashes with the agile development approach, I am a strong believer that for large and complex design projects, this is the only way to go. Apart from getting a higher quality design and better buy-in, BDUF also reduces the amount of changes further down into the development stage. For a UX designer to “change” a piece of functionality means 30 minutes sketching on paper or modifying a mockup in Photoshop. For a developer, once something is coded, changes can take up to days.

As stated above, our solution needed to be holistic, meaning that we did not want to fix a couple of hundred of bugs and plug in a dozen features hoping that this would result in a coherent and intelligent product. We needed to step back from the current product and situation and spend some time thinking about the ideal experience.

This was to become the User Experience Vision which was based on the six core capabilities that we discovered through talking to our business partners, customers and end users. The final solution had to have all of these capabilities, in order to be a success. Taking out one of them would mean breaking the holistic solution.

  1. Multi tasking. Business processes are never linear and necessary information does not always sit in one place. We discovered that our users need to be able to work on multiple documents at a time.So we introduced tabs allowing multi-tasking, comparable to how users work with modern web browsers.
  2. Key information delivered at your finger tips, rather than having to go out and find it. Creating reports is a tedious task. So we introduced widgets that pull essential data from the database, web pages or apps onto a workspace. We bundled a few in the product but it is easy to add or build your own.
  3. Easy and direct searching & filtering. In the jungle of ever growing data volumes, search is more important than ever. So we looked at the essence of ERP data views, which are grids and applied column filters to them. They let you search on any attribute or combinations thereof, in real-time.
  4. Comparing documents and viewing parent-child documents in a single view. This is the so-called Master-Detail view. Many ERPs ony let you look at either parent or child records but never together, forcing you to continuously switch back and forth while doing your work. So we decided to build a new type of component that combines parent and child data in any combination grid-grid, form-grid, grid-form or form-form. You can choose the screen layout by dragging the splitter bar and maximizing levels.
  5. Editing in-grid. Editing data in a grid must be as easy as editing a spreadsheet. Full stop. So that´s what we build.
  6. Fast and responsive user interactions, comparable to client applications. Although this cannot be marked purely as a capability, it is a quality attribute that is important enough to count as a requirement that must not be negotiated. It was clear that this was going to be quite a challenge because Openbravo 3 is fully web based. 
Here is what we defined as the user experience vision which later was decomposed into smaller components in this document.

Saying No

The holistic vision set the framework against which all decisions were to be measured. This makes it easy for the designer to judge ideas but at the same time very hard for others to see their ideas being rejected for no other reason than that their ideas don´t contribute to the vision.

If you want to design a great user experience, which in its essence means simplicity and productivity, you need to be on your guard at all times for the influx of nonsensical features. Stuff that comes from people that say “our competitor has it” or niche users that want specific features that only 0.01% of the users would ever need. Stuff that comes from users that already worked with ERP systems “before you were even born”. That kind of stuff is what you need to repel.

Every feature you add clutters the user experience, needs to be maintained, upgraded and documented and eventually will make both the product and the company less agile. When in doubt, you need to say no (and then buy your own drinks in the pub).

Working in an Aquarium

In the design process of Openbravo 3 we took full advantage of the open source character of the project. We have gone from early user studies, through ideation into numerous concepts and even more iterations, ultimately leading to prototypes and the final product. All this was done with close involvement of our community via concept sharing, surveys, voting and forum discussions.

Other than designing behind closed doors, we have continuously been sitting in an aquarium, not being afraid of proposing crazy or sometimes even naive solutions. While we were sketching screens or flows, you were watching over our shoulders while throwing comments or ideas at us and pulling the chain when we were about to stray.

That is why we are so confident that Openbravo 3 is a product that will make our end users smile, our customers productive and our business partners successful. We have listened and delivered. No focus on short term wins, gimmicks or marketing tricks, just a product that our users will love. They are the ones that will need to work with our software many hours a day and not designing for them first would have been a cardinal sin.

Agile and Lean UX

Agile development has been around for more than a decade now and has proven its value. It has shifted the focus from processes, documentation and project plans to collaboration, flexibility and working prototypes. When executed well, this results in lower risk and higher quality products.

It is common in agile development to work on features in short cycles that always result in a working piece of code. All three stages (design, build, test) of the development process are supposed to be executed in the same cycle that sometimes does not last longer than a few weeks. This is what I believe that agile development got wrong because UX design needs to start much earlier to be able to iterate, evaluate (with users and other stakeholders) and sculpt the designs. Working one or two cycles ahead of the development pack, UX can deliver fully tested, ready-to-build designs that do no have many surprises for the user nor the developer.

While delivering design work it is really important to produce detailed storyboards, mockups and flows instead of specifications documents. In fact, in this project I have hardly produced any documentation at all because the prototypes were the ongoing specs. Depending on the complexity of the design the designer needs to choose the appropriate level of fidelity for a prototype. For Openbravo 3, this ranged from pen & paper sketches to wireframes to Photoshop mockups to HTML clickable prototypes. The goal of these design deliverables is always to communicate the behavior of the application (feature, functionality) to the stakeholders and developers.

By making the prototype the ongoing spec it is always clear what is going to be built, whether it is going to work, whether the user understands it and whether the developer is able to build it. An example of a prototype that was produced to demonstrate the new master-detail interaction behavior is this clickable mockup. It was used for usability testing on end users but also by the development team to assess technical feasibility and to build a more sophisticated prototype that proved we could do it. You can read more about this approach in the excellent article Lean UX where Jeff Gothelf discusses why designers should get out of the deliverables business and back into the experience design business.

Letting UX work ahead of the development team together with using UX prototypes as the ongoing spec, is Agile UX at its best. We did this for Openbravo 3 and I can recommend this to every development team that works with UX practitioners.

Sticking to the Vision

Paolo Juvara already mentioned in his Emotional Review of the Openbravo 3 History that the final delivery of Openbravo 3 has stayed so remarkably close to the original vision and to be honest: this surprised me as well. When we first crafted the holistic vision for the user experience of the "future Openbravo", I could only hope that the final result would get "close enough" to the original design.

In most organizations, visions get blurred on the way and ideas bounce because of technical, organizational or even political disturbances. It would not be the first time that the final outcome of an assignment has not much to do with the initial customer´s request or idea. The worst of all cases is hilariously depicted in this classic. But we managed to defy all those evil forces and delivered what we wanted which says a lot about the innovative mindset of my Openbravo colleagues.

Shipping is all that matters

Good ideas are abundant, good products are not. We have always kept our feet on the ground and aligned our strategy towards shipping, because in the end that is all that matters.

On the way, we had fierce debates, disagreements and resistance but in the end we managed to find a solution that works well for most. You can't make everyone happy so we did not even bother trying. In fact you don't want everyone to be happy as this means your product is most likely so watered down that it can't be good. It's better to make 80% of the people very happy than 99% a little bit happy. Very happy users become fans and fans are loyal.

Big Thanks
I want to end this blog post with big thanks to Paolo Juvara (our CEO) and Ismael Ciordia (our CTO) who gave me the trust and freedom to design what is best for our users. The other big thanks goes to my amazing colleagues in the development team who made it all happen and all Openbravo community members who contributed so selflessly.

And now...

Get out there to try, download, implement, sell, share and enjoy Openbravo 3