The challenge

The tool was - in its previous form - introduced by the Institute of Jozef Stefan well over 15 years ago. With dietary guidelines changing every 5 years and user web standards increasing exponentially, a complete renovation was already past due. To give you a visual idea of what we were up against, take a look at their old website design:

The tool undoubtedly needed a redesign for the 21st century.

This is what we and the Eatvisor team set out to accomplish:

Creating a user-friendly onboarding process of inputting extensive user data.

Taking the latest scientific findings in diet and general wellness and transferring them to new usable flows, making meal planning, physical activity tracking, and habits assessment up to date with current times.

Introducing a secondary monitoring app (integration) intended for oversight of patients by the specialists to create a smoother guiding and planning experience.

The process

STEP 1

Workshop

We kicked it off with a cross-team workshop, combining our understanding of user behavior with the extensive scientific knowledge of the Eatvisor team. We mapped out a general structure of the app and also dialed in on the specifics to ensure that the correct data was being served to the user at the right time.

STEP 2

Wireframing

We took the findings from the workshop as well as the initial client spec and got to work: Denis took over the wireframing and tackled the issues head-on.

For the app's algorithm to work properly, users had to: 1. input a lot of data and 2. they needed to use it for a while. Having that in mind, Denis produced a multi-step user journey, dividing the onboarding process into bite-size pieces, ensuring it was not overwhelming for the user.

After that, the priority was making sure that the complexity of tracking every aspect of your wellness was fairly simple and could be easily integrated into the lives of the patients. He prepared multiple easy-to-use, and half-automated inputting modules, covering water, food, exercise, sleep, and weight intake.

Just inputting data is not enough - you also have to analyze it. Dealing with that much information, he had to figure out how to simplify the findings for the user. We developed a 3-dimensional scoring summary, presented in an (appealing) circular chart. Every dimension had subcategories with additional, more detailed analyses and charts. Daily and weekly reports (in "story" form) were also introduced, further simplifying the information interpretation for the user.

Other parts of the app, such as the profile page, recipe library, and blog, were also covered.

We then stress-tested the wireframes by handing them over to the Eatvisor managing team, developers, scientists, and also multiple UX specialists - they all reviewed and provided quality feedback.

step 3

UI design

When wireframes were approved the hard part was done, the fun part followed - designing the interface. Damir took newly established brand guidelines and used them as a base to create the new, modern, sleek and friendly-looking app. The right ratio between formality and fun was met, to make sure the new design would resonate with its audience.

Custom and native solutions were implemented to ensure the app was compatible with both iOS and Android platforms.

Spacing, typography, and color systems were utilized for improved user experience and maximized function.

An atomic design system was employed to ensure scalability and provide clarity for the development department.

Step 4

UI & UX of a secondary monitoring app for oversight of patients

As soon as the patient's app was finished, we got tasked to create a separate app that would help clinicians monitor their patient's progress. It needed to provide them with an overview of their patient list, a way to have insights into their patient's day, and also an ability to give guidance through commenting or chatting.

Damir took on this one and created a simple easy-to-use interface that allowed for all the requested functionalities, without affecting the usability of the already existing patients' app design.

Words of the Client

“Taking into account the fact that we deal with challenging research problems daily, working with Klemen & Co. was a great experience smoothly resulting in an optimal design of our personalized dietary advising mobile app based on the concept ‘Less is more’.”

Barbara Korousic Seljak
Senior Researcher, Computer Systems Dept., Jozef Stefan Institute