Vessel Wellness - Mobile App Design

Our key task was to reskin the Vessel creating WOW user experience. Upgrade the design to Vessel new brand guidelines and simplify the user experience using animations and transitions that draw the user into an immersive experience and further connect the user to the brand.

We had a brainstorming and stakeholder interview session to help us analyze some of the feedback that was gotten from the clients team.

Also analyzed the competitors and the websites with the designs that the client was keen on.

The research results provided sufficient information about the Vessel audience - people that care about their health and nutrition.

It is someone who exercises regularly and focuses on a healthy diet. Users who are already tracking their data: steps, heart rate, sleep, etc. and want to improve or optimize their health.

Vessel’s visual style for nude brand photography should feel minimalistic and aspirational, yet remain clean and bright. Nude portraits should be shot from tasteful and interesting angles to show the body aesthetic.

Photography of macro textures include a huge amount of ingredients and food close up detail shots. The cropping and lighting for these detailed images should be associated with nature and health.

The expression of the portraits should feel optimistic, natural and in the moment. It is important to capture genuine moments and expressions.

Banana Grotesk should be used for headlines, subheads, CTA and small informational messaging.

Vessel’s secondary typeface Noe Text creates an engaging and approachable contrast and should be used for body copy.

The Vessel color palette is designed to feel fresh and clean. It is elevated and inviting. The mix of warm and cool hues in a variety of different shades allows for visual flexibility and contrast.

The color palette of the Vessel consists of natural colors of vegetables and fruits.

To understand that we are on the same page with a stakeholder, we have made the "Look and feel" concept with new design.

Here are the concepts of the home page wellness score and to-do’s.

User flow will show you how the user navigates the application. We have highlighted the most important sections.

Wireframes - are the skeleton view of the app which allows us to focus on key functions, elements, and actions to improve the usability before starting to reskin the app.

We have based our framework on cards because that was the best solution to show different types of information in one style using various layouts.

The problem we faced during the scanning was that some users didn’t understand how to scan the card in the right way. There were some issues with lights, crop and shadows.

We need to make the scanning instruction flow for the user to make them better understand what they should do and explain in what way they need to scan the card.

Card needs to be well lit, without shadows, droplets or any glare or bright reflections on any part of it.

After taking a test, the user will get results. Vessel use essential health metrics like nutrition, hydration, and stress levels to help make you feel, perform and look better by helping you get rid of toxins and stress.

The key task was to show 11 goals results on one page in a compact and accurate way.

We’ve taken the findings from the usability test and have iterated the design to improve the user experience. We came up with 55 iterations of this screen to make it easy to use and understand.

We have made the tabs with all goals on the first main graph. Switching between the tabs changes the graph indicators and content under the graph because it shows every specific goal information.

All blocks changes were made with a goal to show more functions in less space to make more content fit above the fold.

At first the tests result cards were large and had pictures, but in the process we’ve made them smaller in order to show more results and fit above the fold.

We have decreased the cards height to fit more cards on one screen.

Vessel Health has strong support from incredible leaders in different areas like sport and health.

For example Dave Asprey - an American entrepreneur and author, creator of Bulletproof Coffee and the Bulletproof diet to biohack the life.

The card has been transformed a lot of times because of different functions and information that stakeholder wanted to put inside it.

Pick the food you’ll actually eat if you do not like supplements, then Vessel gives you recipes and food options to fix your nutrient deficiencies.

Vessel even allows you to pick your food and have it delivered by Amazon to meet your daily vitamins.

Vessel Health has strong support from incredible leaders in sport and health. For example Jarret John Thomas - the professional American snowboarder, has joined vessel and tried using test cards.

The application gives you options to stay hydrated by providing you with precisely the right amount of water and helps reduce stress by your cortisol levels. No more guessing games about how much water you need to drink.

App will show you what your body needs, and if your cortisol levels are off, it can help with that too.

All blocks changes were made in addition to show more functions in less space to make more content fit above the fold.

We have change the spacing to shrink the text first and after that have decreased the amount of text to fit more cards on one screen.

Vessel has an advanced audience, that is using social networks like instagram or facebook. We’ve designed some content for their posts on instagram.

Vessel helps you access, understand, and optimize your health and wellness from the comfort of home.

Vessel Health has strong support from incredible leaders in sport and health. For example Kelly Slater - the professional famous surfer, has tried using tests and joined the latest fundraising round.

Inside the box, you will find daily wellness cards or better known as Vessel sticks, that came in simplistic packaging that were individually wrapped up in sleeves with a small box to hold your used test strips along with information to download the Vessel Health application on your phone.

The Rondesignlab team successfully completed the project and the app is now available on the App Store.