CiviHR's New UX & Visual Design

2017-01-17 03:21
Written by

CiviHR is built on top of CiviCRM, and as such the launch version (released in Sept 2016) borrowed a degree of the CRM’s workflow and interface. However, as part of further developing and improving on the initial CiviHR product we’ve made lots of little changes to the look and feel that will add up to make a big impact on our user’s experience. 


User experience design is important in any modern software application. It covers everything from the way that users are able to navigate through the application itself, to the design and layout that they see on their screens. For the past few months we’ve been working hard to improve CiviHR’s user experience and interface and thought it was about time we pulled back the curtain to show you some of these improvements. 


In order to do this we painstakingly isolated all of the components that go into making CiviHR, from buttons right through to drag and drop fields, and started cataloging and redesigning them in a style guide, the results of which can be seen here:



As one of CiviHR’s main goals is to make the complex task of HR simple and easy there are an awful lot of these elements to design and build, but approaching the task in this way allows us to see how each individual elements sits within the whole, ensuring that we are able to give a consistent look and feel to the application.


As well as making CiviHR brighter and friendlier, the result of this has been to add more depth and contrast to create a clearer display on a greater range of screens; address our use of colour to create an inferred hierarchy to help with page structure; and improve the usability of key fields.


Below are a few examples of what to expect:




To view more designs, you can visit our demo page here: 

Blog post by Jon Screaton, Designer at Compucorp. 



Filed under
Click thumbs up if you thought this blog post was useful (login to vote or to comment)