Cases

Fit With Her

Fitness and nutrition coaching programs for busy women who care about their bodies

Case study

Website and web app design and development

  • Marketing
  • UI/UX Design
  • Web Development

About the client

Marni Nicole—a leader in health and wellbeing—overcame 14 surgeries to create Fit With Her, mentoring women worldwide as an online fitness coach. After a challenging pregnancy and multiple surgical procedures, she transformed herself: losing weight and gaining confidence in the process.

With live training, meal plans, and community support, her system has helped countless women achieve their health goals. Marni's personal breakthrough included weight loss, improved body confidence, and more defined muscles.

Client request

Marni Nicole designed the Fit With Her program specifically for women who are too busy to find time to go to the gym. With this in mind, her business idea centered around creating a web portal where users can discover fitness programs, healthy recipes, and the ability to order ingredients for meals directly through the website.

She came to us with a solid vision for her business model, a good understanding of target audience needs, and an eye on the future for the web portal. However, she lacked practical experience in building web products from scratch—which is precisely where our expertise came into play.

Our role:

/01
marketing process

Our marketing team helped Marni create target audience portraits, shape the tone of voice, and build a customer journey map to attract future clients. We also determined product pricing/marketing strategy and harnessed the first paid customers following the launch of the platform.

/02
design process

Meal Planner and Fitness pages challenged our team, as they contained a wide breadth of important information: meaning users should enjoy the ability to easily read and digest this content without feeling overwhelmed. With this as the goal, several designers worked on these pages to ultimately achieve the desired result.

/03
development process

This project format often calls for adjustments and changes to the original work plan. In this case, the initial technology stack was built around Reactjs, Laravel, and MongoDB. Add-ons were eventually tacked on in the form of Whisk Widget integration (now part of Samsung Food), Vuejs to work with a Fitness section player, and StreamYrad integration to create pre-recorded streams. The application rendering process was also improved with Next.js.

Analysis

Marketing Process

When working on a project such as this, it’s imperative to start with the basics: researching competitors, analyzing the target audience, developing a sound strategy, etc. Our initial efforts were focused on the marketing component, for which we performed a comprehensive,large-scale deep dive. Here's how it went…

Competitive analysis

We analyzed Fit With Her competitors from various perspectives, namely:

  • Traffic
  • Social media activity
  • URL rating
  • Domain rating
  • Backlinks
  • Keywords, etc.

Based on this analysis, recommendations were made for the website, the product pricing policy was revised, and a strategy was developed to attract the first paying customers.

ICP

We also fleshed out target audience pain points and needs in more detail by identifying three persona types.

Alice, 40
mom of 2 kids
housewife
My Motivation:
  • Love my reflection in the mirror.
  • Be beautiful for my husband.
  • Be a role model for my daughter.
  • Wear THAT dress.
  • To feel strong, lean and fit and able 
to do my everyday activities with ease.
  • I want to fit into my wedding dress 
by the time I turn 45.
Lzzy, 26
single
has a temporary job
no kids
My Motivation:
  • Losing enough weight to have a baby.
  • Look and feel beautiful.
  • Attract men.
  • Find the love of my life and be beautiful for him.
  • Wearing a swimming suit and look attractive in it.
Christina, 37
working mom
business woman
My Motivation:
  • Love my reflection in the mirror.
  • Be the most beautiful and fit woman 
in my office.
  • Look amazing at any business event and inspire others.
  • Be a role model for my daughter.
  • Prove that I can combine work, kids 
and healthy living.
  • Fel strong, lean and ft: and able to do my everyday activities with ease.

We then built a hypothesis to predict customer journey stages for Alice, Christina, and Izzy. Every ICP goes through three stages of the marketing funnel:

At every stage of this funnel, they are faced with different questions, challenges, frustrations, needs, and pain points. Our marketing strategy goal was to meet their information needs during each unique stage.

Customer Funnels:

Funnel Stages

thoughts

INTEND (i want, i need)

QUESTIONS

PAINPOINTS/
CHALLENGES/
FRUSTRATIONS

GOALS NEEDS

AWARENESS

is made problem aware
identifying the problem that needs to be solved
I`ve put on weight
I don`t eat healthy food and feel bad
It`s tiring to do shoping and plan meals
loose weight
find the way to loose weight and stay fit

change diet
an easy way to plan meals
am I overweight?
do I need training?
does training bring
energy?
what food is healthy?
don't have enough time and motivation to start and continue
fear they have broken their metabolism
worried about their health, particularly as they get older
constantly battling unhealthy eating
look slim young and beautiful
get from L to M size
loose weight after 2 pregnancies
develop healthy habits (sports and eating)

CONSIDERATION/
EVALUATION

researching available options
selecting a potential purchase
evaluating options
I need to loose weight
I want to cook healthy food
I want ready meals plans and food delivery
reliable source of nutrition information
healthy menu
regular training
how can I lose weight?
schould I try online training?
how do I choose trainer/program?
what works best for me?
don`t know who I can trust
many promises - no real results
products/programs are expensive
the recipes are too complex to prepare quickly
reasonable price for training
save costs on food
replace less healthy food that family loves with more healthy alternatives
less time for cooking, more time for hobbies and stuff

DECISION/
CONVERSION

is persuaded to make a purchase
I can do online training
I can buy ready meal plans and order food delivery
online training with simple instructions
ready meal plans+simple quick instructions
food delivery
personalized program
can I trust this trainer?
will they customize a solution for me (program/
meals/schedule)
can I train on my own schedule?
are there any guarantees?
afraid to be mislead by the service provider also sold unnecessary stuff
annoyed that have to pay for everything
results will go away after the program
healthy, delisious food, that is ballanced and suitable for the whole family
personalised program
tracking of her achievements
community of likeminded women (maybe develop friendship with some)

As a result, we successfully built one general funnel to address various queries of the three ICP— with the goal of defining and producing content to meet Marni’s customers at each stage of their customer journey.

SMM

Prior to launching the project, Marni Nicole—with the help of Studiopresto's marketing team—held a 21 Day Challenge, which helped us collect initial platform feedback from real customer participants. We also began working with SMM: creating an Instagram account with useful posts, preparing a recipe database as a lead magnet, and collecting a database of potential leads.

Visual

Design

We formed a detailed wireframe of the web portal based on Marni’s drawings of the future portal, after which component interaction logic materialized. We then developed a clear UX.

UI

The interface was designed per the following principles:

  • Users should be able to read a large quantity of important information as quickly as possible.
  • Beginners should be able to understand all graphs and figures.
  • Visuals should reflect a modern, inspiring aesthetic.
  • All elements should be designed to look and feel better than leading competitor analogs.

Welcome Screen

This section and corresponding content represent the very first thing users see upon entering the site. As they’ll typically only have a few seconds to decide whether to stay or leave, every element here is crucial—minimum information with maximum meaning.

My program

During registration, users are tasked with answering several questions. The system, in turn, creates an individualized training and nutrition program based on these responses.

Meal planner screens were the most difficult to tackle from a UX point of view. Our task was to conceptualize a convenient (yet also fast!) way to plan several meals for several family members—taking into account the unique tastes of each person. We offered Marni several options and settled on the most convenient one, accounting for the peculiarities of technical implementation.

Recipes

When it comes to food, displaying the beautiful (and mouth-watering!) end result of meal preparation is nothing short of a must. It’s therefore no surprise that  photos of the dishes themselves take up most of the page space.

We also created a convenient filter so users can quickly find what they need out of more than 100 recipes in the system (at the time of platform launch).

Functionality

Development Process

This project format often entails adjustments and changes to the initial work plan. The initial technology stack was built around Reactjs, Laravel, MongoDB. In the process, add-ons were added in the form of Whisk Widget integration (now part of Samsung Food), Vuejs to work with the player in the Fitness section, StreamYrad integration to create pre-recorded streams, also the application rendering process was improved with Next.js.

/044
design process

Meal Planner and Fitness pages challenged our team, as they contained a wide breadth of important information: meaning users should enjoy the ability to easily read and digest this content without feeling overwhelmed. With this as the goal, several designers worked on these pages to ultimately achieve the desired result.

Heading Classes
heading-style-h1

Heading 1

heading-style-h2

Heading 2

heading-style-h3

Heading 3

Heading 3 (is mobile H2)

heading-style-h4

Heading 4

Heading 4 (is mobile Heading 3)

Heading 4 (is mobile Body Medium)

Body Text Sizes
text-size-large

not used

text-size-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

text-size-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

text-size-xsmall

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Text Weights
text-weight-bold
text-weight-bold (700)
text-weight-semibold
text-weight-semibold (600)
text-weight-medium
text-weight-medium (500)
text-weight-normal
text-weight-normal (400)
text-weight-light
text-weight-light (300)
Text Styles
text-style-italic
text-style-italic
text-style-allcaps
text-style-allcaps
text-style-lowercase
text-style-lowercase
text-style-nowrap
text-style-nowrap
text-style-quote
text-style-quote
text-style-link
Text Alignment
text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right
Text Color
text-color-black
text-color-b1
text-color-black-50
text-color-b1-50
text-color-white
text-color-w1
Text Break
span-break-all
span break
all
span-break-desktop
span break
desktop
span-break-mobile
span break
mobile
List
list-10
is-small, is-medium
  • Traffic
  • Social media activity
  • URL rating
list-8
  • Traffic
  • Social media activity
  • URL rating
list-4-8
  • Users should be able to read a large quantity of important information as quickly as possible.
  • Beginners should be able to understand all graphs and figures.
  • Visuals should reflect a modern, inspiring aesthetic.
Color Palette
Black 1
Black 1 50% opacity
Gray 2
Gray 2 50% opacity
Gray 1
White 1
Mandarin 1
Mandarin 1.1
Effects
Box Shadow
Structure Classes
container-in-cases
grid-5
Utility Classes
no-scrollbar
hide
This element is hidden
hide-tablet
hide-mobile-portrait
hide-mobile-landscape
pointer-events-on
pointer-events-off
Animation Classes
Show Skew
Image Slide
Cursor Hover