Redesign breathes new life into open source project

Good design matters for open source projects

Posted 02 Feb 2015 by 

up
47 readers like this
Woman sitting in front of her computer
Image credits : 

The design of everyday things is an important cultural movement. Of that, most of us have no doubt. We want our tools to work flawlessly and naturally. And open source projects are catching up on this too.

Like, Elementary OS, an open source operating system that hopes to make the Linux desktop accessible for everyone. And many other open source web applications, like Ghost, Taiga, and the upcoming Flarum. Also, BeautifulOpen is a collection of open source projects with great websites and a great source for inspiration. They all have designers on their core team.

Taste

A couple of months ago, my team and I decided that we needed to refocus on design for our open source Enterprise Resource Planning (ERP) project, ERPNext. ERPs are known for having the worst user designs, and we wanted to change that.

Usability in ERPNext was already better compared to many other products, but we knew we were far away from having design as a strength.

Our team uses Apple to develop our applications, and we use GitHub to manage our team and collaborate with the community, both of which are very thoughtfully designed. It was only a matter of time before we started comparing our designs and user experience to what we were used to. We also read about some of the work of great designers, like Dieter Rams, which helped us build a strong taste for good software.

The brief

The next step was to make a brief for the project. Since we already had a fairly mature project, we didn't have to start from scratch.

Since ERPNext is a data-driven application, the two most important screens are the list and the form. A list is a list of anything, like an invoice or a to-do. A form is the actual invoice that you can create and view. There were a bunch of other screens (the homepage, login, setup pages, and charts), but we kept the focus on the two most important screens.

We took a bunch of screenshots of our current design, highlighting these screens, and posted them as a GitHub issue. We also highlighted the fact that we did not want to go for a radical redesign, keeping our current users in mind. What we really needed was clean-up and polish.

ERPNext List and Form views screenshot

The designer

Now that we had a good idea of what we needed, the next step was to identify a good designer. This seemed to be the most difficult step.

We are not a part of any design ecosystem, and there was no mentor we could ring up and ask for recommendations, but we had two leads. Three years ago we worked with a wonderful design firm, Studio March, on our website. Studio March is based in Pune, India, about 150km from where we are based. The other lead was Dribbble. On Dribbble, we looked up screenshots of designers who had worked on business apps, invoicing apps, or project management apps. Then, we had detailed talks over email and Skype with three designers. Because we already had a brief, we found that a lot of designers were ready to talk.

Finally, we shortlisted two firms: Sweden-based 3Drops, which we discovered on Dribbble, and Studio March. Both companies agreed to work within our budget, and based on the brief and the budget, they estimated around 2-3 weeks of work to complete the project.

Ultimately, we selected Studio March. We loved the work Studio March had done for us in the past, and we could meet face-to-face with them. They also promised to deliver the screenshots as well as a CSS-based style guide, which would be very useful for us to extrapolate to other screens. So we signed a contract and went ahead.

The process

It's always fun to understand the creative process of different people, and we really enjoyed our experience with Studio March. First, the head of the company dropped in had a detailed chat with us. He got to know our team, where we come from, where we want to go, and what our tastes are. Next, the designers spent some time playing with the app in its current state to understand all the different ways a user might discover, use, and navigate through the app. Then, they went on and started fleshing out the screens from scratch.

ERPNext wireframes and detailed screenshots

In their redesign, they simplified a lot of the visible functionality. They had the courage to throw away things that were not really needed, hide menus that could be hidden, and make better use of screen space. Suddenly, the app felt a lot lighter and more natural. Each iteration added more functionality and depth.

After a bit of back-and-forth, we realized that time was running out. After two or three interations, we decided to go in and implement some of the designs to get a better understanding of how they worked. In a span of two weeks, we were able to mock up some of the key functionalities in the design. We removed a toolbar, added a sidebar, cleaned out the top menu system, and added breadcrumbs. As soon as the design started to come to life, we realized just how great of a job the Studio March team had done—there was very little we needed to change from their original designs. Their passion and attention to details clearly paid off, taking the user experience up several notches.

Feedback

After we nailed down the important screens, we decided to make a small video to introduce the design. It was initally just for our monthly Open Day presentation, but we spent a couple of hours polishing it on Keynote and iMovie. Then, we sent out the video to the mailing list and got awesome feedback. It was a great way to notify the community we are working on something new, as well as create some buzz.

Conclusion

We learned that executing good design is not impossibly hard or expensive. The entire redesign process was surprisingly smooth. We went from preparing the brief, to selecting the designer, working on the designs, and releasing them to the community in a span of two months. If you're working on an open source software project and don't have designers in your team, we hope this inspires you!

Here's a working preview of our new design, which is due to release in mid-February.

12 Comments

nicubunu

I'm not sure I get your point, what is the inspiration an Open Source project should get? Hire a commercial company to do its redesign in the classic proprietary way? Use closed proprietary tools to make even its simplest presentation (I noticed your emphasis "polishing it on Keynote and iMovie").

Seriously, for an Open Source project I have better expectations, like engaging its community of users and developers into a major redesign. It would be awesome to make some experienced designers to care about your project and get involved in the community.

Vote up!
0
Vote down!
0
Sukh

Good design attracts good designers to the community.

Vote up!
1
Vote down!
0
rmehta

Nicu, thanks for your thoughts. When we started off, getting a high quality design was seemed like a very hard thing to do, but it turned out to be a lot simpler, so we wanted to share that. I truly believe that with good design, open source projects can have a much bigger impact.

Regarding engaging the community, it is a great point. If we had good quality designers in the community, we would not have gone with a third party. To be honest, we did not have much control on the re-design either, other than the brief, which was open to the community. Given our budget, we did not have room for many iterations. But it turned out to be pretty good. The design is free (with the same license) and anyone can modify it they way they want. But yes, we could have gone and let the discussion simmer for a few days in the community, which we did not. Will surely do that next time.

Vote up!
0
Vote down!
0
David E Jones

One more open source oriented approach to good design is leveraging the various open source projects that are oriented this way. In Moqui Framework (www.moqui.org) we chose to use the Metis Bootstrap Admin Template (https://github.com/onokumus/Bootstrap-Admin-Template) which includes many other open source web UI projects including Bootstrap, jQuery UI, and dozens of open source widget projects. After doing this the author (Osman Nuri Okumuş) even contributed by submitting a pull request to update Moqui to use a more recent version of Metis. While Metis has been part of Moqui for a couple of released versions now, those changes are part of the next release of Moqui Framework (1.5.0).

Vote up!
0
Vote down!
0
rmehta

David, ERPNext is also built on a bootstrap based framework. Its called "Frappe" https://frappe.io. When we started off, there was no standard framework like Django so we had to build it with our own. Considering the amount of work that has already gone in, it is a very difficult switch now.

Vote up!
0
Vote down!
0
bilas

Design is important but definitely not priority number 1 for an ERP project. Your product don’t have basics features such as a good routing, an MES system, a change control…no planning system…I can keep this list long..but then it’s an open source system and we should appreciate your effort rather than finding its limitations…good job done but put effort on functionality rather than look & feel.
Second educate your developer / content writer about real manufacturing business …ERP is 90% business & 10% IT…I was going through your user guides and it looks so stupid….you guys are suggesting not to use simple numbers as Item number but to create item numbers with logic !!!...Anyway I would suggest you guys to go through some basic APICS training..

Vote up!
0
Vote down!
-1
rmehta

Bilas, you will be surprised how many companies need an ERP and don't need advanced MES and routing. ERPNext does have a planning system though. The goal is to make ERPNext accessible to everyone and those who can only pay big money. You should checkout some of stories shared by the users (https://erpnext.com/conf/videos#user) to get a better idea.

Vote up!
0
Vote down!
0
toh

These days, anybody is writing any stupid software & calling them ERP even without knowing what an ERP is. I agree with you, To create a good ERP system, the team should have a lot of experience people from manufacturing, supply chain & finance background. Few bunch of jokers without any business knowledge, write some useless codes and promote it as ERP. Then few other bunch of jokers use it and complain ERPs create more problem than they solve.

Vote up!
0
Vote down!
-1
rmehta

Don't want reply to the insults, but you should at least check the product and the community before commenting https://discuss.frappe.io/

Vote up!
0
Vote down!
0
srikanth_adiga

The comments are deplorable. All great products were crappy sometime. As long as you have users and you are listening to them, nothing else should matter. Keep up the good job Rushabh.

How much you can expect from the community also depends on the size of the community. Typical niche products wont have tech savvy community members who contribute to graphics design, UX layout, and sometime even code. They will be more than willing to contribute ideas, feedback, take part in UX testing, etc.

It might be an open source product but for the developer it is still his/her business. You cannot wait and hope for some community member to contribute. Hiring a professional designer and getting community feedback is the more practical thing to do.

That is what works for us too.

~Sri

Vote up!
0
Vote down!
0
kesab

@ Srikanth Adiga
I don’t agree with you. Understand ERP is not an IT product but it’s a business product. I think erpNEXT is not bad but it’s in the same class as openBravo, openerP, etc. My problem with all these products that they don’t care about the basics supply chain/manufacturing/retail practice. They just write some kind of IT product , write CRM, write CMS…write Games…what ever you want…but don’t tryERP, you need to have business knowledge…Why am writing this…because I have been through a lot of issues in making people understand what they are practicing is wrong & at time illegals.

Few months back , one of our client brought a new company in France. As the company is in Oracle we went there for implementation. They have been using a local product and they have been using it for 1 decade. That product debits liability account as soon as you approve & send a PO….Can you imagine that…The AP Clerk has been practicing this for a decade…You cant imagine how much effort we had to correct all their wrong business practices..so I really hate all these crappy ERP products. They are teaching wrong practices and going to make life difficult for others..

If you guys are serious then have few accounts, supply chain and manufacturing experts. Get your product process review by them.

Vote up!
0
Vote down!
0
aambernath

Maybe , what after all a small scale business is simpler process! And I think ERPNEXT design concepts arise from that need. There are more than enough software to support the complex business processes described by many here. The satisfaction of many business users is a testimony to it. I am a consultant myself and in this day and age of entrepunership this software has its place.

Vote up!
0
Vote down!
0

Rushabh is the founder of ERPNext an Open Source ERP product for Small and Medium Sized Businesses and loves writing code in Python, Javascript and HTML/CSS. He lives in Mumbai, India and you can find him on Twitter @rushabh_mehta. Projects at GitHub