Once in while you could asked to knock-up some quick UI concepts. You could prospecting for a new role or your existing may require some sort of POC. Commonly, they’ll have nothing to give you in terms of a brief or a spec. This is pretty standard. It is even more common that you will be given a screen grab of a previous or current design that they are wishing to improve upon. This is commonly known in the field as a design challenge. The idea being to tease your creativity and tease out some new ideas.

“Here’s one I made earlier”

(Quote; Blue Peter, well known British kids TV show)

It has been some time since I’ve completed one of these but here’s an example from a couple of years ago. In the screen below that I was given to work on. It’s an interface used by a cyber security company to capture some staple data at a glance for the user.

---

The Approach

1. Pick a Tool

I would recommend using a tool you’re familiar with as the learning curve associated with learning something new will inevitably add time to your challenge. So go with Sketch, XD, whatever floats your boat. Choosing to ignore my own advice I decided to fire up a trial version of MockPlus.

2. Apply some UX fundamentals

This dashboard was looking some what cluttered and a bit dated. It was in need of a quick makeover. I took some time to review the challenge and the screen above and attempted to get into my ‘Experience Design’ head-space. I viewed it from a user’s perspective to see which elements in the interface were causing me the most cognitive friction. I was attempting to anticipate the overall feel for the user.

Next step…apply some of the principles of how a good user interface should look.

Familiarity

Being around things that you are used to is comforting. It’s no different for a user interacting with a computer system. We’re all aware of hamburger menus, screen windows or iconography, so we intentionally include familiar elements to our interface. We try to aim for that sweet-spot where an interface element is so inherently familiar that it almost renders it invisible to the user, allowing them to interact with it in the most seamless way.

Examples include the avatar to indicate that the user can view a profile page. The ellipse icon is symbolic of a menu with a list of actions for the user to select.

Colours

As we already know colours play a significant part in design. There are colours that will make you smile and colours to make you run a mile. However, it is a subjective topic and often divides opinion. In this case we need a palette that offers the user direction and association. For example the dark blue is associated with a button that is currently selected to illustrate to the user where they currently are within this portal.

Simplicity

This is quoted time and time and time again but the KISS (Keep It Simple Stupid) principle is key to a great UI. The best interfaces are almost invisible to the user. Here, we try to avoid any unnecessary elements and communicate to the user using clear language and recognisable icons.

Consistency

There’s consistency created in the layout and design throughout the interface to help facilitate efficiency. Once a user learns how to do something, they should be able to transfer that skill to other parts of the site. In my concepts below there is consistency expressed through the icons and the colours. The summary boxes that represent the primary data types to be displayed and the figures jump out at the user. In both light and dark concepts the pie chart and the other graphs are consistent in presentation.

Flow

By nature the human eye will scan a page from left to right, top to bottom. In both concepts below items have been carefully placed with considered spatial relationships to help draw attention to the most important pieces of information which should also aid scanning and readability.

---

Challenge complete

That’s it! Design done, ship it for review. It is always good practice to follow a few simple principles. It helps you to justify your design choices and instils confidence in your own abilities as a designer. For your eyes only, here are the two screens I submitted.