Vessel Wellness - Mobile App Design

Our team transitioned from the Bloom brand identity to the new Vessel brand

Hero image showing Vessel wellness mobile app interface, enhancing user health management

Upgrade the design to Vessel's new brand guidelines, simplifying the user experience with immersive animations and transitions to enhance brand connection

  • Industry

    Finance, Trading, FinTech, Stock Market


  • Location

    Chicago, Illinois, USA


  • Year

    2023


Task

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.

Screenshot of Vessel mobile app design highlighting user experience improvements

Research

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.

Research process for Vessel wellness app with brainstorming and competitor analysis

Target Audience

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.

Illustration of target audience for Vessel wellness app, focused on health and fitness

Visual References Moodboard

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.

Moodboard showing minimalistic and aspirational visuals for Vessel wellness brandBody aesthetic photography for Vessel wellness app branding

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.

Close-up photography of natural ingredients for Vessel wellness app textures

Typography

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.

Typography styles used in Vessel wellness app design with Banana Grotesk and Noe Text

Color palette

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.

Fresh and clean color palette for Vessel wellness mobile app design

Look and Feel Concept

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.

Concept design of Vessel wellness app homepage with wellness score and to-do features

User Flow

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

User flow diagram for Vessel wellness app, showing key navigation steps

Wireframes

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.

Wireframe of Vessel wellness app interface showcasing the app's structure

Cards Framework

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.

Card-based framework design for Vessel wellness app showing different types of information

Scanning Problem

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.

Instructions on how to scan Vessel test strips with proper lighting and no shadows

Main Page

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.

Main page of Vessel wellness app displaying health goals results on a compact graph

Cards Iterations

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.

Iterations of Vessel test result cards, optimizing space and content displaySmaller version of Vessel test result cards to fit more data on the screen

Famoust People About Vessel

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.

Dave Asprey supports Vessel Health by using their wellness solutions

One Card Changes

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

Changes made to Vessel test strip cards for optimal functionality and data display

Food Plan

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 wellness app food plan showing recipes and options for nutrient deficiencies

Famoust People

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.

Jarret John Thomas supports Vessel Health and uses their test strips for health tracking

Lifestyle

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.

Vessel wellness app features helping users stay hydrated and manage stress with accurate health metrics

Cards Iterations

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.

Further iterations of Vessel app cards to optimize space and content readability

Social Networks

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

Social media content design for Vessel wellness app Instagram postsVessel wellness app Instagram post design showcasing app features and benefits

Download the Vessel App

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

Download the Vessel wellness app to track and optimize your health from home

Famoust People

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.

Kelly Slater, professional surfer, supports Vessel Health and uses wellness test strips

Vessel Packaging Design

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.

Vessel wellness test strips packaging with instructions for downloading the app

Information in numbers

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

Vessel wellness app available on the App Store after Rondesignlab project completion

Shall we chat?

[email protected]
Let’s
The girl smiles

talk

This site uses cookies. By continuing to browse the site, you are agreeing to our use of cookies.