Enhancing UI – IPA CPD

The IPA (not the ale) are a marketing agency that Story UK are part of. They have a system built to allow members to track their CPD entries. I need to submit a certain amount of work each year that ‘proves I’m learning’.

Unfortunately, the site that I – and other members – need to use is pretty poor in terms of UX.

I thought I’d have a go at enhancing the UI.

The current version

I’ll not dwell too much on the failings of the current site as I’ll go into more detail later, but to summarise, the interface suffers from

  • Relatively boring font choices
  • Buttons looking like headers
  • Headers looking like buttons
  • Too much – and somewhat irrelevant – information being displayed on the page
  • Lack of visual hierarchy in general

What I aim to do is resolve each of these points, and explain the rationale behind each of them as I go along.

Quick disclaimers

  • This design refresh doesn’t take into account any user journeys, research or such like. I am simply redesigning the elements that exist currently
  • I am making some educated guesses along the way and have no affiliation or communication with anyone at the IPA
  • All the opinions are my own. I’ve probably got some bits wrong 🙂

Let’s get started

First things first, the site is pushed to the left of the screen (you’ll see that on the IPA main site too), as well as being really quite narrow by modern standards at 970px.

I therefore started by increasing the width to 1100px and would centre the content too.

Fonts

The IPA use a very unimaginative selection of Arial and Georgia on their site. Considering the wealth of fonts available now through Google fonts, Typekit, MyFonts, Fonts.com and a plethora of others, it would seem like a simple choice to make to use something a bit more pleasing on the eye.

For the design of the page, I’ve chosen Proxima Nova. I find it really versatile and flexible whilst remaining clear and professional, with a relaxed feel about it. It will help to bring a little character to the page too.

The header

Whilst I hadn’t intended to change the header as part of this post, without doing so would leave the UI looking half finished. The current version feels unbalanced. By changing the following points, I think the header looks a lot cleaner:

  • I added a drop shadow – this allowed the active menu bottom border not to ‘float’. It also made the whole header to appear as a separate element
  • I lightened the menu links to increase prominence of active/hovered item
  • I made the search available straight away rather than having to click an icon to expand
  • I removed vertical ‘pipes’ splitting items and added space instead resulting in a cleaner UI
  • Finally I placed the account into a separate item to highlight it

I’ve not removed anything here. Just re-purposed and positioned the existing elements.

Content Header

Getting into the nitty gritty of the main content section, there’s quite a bit that I didn’t feel worked that well. I’ll include an image again below, but there are a few items to point out first.

Tabs

These split content between CPD diary, books read and appraisals. These were situated halfway down the page and didn’t appear to be that clear. I’ve designed them so that they are visually clearer now.

Progress bars

The language used on these was slightly confusing so I’ve tried to make them read a little easier. Beforehand the hour number didn’t really have much context, so I’ve now included this in a sentence. The design has also been tightened up so they consume less vertical space.

Removal of right hand column

This seemed somewhat redundant for the following reasons:

  • The information in the dropdowns shouldn’t really be editable by the average user (me) as it would be my line manager who amends these details
  • The title is duplicating some of the information found on the left of the page so that could be removed
  • The ‘Edit my diary’ button just refreshes the page so was not needed

Other changes

I’ve also changed other small elements of the interface such as:

  • Adding a piece of text that welcomes the user by their first name
  • Moving breadcrumbs outside of the content area

The result

Making these changes to the header of the content section has allowed a somewhat bloated UI to appear clearer and cleaner. It may look like I’ve removed a lot, but I felt it was unecessary to include most of the elements.

 

Adding an entry

The primary reason for members coming to this section of the site is to add items to their CPD diary, insert a book they’ve read or add an appraisal. For my example, I’ll be using the CPD entry as the only real variants are the form fields required.

The primary CTA

On the whole, this section initially feels hard to use. The main CTA is to ‘Add a new diary entry’. However, the button looks more like a header. This is not the first place a user would look when coming to add to their diary.

By adding space around the primary CTA, as well as making it look like a button, we can make it clear that this is the main point that users should be interacting with.

I’ve also only used this style for the button only once. I think a UI should have a clear CTA and using the same style repeatedly leaves the user feeling overwhelmed and confused (in certain circumstances).

The form

The form is poorly designed. I felt it would be enhanced by changing the following:

  • Amending the padding on form fields as it currently feels small and dated (the same goes for the form in general)
  • The date input opens a calendar pop up but the user wouldn’t necessarily expect this. The addition of a calendar icon would help the element to follow design patterns
  • Rating feels limited – It’s either awful or brilliant. Would be good to add a wider scale here
  • Your Company – I don’t really understand why this is here, and even less why it’s a text box. If you were employed by a few companies, then it should be a set list at least. I’ve kept this in the UI, but in my experience you’d have a separate login for a different company so would probably benefit from removal

The result feels more up to date with space being given to elements, a more open rating system being implemented. Again, the CTA is clearer here too.

Whilst my amended element of the form UI may look a little sparse and empty on its own, when placed into context on the rest of the page, it feels far better located.

The list of entries

Once you’ve successfully added an entry, it gets placed into a list. It’s a fairly common practice and allows the user to see it’s been added to their diary.

The design of this element is poor however. The information on it seems cluttered. By changing a few elements and using some basic design principles, the panels could be enhanced and become easier to scan/use for the user

  • Remove the description (in my screen thats the URL) as that can be amended or viewed when editing. The title should provide decent insight
  • Hide ‘delete’ button. This feels like a secondary CTA and could be actioned when the user is editing their entry
  • Use icons for the date and the CPD hours items

The final design

Based on all the changes made above, we now have a new UI for the CPD entry page. By using a few basic design principles and giving items more space around them, the design looks cleaner and easier to use.

I’ve not removed too much from the UI – only items that I believed weren’t needed. It would be interesting to evaluate the changes I suggest, but they’ll not ever be implemented.

Other points that I changed to the UI to make it a little more pleasing on the eye were:

  • Using a slightly darker shade of green to enhance contrast
  • Adding a slight gradient to the buttons and background strip
  • The right side of the page looked sparse so I added a simple IPA watermark for balance
  • Made the year accordion controls a little clearer

I hope you like the changes I suggested and the benefits that simple tweaks to UI can make. Nothing is vastly different, but I think that by doing so, the UX would probably be enhanced.

 

Thanks for reading 🙂