CareDirector v6 UI / UX Design


CareDirector v6 login screen

v6 is the latest version of CareWorks’ core product, CareDirector. CareDirector is a system for Community Health, Mental Health and Social Services. It enables clinicians and social workers to record details, processes and outcomes, of the care they provide.

Originally built on Microsoft Dynamics CRM 4.0 in 2008, running only on Microsoft Internet Explorer, for v6 it was decided to completely rebuild CareDirector as a standalone, browser-independent product.

Work began in early 2018 and the first release of CareDirector v6 was in April 2019.

As the UX designer I was responsible for all UI artwork and design, user experience design, accessibility, responsive design, front-end, and CSS.

Below are various screens from CareDirector v6.

Read On >>CareDirector v6 UI / UX Design is a responsive, HTML5, CSS-based website.

Primary users were female, aged between 18-43 and the majority of visitors accessed the site using mobile devices. With this in mind, it was designed using a mobile-first approach. The existing PHP powered site was deconstructed, old HTML markup and CSS removed, and it was rebuilt using the Bootstrap framework to manage the layout, components and utilities.

I was responsible for all aspects of the rebuild, including design, accessibility design, responsive design and front-end (HTML and custom CSS).

Add the Day – countdown app and widget for Android

Add the Day is an app I designed for Android. It is designed to count down to any event the user chooses, and allows the user to add a location for that event, the weather in that location, and background images.

I produced all wireframes and visual assets, and the Android XML layouts.

With Add the Day, the background image can either be a single image taken from the users’ gallery, a slideshow of images taken from their gallery, or a webcam image from the event location. The background slideshow, and the refresh rate of the webcam are both user-configurable, and the background is animated using a Ken Burns effect (a type of panning and zooming effect used on still images), to give it a live feel.

Events can be viewed in full-screen, in an app view, or as home screen widgets – the choice of widgets include:

  • 4×3 list view widget
  • 3×3 event widget
  • 3×3 stack event widget
  • 2×2 stack event widget

You can customise your event view to suit the event type. Local weather for sports events and holidays, and you can add local webcams as event backgrounds for a live view.

You can see the current weather conditions, and a five day forecast, in the event location on your app view, and on your event widgets.

Add the Day Screen Shots

9 – References

Section 1

Ideation (creative process). (2017). Retrieved 18 April 2017, from

Benjamin, A Design: How to define the problem. – Prototyping: From UX to Front End. (2017). Prototyping: From UX to Front End. Retrieved 18 April 2017, from Read On >>9 – References

5 – Wireframes

Using data sourced from earlier stages, including user surveys and interviews, task analysis, and personas, the next stage undertaken was wireframing of design concepts. This included ideation of designs, and creation of low-fidelity wireframes to be used for an early-stage interactive prototype, for user testing.

5.1 Design Ideation

Both team members, again working in parallel, agreed to produce separate designs.

The design concept by the author was based on word clouds, as popularised by blogging software, WordPress. A word cloud is “an image composed of words used in a particular text or subject, in which the size of each word indicates its frequency or importance.” ( 2017) Read On >>5 – Wireframes