Why and how I rebuilt the whole of
Cherwell Service Management

Having asked ourselves “what could we have done to avoid this” we could have easily accepted or placed blame for the misinterpretations that occurred during the scoping for some development pieces.
‍
But the bottom line was, we were simply missing the absolute involvement of the customer from beginning to end. How could we achieve this?

Using prototyping.  

In the 2020’s, prototyping is now widely used in app and webdesign. Tools exist that facilitate ‘rapid prototyping’.  These tools produce high-fidelity prototypes,which allow us to make the prototype look like the real thing.

They are interactive – you click on elements and something happens. They can be shared instantly for the customer to leave collaborative feedback from within the prototype itself. 

Prototypes make sense.  It occurs before expensive development and reduces risk by involving the customer.

But to be able to assemble high-fidelity prototypes quickly and cost effectively, first there is some pain to go through. Assets, components, elements – call them what you like - we need to have them ready for quick assembly into a workable representation of the development we intend to build. 

Where do you start?

The incident object. Great. Ok so let’s start with the header, what is the first thing on the Incident screen I’ll need to recreate? The Cherwell logo. Looks simple enough, right?

Wrong.

Unless you are in the design game it’s more difficult than one might think. The ellipse and red fill is quite straightforward enough but those stripes are deceptively difficult, ugh. Normally I’d use and merge shapes to create my desired shape, but the stripe does not resemble any standard shape.

There’s only one thing for it – the Pen Tool.

Fortunately I could pull from one of my previous life's experience where I learned to use the Pen Tool – one of, if not the most difficult tools in design applications.

It took me a while, and I’m not sure I did it the best way, but I did it.

Why go through all this pain? Well because I could then re-use my Cherwell logo for any prototype, illustration or marketing I wanted. And blow it up to any size too.  

So I could do this:

Or this (although I can't say I'm sure why):

But now it’s done, it’s my asset forever. Or until Cherwell change their logo again.

After finishing the header bar, next up it’s the toolbar:

For the same reasons as the logo, every last pixel of the toolbar had to be designed from scratch. Admittedly it’s not the exact Cherwell one as all the icons are black, not coloured (I’m not going that far!). I took some of toolbar icons FlatIcon.com but many I built by hand in Adobe Illustrator, such as the ‘Go To First Record’ one which I’ve broken apart to illustrate:

Again, once complete the toolbar will become an asset, to be reused in other screen designs.  

Things were getting easier by now, I was on a roll. I won’t go too deep into detail but I’ll list some elements which initially didn’t occur to me that I would have to build by hand:

Listbox. Including dropdown button (and shading):

Checkbox. And of course the check itself:

Can you guess what this is?

The grab handle of a vertical scroll bar.

I proceeded to build the rest of the Incident objects.
The tabs and scroll bars took a bit of time but once I got the text and fields (List, Related Item Picker, Description) done and then the buttons (Lookup, Go to, Zoom, Save) it was starting to get easier and I could copy and paste - no time to waste - my previous efforts. 

With the incident finished, finally I could move on to the (not) so simple task creating the other objects: Change Request, Problem, Configuration Item etc. Also not forgetting Dashboards, Dialogue Boxes, Search Screens……

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.

Lookout for the next articles in this series: Part 2 ‘Why, but not How, I rebranded Cherwell’ and Part 3 ‘Why and How I redesigned Cherwell’.

Thank you for reading.