HES creates workplace wellness challenges for corporations, hospitals, and other companies to improve the health of individuals and organizations throughout North America and in Europe, Asia, and Africa. Each program is accompanied by unique iOS and Android applications.

We have had an ongoing partnership with HES for several years, and we regularly help them create applications that improve the well-being of people.

HES asked us to help create an application where the user gradually reveals a “work of art” by completing tasks that improve mental health. We worked together with their team to build a mobile client on Android according to their design.

First of all, the user selects an image with which he will work. They can choose one of those presented in the application or upload their own. The user also chooses the style of the painting. The image is processed on the server, after which the user sees a canvas on the main page with a sketch of his painting.

To begin ”drawing” a piece of art, the user must go to an assignment screen with a list of articles on different mental health prevention techniques and practices. To get points for ”painting” a picture, the user must answer a question about the contents of the article. Every day, they can complete a limited number of tasks (the limit is set in the dashboard).

After earning any number of points, the user can return to his studio to watch the progress of ”drawing” the picture. The image animates as if it were being painted with a brush. Animation frames are generated on the server.

The finished painting can be named, framed, and hung in the gallery for other users to see. You can add someone else's pictures to your favorites, comment, and look at the original image. If the user has finished his painting within a week, they receive bonus points, which they can send to a friend, teammate, or random user, or keep them.

There is an option for groups. Any user can create their own group or send a request to join an existing one. The team leader can invite other users. As soon as four people are recruited in a team, it is considered official and can compete with other groups. Points earned on the mission screen are credited both to the user personally and to his team.

At the beginning and at the end of the program, the user takes a mental health survey. After the final survey, statistics on his activities during the program becomes available to him.

We worked together with two developers on the HES side. Our responsibility was to build a mobile client for the app on Android.

Slack and ClickUp were used to communicate with the client. We divided the workload into segments (screens), and created a ClickUp task for each segment. During the first stage of development, we also supplied the client with daily reports.

The app itself is written in Kotlin. To develop it, we used Google’s Android Jetpack set of components and RxKotlin, an implementation for reactive programming in Kotlin. The technology stack was chosen by the client.

From Android Jetpack, particular components that should be featured are:

Room

Room is a persistence library — a lightweight wrapper over SQLite that supports RxKotlin integration for change monitoring.

ViewModel

The ViewModel class stores and manages UI-related data. ViewModel in combination with NavigationGraph is convenient because you can bind the ViewModel to the lifecycle of the navigation graph branch, which is repeatedly used in the application.

NavigationGraph

Unlike FragmentManager, it allows you to visually see the structure of the application, simplifies the transfer of parameters between fragments, eliminates the need to use string constants.

In contrast to regular mobile apps, Work of Art is distinguished by a large number of custom UI elements, the ability to change behavior through a dashboard, and the need to support Web Content Accessibility Guidelines.

For example, to make sure that the app is accessible, we needed to have the views spacious enough to fit enlarged text if necessary. Additionally, since we needed to support TalkBack, Android’s built-in screen reader, custom views needed to be declared properly so that the service would know how to announce them.

For complex screens (like ones involving pop-ups), we also needed to control the focus order of elements in the views so that it would be logical.

In total, we created a database and binding APIs and built 5 complex screens (quests, studio, friends, team, and gallery) and multiple smaller ones and navigation between them.

The development took nine months in total, but we continue to support the application by doing both bug fixing and UI changes that take into mind user feedback.

There were two challenges that we had to conquer during the development process.

Design unsuited for screen readers

The design of the application did not support TalkBack (an accessibility service for Android) well since there was a lot of pop-up content overlapping other content, images without captions, complex navigation.

We submitted feedback on how to improve specific places in the design and, together with the client, came to solutions that included design changes and/or technological solutions.

Changes in the navigation

During the development process, the app’s navigation changed. As a result, it turned out that our solution that used NavigationGraph did not work everywhere.

For example, nested fragments within one ViewPager. Or the studio screen. In it, the fragments do not go on the stack but are replaced, and, at the same time, it is necessary to keep a common ViewModel in memory. We had to go back to FragmentManager in some of these cases.

Development

• Kotlin,
• Android Jetpack,
• RxKotlin.

Communications, project management

• Slack,
• ClickUp.

Working with people from the HES development team, we built a mobile app on Android that considers the accessibility requirements of WCAG. The program is available on the HES website and has already collected positive reviews and testimonials.