The design process of the CarenZorgt web site

28 Oct 2015

One of the projects I worked on a couple of months ago is a complete redesign of the CarenZorgt website, a Dutch website for people who receive care or care for someone. It is an online application that lets you organise care, share info, make notes, plan tasks etc. and connect with a care provider to follow the medical dossier. This project included the complete redesign of the site, including a set of icons, the registration wizard pages, and all the illustrations.

CarebZorgt illustration

Briefing

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…

Getting 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.

Color palette

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.

CarenZorgt colors and icon experiments
The old color palette
CarenZorgt old colors

The above image shows the 2 primary colors defined as branding colors. It was OK for me to tweak these, and combine them with other secondary colors. They combined these colors with shades of grey and that was basically it, which resulted in a rather dull look.

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.

CarenZorgt color palette

Typography

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.

CarenZogt typography

Icons

One of the fun parts in this project was the design of the icons. The site needed an icon to identify each section:

  • Calendar
  • Messages
  • Calendar
  • Dossier
  • Connections
  • Notes
  • Profile
  • 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)
CarenZorgt final icons

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:

  • Statistics
  • Report
  • Bulletin Board

The illustrations

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

The briefing

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:

CarenZorgt registration wizard briefing images

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)
CarenZorgt registration wizard start page

This is the start page of the registration wizard, introducing the CarenZorgt online application

CarenZorgt registration wizard - one of the introduction slides

This is the 2nd of 5 introduction pages of the registration wizard, introducing CarenZorgt.

Character illustrations

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.

CarenZorgt registration wizard one of the last screens

This is the page in the CarenZorgt registration wizard that comes after having added the patient, all the care takers and care providers

CarenZorgt registration wizard 'thank you' page, the last page

This is the 'Thank You' page at the end of the CarenZorgt registration wizard

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.

CarenZorgt Calendar empty state page

The help text and illustrations invites the user to add the first calendar event.

CarenZorgt Notes empty state page

The image above shows the empty state Notes page to invite the user to create a note. The yellow text animates, showing different note suggestions.

CarenZorgt Messages empty state page

This is how the Messages page looks when no message has been sent yet.

CarenZorgt Dossier empty state page

When the user hasn't linked the medical file of the patient yet, he will get this help info with a link to request this from his care provider.

CarenZorgt Connections empty state page

When there hasn't been added any connections yet to other care givers, or care providers the Connections page will invite the user to do so.

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:

CarenZorgt Photoshop workflow

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.

CarenZorgt Photoshop layers panel

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.

CarenZorgt generic template page design, showing the Layout Comps, Swatches and Library panel

A generic template page, using different Layercomps to show different layout elements such as tables, lists, paragraphs, text in a box, quotes, different sizes of images etc. Swatches and Library panel with showing the CarenZorgt ASE colors swatches, together with the graphic elements I saved in a separate 'Caren' Library.

Tablet version

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.

CarenZorgt tablet version

CarenZorgt template design of the tablet version of the Messages page.

For the header I made sure the navigation could flow on top of the background illustration.

CarenZorgt tablet version after tapping the hamburger menu icon

CarenZorgt template design of the tablet version showing the open state of the sidebar menu.

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.

Comments

  1. 1 Are Cee 02 Nov 2015

    Gorgeous, clear, and amazingly fluid work as usual, Veerle! I really appreciate you continuing to share your workflow and thought processes with us—I learn something useful every time I visit your site. Cheers!

  2. 2 Gabriel 03 Nov 2015

    Sweet! You’re a source of inspiration. Love your work!

  3. 3 rahil 04 Nov 2015

    ur amazing :-)

  4. 4 Ed 06 Nov 2015

    Great work

  5. 5 Nyle Levi 12 Nov 2015

    Wow, looks like a lot of work went into this website and the result is amazing! Thanks for sharing your process, its always nice to see how other designers tackle briefs and this post is great.

  6. 6 Step Schwarz 12 Nov 2015

    I had no idea you could control the Layer Comps of a Smart Object from the Properties panel in the main document. Thank you thank you!