Is Whitespace so evil in enterprise applications?
Rambase is a Norwegian fully integrated cloud ERP web-based (SaaS) system. It is a business software solution for manufacturing, distribution auction and e-commerce organizations which covers the whole value chain from sales to production and delivery. software products targeted at large, mid-sized and small companies.
Rambase was designed and developed using the best technology at the time. However with the passing of time, technology has evolved and so has the customer’s requirements.
1. Cluttered and distracted user interface
The above screenshot shows how complicated it could be for a user to perform a task. It was built using basic HTML elements and it lacks proper alignment. The seemingly randomly placed icons also contribute to an untidy look and feel.
2. Not supporting mobile devices and browsers
Mobile device support is a key feature for almost any application nowadays. Above user interface lacks sufficient whitespace for mobile responsiveness.
3. Inability to customize features
There wasn’t an easy way to customize the UI on certain user requirements. Therefore a developer have to involve on customization. Consequently this led to a lot of custom written code and rework.
What we did
We started off by introducing a design sprint. During this sprint, the team was able to bounce off ideas for a new user interface and collectively decide on how to proceed. One area of focus was on how to display the various levels of data using different design elements. With the new design we were able to reduce the distractions, reduce the number of steps to complete a task and aid users to focus on tasks.
Another key change we made was to divide the data into sections and thereby made it easier for the user to find information.
To make the app responsive and ensure it works properly on different devices, we have used Bootstrap and Kendo UI as user interface frameworks and customized it according to our requirements. Most of the browser issues were fixed by using HTML5 and CSS3.
We introduced the App Editor to give a good human experience when customizing the application according to the users’ requirements. Users can create their own apps or customize how the data is presented in an existing app. Possibly the best feature is, the user can build applications/components with minimum technical knowledge and in simply a few steps.
Now most of application have changed and users love new user interface with more whitespace and clean data presenting.