Why and How I redesigned the Cherwell V10 UI using the Laws of UI/UX Design

The latest Cherwell V10 design overhaul is a vast improvement on the previous UI. 

I imagine that it was built with everyone in mind i.e. a generic design with quite neutral safe colour scheme (if you’re curious about the benefits of changing the colour scheme only, I have another article for that here), so well done Cherwell on that.

As you’d expect this leaves us plenty of room for personalisation and improvement of the design.  

Here’s where the fun begins.

Let’s take the current Incident design, add a bit of spice to it, and support our changes with principles and laws in design practices.

It’s important to note that best design practice does not just mean the latest trend in design, it also means meeting the design and aesthetic cognitive behaviours that humans have naturally had for 1000’s of years. This means I have not merely designed my own way down my happy path, as behind each design choices there is some proven logic.
Also note that I mainly focus on UI (how it looks) and not so much on UX (how it works) as for the purpose ofthis article I do not want to change functionality, just the aesthetics.  

So, the new OOTB UI:

The good parts of the OOTB design:

• Clean, great use of white space, or as in the case of banner, blue space
• Good use of font weight and colour for hierarchy
• Grouping: Status section | SLA section | People section
• Use  of symbol to clearly represent important information for Priority. Also green circle suggests that P3 is a positive priority.
• Underline of “Next:Begin Work” suggests the text is active. This conforms to Jakob’s Law whichstates that users expect familiarities with other interactions so they can instantly recognise what elements do
• Removal of Service and   Category options. This aligns nicely to Hicks Law by keeping choices to a minimum, the law states ‘The time it takes to make a decision increases with the number and complexity of choices available’.

How then can the UI be improved?

For illustration I will include mock ups of the suggested element changes separately, first without consideration to the overall design.

• A button to replace the “Next: Begin Work” link. A button would make it easier to recognise and target when pressing it on smaller devices.
  
  The psychology around this stems from Fitts Law where psychologist Paul Fitts states: ‘The time required to rapidly   move to a target area is a function of the ratio between the distance to the target and the width of the target”.

• The Law of Closure, a Gestalt Principle recognises that we prefer complete shapes, and whilst our mind will automatically make effort to complete the shape, it still takes extra     unnecessary cognitive effort.
  
  Look at the Priority symbol in the image above.  
  
  Whilst being a complete shape, there are still 3 elements  that make up the ‘P3’ symbol: the circle border, the P3 text, and the white fill.
  
  This can be consolidated into just two elements, as follows:

• The Law of Common Region is another Gestalt Principle where we group elements that are in the same closed region.
  
  Whilst the OOTB Cherwell design makes good use of white space to achieve this, it below further groups the common areas of Status – SLA – People/Date information using colour separation:

• Drawing yet again from a Gestalt Principle, The Figure/Ground(Multi-stability) principle shows that we dislike uncertainty, so we look for solid, stable items especially to contrast foreground and background elements.
  
  In the below design the use of white containers with light border and drop shadows against a blue background leave little doubt that the Details, Questions and Actions are clearly set out in their own right:

Whether you agree with my design choices or not, please bear in mind that design is subjective, and that’s fine.

More importantly, playing with design options through prototyping is an important part of the UX Design Thinking process: Ideation.

So on that note I’ll leave you with another natural reaction within all of us: Visceral Reactions.
This is an instinctive response to a stimulus or experience created by chemical messengers in our brain. We make a split-second decision about how we feel about a particular design.
In this next design, the use of icons were used to achieve just that. Let me know what you think:

Thank you for reading.
‍
If you enjoyed this article even if it’s because it’s just a little bit different, please give me a mention and feel free to share it with your network.