Content publishing

I worked on this project alone, reporting to a project manager. The client is banking company ING.

Challenge

ING was in the process of adapting to an Agile workflow (Spotify model). For web content this means that web content managers no longer publish and edit web content, but now any squad member should be able to do this work themselves. To publish and edit this web content, the company uses their own tool. This tool was produced solely by developers, and lacked ease of use for non-developers.

Solution

I made the first UI redesigns for the tool, making it easier for non-developers to use it. Specifically

  • I made the content easier to scan and interpret (using white space, colors, icons, tabs, etc.)
  • I chose to hide most of the buttons and only show those the context required
  • I changed button text that was ambiguous (e.g. ‘check out page’ > edit page, ‘undo check out’ > cancel, ‘check in’ > save edit), and added contextual pop-ups
  • I added some functionalities: search & filter

Tool before

Product overview page

Product detail page

UI redesign

Product overview page

Product overview page – Filter

Product detail

Product detail – Edit mode

Product detail – Pop-up

Winner of bootcamp “Van Eigen Kweek”

Last weekend (18 & 19 Nov 2017) I participated in the bootcamp “Van Eigen Kweek”, organised by Inagro. Together with 3 other participants (Bert Sercu and Bart Kregersman of Project Zeebes, and Thierry Janssens) we compiled a business plan for on-land integrated production of shrimp and seaweed. The jury deemed this the best business plan and so we went home with €30.000 worth in subsidies.

We agreed to use the money to overcome some technical challenges related to cultivating tropical algae on land. Our partner for this is the HZ University of Applied Sciences.

Press release (Inagro)

Pension planning

I worked on this project alone, reporting to a project manager. The client is a Belgian private bank.

Challenge

The bank has a tool to determine long-term financial goals. Through user research, however, we discovered that clients have a hard time giving concrete answers to questions as “how much income would you like after your pension?”

So the challenge was twofold: 1) make pension planning less abstract for clients. Clients know they should save for their pension, but most of them don’t really realize why. 2) make it easier for advisors to understand and determine clients’ financial goals, and thus be able to sell the right products.

Solution

I designed a module that shows people they will encounter a pension gap, and how big their gap is going to be. It was important to make the matter very concrete, that’s why I decided to use a visual metaphor, i.e. a coffee cup.

Showing people their pension gap is a somewhat shocking experience. Therefore, I iterated many versions & relentlessly switched sections around until it told the right story and we had a balanced customer journey map. I also added light-hearted elements to smooth the finger-wagging experience (e.g. the use of conversational tone, interactive forms, …)

Of course, showing only the pension gap would make this module basically a pension calculator. The business objective was to determine long-term financial goals & sell products that help achieve those goals. Therefore, I also needed to provide solutions to clients.

I sat together with the bank’s economists to work out the possibilities. And whaddaya know, financial calculators are very complicated and there are several legal restrictions! So I couldn’t offer any ‘hard’ solutions in the module. Therefore, the end goal was to get people to make an appointment with their advisor to talk about their options.

Not quite satisfied with that, I also wanted to show what these options were and how they could impact their situation. Therefore I added simulators for the bank’s saving plans. If clients already subscribed to some of these plans, they could add them to the calculation. If not, they could simulate how it would impact their pension gap. In a final section I also added an investment simulator.

At any point in the process, clients could download a report with all figures and data.

To validate my prototypes, I naturally wanted to conduct tests with real end-users. The bank’s management was initially not really running warm for the idea. Fortunately, I managed to convince them of the benefit of having clients involved in the exploration phase and was able to administer user tests in local offices with both clients and financial advisors.

Some reactions I noted down then:

“It certainly is confronting, but it instigated me to really do something about it.”
“It is put together really well, I even thought it was kind of fun to do.”
“This is pension saving for dummies, but in a good way.”

High fidelity wireframes

Selection of mock-up screens:

Dental diagnosis

I worked on parts of this tool, supporting a Lead UX Designer. The client is an international company that develops software for medical equipment, such as scanners (also read: patient management tool).

Challenge

This software accompanies an x-ray scanner used by dentists. After taking scans, the images are collected in the tool & the dentist can start diagnosing. One of the parts I worked on, was how dentists can take notes during this process.

Solution

The first thing I did, was gather all sorts of insights. How do dentists diagnose, what are possible diagnoses, …?

The way they work is as follows. Every tooth has a specific number, and dentists use these to refer to the correct tooth in their diagnosis. The software made it possible to ‘zoom in’ on one tooth and link a diagnosis to it. There are several types of teeth problems, and each has its different subcategories.

So how to visualise them? Well, while there are several types of problems, there is a clear uneven distribution (90 percent of teeth problems is caries). So I chose to show them by recurrence (caries shown first).

On to the issue of subcategories. The first versions I made were based on simple lists. I experimented with checkboxes, dropdowns, chips:

simple checkboxes (on the right side)
Version with chips
Version with an autocomplete dropdown

When checking with a dentist, I realized they usually aren’t properly sitting down to do this work. They need to be able to go quickly. Which seems logical enough in retrospect, but it only proves why user testing is so valuable. You decrease the risk of working under wrong assumptions.

In a next iteration, I focused on a much more visual version. I drew icons for all types of problems, and had them checked regularly by dentists:

hand drawn icons for possible diagnoses

I also made the selection boxes much bigger, making it easier for dentists working with a touchscreen. This became the final version.

overview screen, with bigger boxes & icons
selecting & selected state
summary screen, with option to add notes

Patient management

I worked on this project alone, reporting to a project manager. The client is an international company that develops software for medical equipment, such as scanners (also read: dental diagnosis).

Challenge

The company has many different software programs – one for each type of scanner they develop. But while each scanner can be controlled individually, there was no tool that allowed the data to be viewed in one central place. So if a doctor wants to view different types of medical images of one patient, he has to open all the different scanner programs.

Solution

It was decided to develop a patient management tool. To diagnose a patient, the doctor can use the tool to request different scans. The actual scanning happens by assistants using the other software programs. When the scanning is done the images flow back to the patient management tool. From here the doctor can then view the different scans and make a diagnosis.

Some things I learned from testing the wireframes:

  • Initially, I included a ‘mask’-button (top right corner), under the assumption that dentist & patient often look at the same screen and seeing other patients’ name would give privacy issues. During user tests it became clear this assumption was correct but not an issue throughout the whole dentist visit. Only when a dentist is searching for a patient while the patient is looking at the screen with him. So I decided to feature the privacy mode less prominently & moved it to the search settings.
  • I also included shortcuts for patients (the circles under the search fields). The idea there was that there are often a few patients ‘in circulation’, so in between dentist visit – x ray – dentist diagnosis. During user tests it became clear that a bubble with initials is not enough reference for the dentists. They rather had a full overview. At this point I also learned the valuable lesson that icons alone are not informative. In the final design I ditched the icons & chose to work with a color-coded icon and labels.
  • In the wireframes, I had structured the date as YYYY-MM-DD. I knew dentists focused mostly on the year their patients were born, not so much the specific date. Which is why I put the year first. During the user tests, however, it became clear this was not easy to scan & somewhat awkward (Europeans are used to the dd-mm-yyyy format). Therefore, I changed it & made sure the year is always in the same place (the top right corner of a patient box).

Wireframes

UI Design

VLAANDEREN.be

VLAANDEREN.be is the official website of the Flemish government. I was the main UI Designer for all pages & modules, working together with a Digital Architect, Editors & Development Team.

New features and improvements were released monthly, in an Agile workflow.

Challenge

Visitors of the governmental website is basically anyone, from all layers of society. Therefore it is very important to have an easy to use, easy to understand, up-to-date, and mobile friendly website.

Solution

I designed & redesigned several pages and modules, which are still being used today.

Including: