Introduction

From 2012 to 2019, I worked at MyDailyLifestyle, an organization dedicated to helping companies enhance the health of their employees.

The employees follow a program lasting several weeks and receive new tasks each week. Examples include:

• Fill out a day in the food diary
• Complete a questionnaire
• Watch a video
• Read a text
• Listen to an audio file
• Enter your weight

On a desktop screen, this task list looked like this:

Unfortunately, not all participants always completed all tasks. According to my employer, the task list appeared boring and uninviting. A more engaging format could lead to better responses. My assignment was to find a different format for the same tasks that resembled a game more. The focus was on the mobile app; we would not adjust the desktop view to save time. Therefore, the new format had to be compatible with it.

“Dirk-Jan always thought with the business and helped to make our products more engaging, such as in this gamification project.”

My role

• Concept development
• Wireframing
• Visual design

Concept development and wireframing

Searching for ideas I thought of an old game that I loved as a kid, Tutor Systems (known as Loco or Mini Loco in the Netherlands):

You had to solve problems, and then you knew where to place certain tiles in a grid inside a box. Once completed, you closed the box, turned it upside down, reopened it, and a beautiful pattern was revealed.

This inspired me to come up with the following idea:

Above, you see the program tasks for the participant for the current week. Each task is a square block that covers a photo in the background. By tapping on such a block, you go to a subsequent page, where there are several variations depending on the nature of the task. Here is an example:

When the user has completed a task, the corresponding block disappears from the task overview page (with an animation). This reveals another part of the photo. In this way, the user is encouraged to clear all blocks by completing all tasks. When a new week begins, new tasks and a new background photo appear.

Most weeks contain 5 or 6 tasks. If there are only 5, the user receives 1 block as a gift at the start of the week, which is already removed in advance. If a week contains more than 5 or 6 tasks, all task blocks become smaller.

Read the full wireframe design

Visual design

My employer was enthusiastic, so I received the green light for a visual design:

Implementation

The entire mobile app, of which the task list is a part, was created by an external developer. I only oversaw the execution.

Result

My employer was very satisfied and demonstrated this component with great enthusiasm to potential clients. In her words: “Dirk-Jan is a talented designer and developer. It is not very often that one person can effectively combine both these skills, but Dirk-Jan does this very well. He always thought with the business and helped to make our products more engaging, such as in this gamification project. He is a pleasure to work with.”

Even though the design is from 2018 and the mobile app received a complete make-over recently, the feature is still in use.