What we did

ux/ui Web App Development Product Architecture

Developed on

  • react
  • graphql
  • dynamodb
  • nodejs
  • cognito
  • aws
React Native, GraphQL, DynamoDB, NodeJS, VTL, Cognito, AWS
an overview

A mobile app that helps patients on their weight loss journey

Viking Health is a weight-loss program run by our partner Dr. Christian Middelthon. He is a health and wellness coach specializing in weight loss. Dr. Middelthon runs a 12-week program with his patients where he guides them on their journey to health & healing. In 2018, our partner decided to improve the quality of the program, make a larger impact, and reach out to more people through a mobile medium.

The purpose of the app is to heighten people’s awareness of their weight loss journey and give them a tool to improve their accountability. The app does so by providing daily new positive proverbs to maintain a high level of motivation. It also tracks their weight and body measurements. The patients are fully aware of how much weight and how many inches they have lost over a period of time.

The Challenge

What were we up against?

Viking Health has a global network of patients which includes CEOs, CXOs and Page 3 celebrities. Since many of these patients frequently travel around the world, it’s challenging for them to adhere to the program-- meal by meal. This also applies to several of his local patients who might occasionally go away on business or leisure trips while they’re on the program.

As a solution, Dr. Middelthon came up with the idea of a mobile app to serve as an additional tool for his patients. The app would motivate patients and facilitate their progress, even when they are miles away. It makes the patients feel like they’re not alone-- the app is traveling with them.

The VikingHealth app is designed and developed keeping all the above-mentioned thoughts in mind. It’s an invite-only mobile app that helps our partner stay connected with his patients. The application aims at holding patients accountable for their weight loss journey by empowering them with the right information.

Our Approach

Mapping the physical world with digital using technology and design

Everything that we have built in the app used to be a part of our partner’s personal consultation plan. So our first challenge was to replicate the same experience as of the in-person consultation and guidance. Dr. Middelthon still takes the same approach to help his patients on their journey; except that now he has a digital medium to aid that 1:1 approach.

With technology and design we’ve ensured that the app helps users stay motivated throughout their journey.

In the app, the 12-weeks weight loss program is divided into 4 phases. We have designed the user-side of the app to guide the users step-by-step and prepare them for each phase of the program. Each phase is designed with certain instructions which the patients need to follow.

eating

Phase 1

(2 days) - Eat in abundance

running

Phase 2

(6 weeks) - Lessen the calorie intake

food

Phase 3

(4 weeks) - Eat healthy but double the intake

victory

Phase 4

(2 weeks) - Reprogram your metabolic weight

UX/UI Design

Our approach to design

The targeted audience of our app are people aged 40+ (most of them are non-tech savvy). Keeping this in mind, we’ve designed the app in a way that it reduces the number of steps that the user has to take in order to perform simple tasks like adding body measurements or recording water intake. We have also added motivational quotes and daily and weekly reminders to engage the users.

The UI is designed in a way which makes it easier for them to keep track of their daily performance. To add delight, we added a gamification element in the app that rewards good performance in the form of badges.

Visual elements like small animations in the onboarding, graphs and bar charts in the losing phase of weight loss cycle, keep the users engaged throughout their journey.

color

Black Squeeze

#EFF5F9

R: 239 G: 245 B:249

color

Malibu

#64DDFF

R: 100 G: 221 B:255

color

Science Blue

#0069DE

R: 0 G: 105 B:222

pallet-color pallet-color pallet-color pallet-color pallet-color

We used gender-neutral color which are widely associated with healthcare and soft hues to reduce cognitive overload.

app-screen app-screen app-screen app-screen app-screen
App development

Using ReactNative to build a robust cross-platform application

Our mobile app is built in ReactNative. It was an obvious choice since we wanted to develop a cross-platform application. We’ve used OpenTok for the online video consultation feature and Lottie for implementing animations.

We have tried our hands at serverless architecture for this mobile app. The database is built on DynamoDB and to connect APIs through serverless, we have used GraphQL, AppSync, and Resolvers.

The Outcome

Improved quality and adherence in weight loss program

Earlier, our partner, Dr. Middelthon, faced difficulties with patients with whom he was interacting remotely. His challenges included continuously reminding the patients to chart their weight, record their measurements, and note their water intake.

With this application, he has been relatively successful in optimizing the adherence by in-app reminders and motivational messages. Thereby, helping patients to stay on track with their weight loss program.

In conclusion, Dr. Middelthon has been able to improve the quality of his weight loss program. The doctor-patient experience has also improved because the mobile application helps the patients stay connected. The mobile app has instilled a higher level of accountability in Dr. Middelthon’s patients and the compliance to the 12-week program has improved. Overall, the app complements the program and makes it more accessible and engaging.

" With Quovantis, I have been able to create my own unique product. The team is very friendly and always eager to accommodate my suggestions. I would highly recommend this company and team to anyone considering building their own unique app. "

client

Dr. Christian Middelthon

Founder | Viking Health

Discover more of our work on Dribbble

We're a bunch of playful, fun-loving designers who're in love with what they do. Interested to know which project is keeping us busy these days?

Follow us on Dribbble