The briefing from the people from Nedap was very clear, and well documented with wireframes already created. The briefing included a brief explanation about important subject related terminology, an extended description of the deliverables with very well documented wireframes of every page in a separate PDF with notes and remarks. The old site had been reviewed, analysed and user tested by UX designer Yu-Fang. It was her thesis for school which was used as base material for the new design of the site in terms of UX and design in general.
There was a logo design already in place, the branding was rather limited but flexible, which gave me a lot of freedom for the direction in terms of typography and color palette. The people from Nedap wanted me to design an inviting look. This meant a happy, cheerful color palette with illustrations and icons that reflected such style. It should appeal to young and old, to everyone really. The version that was in place could use a refresh especially in terms of the color palette. They were looking for something a bit more cheerful. This project was totally up my alley, and I couldn't wait to get started…
As some of you might already know I don't have one methodology that I follow or stick to. It just depends on the project itself. Each project is just different, and each project has its own angle to approach. Usually though I get started with the main page, with is often the homepage, and then I go from there to create all other pages. With this project however, the homepage was the last page I designed. The homepage would present or introduce the online application service, and so we first had to create its entire design. So it was obvious from the start that this page would come last. First I felt I had to set the mood of the design, and the best way to do that is starting with the creation of the color palette. While experimenting with colors, I also created the set of main icons, the icon for the main pages: Calendar, Messages, Dossier and Notes.
The client wanted to get rid of the rather dull color palette. There was this hot pink of the logo, which was rather flashy in combination with purple. I didn't really like this combo, so it was OK for me to change it. On the other hand I didn't want to destroy it completely, and turn it up-side-down by choosing something completely different. After all the site was already used by so many people, improving the color palette would be perfect. However in my experimentation (see image below ) I did try to use them at first just to see how far it would take me, but in the end I decided to drop them. Instead I decided to subtly change the hot pink and purple so they would fit better in the new palette.
The old color palette
The new color palette
Looking at the old colors, I felt they were a bit too hard for the eye. So I changed the magenta into a softer old rose, and a softer purple. Since this project needed a broad color palette, I chose a few bright colors that go well with these 2. It was my intention to use different accent colors for each section of the site, and use the soft old rose as highlight color for text links and buttons.
As for typography, I thought the typeface Macha would be a perfect fit. It's a typeface that reads well on screen, and the look and style fits perfect with the overal design I had in mind.
One of the fun parts in this project was the design of the icons. The site needed an icon to identify each section:
- Dashboard (which is a Profile subsection)
- Notifications (which is a Profile subsection)
- Tasks (which was added later after the project was finished)
- Documents (also added later after the project was finished)
Besides the menu icons there were a few other icons such as document icons that serve as attachment icons when leaving a message:
- PDF document
- Excell document
- Word document
- Generic document
Then for the Dossier section I needed to design icons for:
- Bulletin Board
The other fun part was the creation of the illustrations. The sign up procedure needed some extra clear explanation as there seem to be confusion on the old site. People often got confused who's name and details they had to complete: their own, being the caretaker, or the name and details of the patient. The new site would work with a registration wizard, taking the user step-by-step through the sign up process. The illustrations would make completing the forms extra easy and clear to follow. It would be clear at all times when you had to enter your own details or the patient, plus the option to add extra caretakers, and also link a care provider to link a medical dossier to the patient, and to be able to communicate with the care provider through CarenZorgt.
Registration wizard & Illustrations
After the section pages were finished, we moved on to the design of the registration wizard pages. The process needed extra attention to help solve the confusion as mentioned before. So the briefing received was very well presented, and all situations were taken into consideration. Below is an image that shows all the different screens I had to design:
The wizard starts with a short introduction of the service divided into 5 slides, and then it takes the user step-by-step through the process. Further below you'll find a couple pages of the registration process, but you can view all of these steps here on Bēhance.
The idea was to explain and show each step in a very visual manner so things would be really easy to follow and set up. To avoid the confusion of 'who is who', and to make it extra clear, we also identified each party involved by a color. There were 3 groups each with its color:
- The patient, or so called caretaker: green
- The people helping or so called caregivers: yellow
- The medical facility, or so called care provider: soft teal blue (same color used for the Dossier section)
For the registration wizard I created these characters that I thought would give the site this extra friendly look. The design style I had in mind was simple in terms of shapes and lines, almost iconic like, but still a bit playful. The faces needed to be very clean and simple, but with expression. I also wanted the faces to appear happy, but the patient had to look a bit sad as well on the first slide as he could use a helping hand and lots of care. I was thinking of the characters that I created for the Digital Adaptation book, but then with a face and maybe a little bit more detail. So after I presented my client the first illustration with the guy sitting in the sofa with his sad face, I received positive feedback, and so I knew I was on the right track. These characters would become part of the CarenZorgt brand, so I made sure the same color palette was used.
Empty state illustrations
When there aren't any notes, messages or dossier info yet, we didn't want to show the user an empty space. Instead, we wanted to invite the user to create a note, send a first message, or add help information on how to link the patient's medical file to the site on the Dossier page.
My Photoshop workflow
With the new version of Photoshop CC 2015 it's easy to get your workflow and files organised in such way that you don't have to repeat your actions when you need to edit an element in your design. You can set things up in a modular way using linked Smart Objects in combination with Layercomps. That's what I did for all my Photoshop documents. I divided each page into sections and saved sections that appear on multiple pages as a linked Smart Object. Below is an image showing my Photoshop workflow and setup:
As you can see from the image above. The topbar, header, footer and sidebar are separate linked Smart Objects that are placed into each PSD section page. The sidebar.psb file has a Layercomp for each different state of the menu. In the PSD file I can then choose the associated Layercomp state (menu state) from the Properties panel's dropdown menu for that particular section page.
Retina ready Photoshop files
What I also kept in mind at all times, was that my Photoshop source documents where fully scalable. All of the icons and illustrations are all vector-based, and created on the pixel-grid. They're either Shape Layers or vector-based Smart Objects. They're all created in Illustrator and copy pasted in Photoshop, either as Shape Layer (the default flat color icons, such as the side menu icons) or a Smart Object (multicolour icons or illustrations, and logo). Saving a retina version was pretty easy this way...
Problem with Smart Objects
Although, I did bump into a problem that I knew was coming. There is a problem with (placed of linked) Smart Objects when you try to scale your document. If I scaled up my document to 200% by going to Image > Image Size, and choosing 200% as width and height, using the 'Nearest Neighbor (Hard Edges)' resample option, I end up with a sharp looking document, except for all the Smart Objects. It doesn't matter that the elements in this Smart Object are all completely vector-based. I would expect everything scales nicely with the document, but unfortunately this is not the case :( To circumstance this problem I created 2 versions of all these Smart Objects: a 100% and 200% version. So I enlarged all of them by 200% and saved them as separate retina versions. Then I replaced these retina Smart Objects in all of the retina version Photoshop documents. It is extra work and it feels a bit ridiculous even, but it still saves me more time than to edit each document separately when I need to make changes, in the topbar, header, footer or sidebar. For instance, I recently had to add 2 new items to the sidebar 'Documents' and 'Tasks'. So I only had to update the sidebar Smart Object, and then open the source documents to update them with the updated Smart Object, but of course I had to do this for both versions. No idea, when or if Adobe will ever solve this annoying issue. I hope soon, as to me it actually makes no sense this doesn't scale nicely sharp with the document.
Library & Color Swatches
Since this was a rather extensive project, I also saved certain reoccurring elements in the Library panel. I created a CarenZorgt library and dropped things in there such as button and form input field styles, a form input field, a form dropdown menu, a radio button, buttons,… I also saved the colors in a separate ASE Swatch file which was also delivered with the source files.
It was not part of the scope of this project, but I also made sure the design would be flexible for a mobile version. I designed a template for one of the main pages, where I hide the side menu under a hamburger menu button. A bit more challenging was the header and topbar navigation.
For the header I made sure the navigation could flow on top of the background illustration.
Implementation of the design
The entire coding and implementation of the design was done by the people of Nedap, and I think they did a fantastic job. It was really great working with them as they understood the design very well and took care of every detail in my design and that is represented well in the coded pages.