CleverDrops Branding, User Experience and User Interface Design

Developed by Julian Stevens, CleverDrops™ is a free reminder app for smartphones and tablets, designed to help with a patient’s aftercare regime.

The drop and medication regimen for people can be confusing, especially for those with poor vision. The brief was to design and develop a smartphone app to be used by patients for their surgery aftercare and a web app, to be used by clinicians, to create personalised drop/medication regimes. These regimes are pushed to the app after performing various eye surgeries.
When a patient has treatment, for example LASIK - a specific procedure of laser eye surgery - the clinician uses a QR or text code to download the patient’s regimen to their smartphone.
The iOS app
The main purpose of the app is to send an alert, like a text message or wake up alarm to remind the patient of what to use and when. An image of the drop/medication appears on screen and the patient is asked to confirm they have taken the required dose. The patient is in control of the first and last reminder of the day. This allows the aftercare regime to adjust to the patient’s lifestyle, ensuring they receive enough medications throughout the day but not sending reminders while they are asleep.
The web app
The web app is used by the clinician to create specific medication regimes. Login is required and the web app is used to set up a list of medications to be used by the patient and the frequency of use e.g. LASIK-1 regimen used to patient John Doe number JDS15000.
The smartphone app feeds information to the web app, gathering useful data on behaviours surrounding patients taking medications. This is with a view to audit treatment data to improve outcomes and ultimately, patient care.
The CleverDrops™ app was designed to be an easy, convenient and practical way to keep on top of post-treatment routines.

I worked closely with a project manager who I looked to for timings and an iOS developer who guided me on what and how I needed to provide assets for the user interface. Both were based in our London office.
We had several kick off meetings with the client, Julian Stevens, and remained in constant contact with him throughout the duration of the project.
The Logo
Firstly, I was responsible for creating a logo. Julian already had a particular colour he wanted to use and a font, both which stemmed from his own personal branding.
He simply wanted CleverDrops™ spelt out, but I suggested that the O be replaced by a simple drop symbol. Using a colour to compliment the original green, my intention was for the drop to be the iconic symbol for the brand and for CleverDrops™ to be recognised by the droplet alone.
I used the droplet as the app icon and as a small animation on the startup screen of the app.
Whilst working with the developer, I created a basic site map and wireframes for both the iOS app and web app using Adobe Illustrator.
Using annotations, I was able to quickly explain through visuals how I wanted the user (who will potentially have reduced vision) to navigate the app as easily as possible.
The personas were of a broad nature. Varying aspects were considered, such as age, profession and language barriers. In light of this, the design of the app in both experience and look needed to be simple, clear and clean.
The navigation needed to be generic to the operating system (in the first instance iOS) so the user of that device already had a basic understanding of how to make simple actions, like getting from A to B with as little taps as possible. This was a bit of an assumption, but one that could be tested by early users on the first launch.
Accessibility in regards to the users was highly considered when designing the user interface.
The web app was only required for desktop so tablet and mobile didn't need to be considered. It did however still need to look part of the CleverDrops™ brand.
UI Design
The app
Accessibility was key when designing the user interface for CleverDrops™.
The users would all be recovering from either laser eye surgery or other eye related treatments, so vision was guaranteed to be impaired.
With consultation from Julian it was determined that the app be dark in colour so as not to be too bright for tired, sore eyes.
The brand font, John Sans, is white and large enough to see with good contrast on the dark green background.
All medications had their own photography session at Moorfields Eye Hospital in London and were retouched so labelling was crisp and clear.
The web app
The users of the web app are only Julian himself as an administrator and specially selected clinicians in the field who would be able to use the web app only if invited to do so. The system was only required on desktop.
The interface takes a standard dashboard layout with a menu across the top of the screen and sub menu down the left hand side. These 2 areas remain fixed with the main content window - on the right - being the only scrollable area.
The brand stays consistent to the app by mirroring the same dark appearance and high contrasted, crisp typography and icons.
What do patients say about CleverDrops™?
The CleverDrops™ app is very clever. It is really useful and simple to use.

Team Credits

Purdie Gibson

  • Message
  • Senior Designer

Project Tags

  • design
  • ux
  • uidesign
  • branding
  • appdesign
  • iosapp

Inspired by this project? Showcase projects you’ve worked on and inspire other people.

Post your project
Purdie Gibson
Senior Designer