Anestis Goudas
UI, UX Designer

MyHabeats

A mobile application that helps people adopt healthy behaviours.

The product

MyHabeats is a behavioral vaccine application that immunes patients against threats to weight loss maintenance. The application uses the power of self-monitoring, virtual interaction and gamification to help patients build healthy eating habits and make meaningful lifestyle changes.


The problem

When I offered to participate in the specific product, I carefully examined the already made Beta version of the application. I found many dead-ends on user flows, unnecessary buttons positioning, poor UI and a fairly basic structure on an application with its potential. We discussed with the team what we should rethink, redesign and redevelop from scratch, having in mind the Beta version's mistakes.


Challenges

  • Reimagine & redesign the whole application based on the Beta version,
  • Create connectable users flows & roadmaps without faults,
  • Build new users interactions and enrich the application's gamification,
  • Rebranding MyHabeats,
  • Illustrate the whole application with new graphics & interactions.

My role in this project: UI & UX Designer

Research & Design process

MyHabeats

Personas

Based on the interviews, we set up three types of personas. All interviews were handled by the Behavioural Researcher & the Clinical Researcher of the team. The personas were important to analyze the behavior of the users that accessed the application so far, its preferences, demographic & patient data (post-surgery behaviours). We referred to them throughout the entire product development process.

  • The methods we used developing the personas, were mostly user research of how they already use the Beta version, their needs and what was their actual impact by using the app.
  • We decided to rethink Personas soon after our decision to rebuild the product.
  • We noted the difficulties and the dead-end users flows on the Beta version, plus they all expressed that they need a story behind the main application's characters: Lino & Lina (virtual coaches).
  • We took into consideration all the feedback they could provide us from time to time.

MyHabeats

Rebranding MyHabeats app.

While the phase of users interviews (handled by the Behavioural Researcher & the Clinical Researcher of the team), I had the task to bring up ideas regarding the rebranding of MyHabeats. Based on research, discussion with the team, I came up with the idea:

  • Using a palette of colours that reflect the application's main subject "H": Health, & Hope. 
  • Colours: Green and blue variations. 

I presented this idea to the team, by having in mind those colours reflect the medical robes nurses wear, the hospital and in general reflect optimism. Like you are having a virtual doctor (coach) anytime, anywhere.

Information Architecture

Flowchart

We built up the information architecture and held several brainstorming workshops for that, aiming to reimagine the Beta version and make it, even more, engaging for the user.

MyHabeats
MyHabeats

Sketches & Wireframing

Everybody on the team, make a research of similar Health/Life Improvers applications. We gathered our thoughts, research and ideas, all these months, after many workshops & discussion, came sketching and wireframing.


We started out by sketching out firstly the basic screens (Registration, User Sign-In etc) and afterward, we followed up our user flow process, as a first-time user would do, by using the app for the first time.

Prototyping

After sketching out paper prototypes and discussing, we decided we were ready to move forward and begin creating our initial wireframes in Adobe XD that would eventually become our working, clickable prototype.

Based on our already made wireframes, I started to design the basic Prototypes in Adobe XD. At this stage of the process, we evaluate the app's core functionality, plus the placement of graphics and users' interactions. We build about 3-4 prototypes before I officially started to design the app.

Designing the app

Comparing the Beta to the Version 1.0 of the application, many things have changed. We had to cover a lot of areas of how we can take the app one step further.  The differences were a lot: 

  • A completely new way of user registration process.
  • A "Build up your profile" process, where the user fills up his various details in a step to step guide, we created, in order to build a unique profile.
  • Library with valuable guides & walkthroughs.
  • User profile page.
  • Statistical pages.

Stage 1
Build your healthy meals behaviours, again.

A new redesigned structured way for each user to record his meals every day. This stage characterised as the main application feature and it follows a careful and modern design approach. It uses gamification elements and makes user interaction with the app smoother, than before. Structured in food categories (Proteins, Starch, Veggies, Fruits), the user can add his meal from our list, create a new meal, rate his portion size and rate his emotional state after the completion of each meal.

Stage 2
Maintain weight loss & improve quality of life

Through a set of actions, divided into four categories, we motivate and encourage the user to commit to more exercising, mastering the skill of self-control, improving his relationships with others and feeling good by setting up goals, through our easy build-up system guide.

We, at MyHabeats, we believe that healthcare is a people business in need of technology, not a technology business in need of people.

What did I Learn?

  • Working within a team with specific roles, helped me a lot to expand my knowledge to different levels. 
  • Gaining feedback from the right target audience, helped me a lot to avoid distractions on the UI/UX process and focus on our specific targets, that my team was set.
  • Keeping track of the process at each stage, to avoid going back and forth many times. We used for the first time the Agile methodology.
  • I used a totally set of new tools (Adobe XD, Marvelapp, Sketch) and I loved them right away.

My teammates said about me

"I worked with Anestis on MyHabeats, the healthy app my team is developing. His commitment to get the job done with accuracy and professionalism thrilled the members of my team. Anestis is on continuous self-improvement and knowledge sharing thus he convinced me that he will always be a consultant for MyHabeats!" 

Katie Milioni
Founder and CEO MyHabeats


More information at www.myhabeats.co