Product Design & Development
Nutrition Landing Page
Client
Project Year
Project Type
Product Design / Development
Project's Length:
Two Months
My Role
Project Tool:
Overview
My Client offers a variety of physiotherapy and coaching services to assist patients in managing their pain and living pain-free lives. But could we do it without giving the food any thought or care? Actually, Not! This motivated my client to start studying nutrition. Because Nutrition can directly affect recovery and function while an individual is under a physical therapist’s care, physical therapists should be concerned with and address their patients’ and clients’ nutritional input and eating patterns.
The Challenge
Our challenge entails developing a user interface that caters to the requirements of the intended demographic while simultaneously keeping up with advancements in usability and originality. Facilitate navigation for users, leading them towards one particular objective: engaging in a complimentary consultation with an expert. Even if apprehensive at first, they must have access to insightful information and receive exceptional service, leaving an indelible imprint on their memory of the brand or webpage.
Outcome
A webpage that seamlessly facilitates the conversion of visitors into customers.
Target Audience
Professional Athletics players
Goals
The landing page aims to convert visitors into customers by providing a clear and compelling value proposition, building trust, and guiding them towards taking one action: booking a free call with the specialist.
The main goal is achieved when
- At least 20 contacts within the first year the website is done.
- The page is loaded in a maximum of 1.5 seconds.
- The website on the most commonly used browsers and devices
Advise (according to Google Analytics evaluation of the company website) is displayed correctly.
Qualitative targets
- Convey trust
- Educate target group
- simple, clear and relevant
- to be understandable
Quantitative Goals
- Generate contacts
- contribute to increasing sales
Should be
- easy to use
- Can be displayed on the most important screen sizes
- loaded quickly
- interesting
Research
Research goal
- Gain knowledge of local competitors within my client’s area.
- Assess opportunities for improvement in the nutrition business sector.
- Comprehend the need for my client’s services to their target audience.
- Identify user needs and challenges when searching for nutritional assistance.
- Specify goals, behaviour and context from a user perspective.
Competitive Benchmark
To ensure that our user experience is truly best-in-class, we conducted a comprehensive competitive benchmarking analysis, analysing the user experiences of our key competitors and identifying areas where my client can differentiate themselves. We also conducted heuristic evaluations to identify areas for improvement in user experience, ensuring that we are constantly pushing the boundaries of what is possible in UX design. With this approach, we are confident that we can create a user experience that sets us apart from the competition and delights our users at every touchpoint.
Key findings
- Lack of clear value proposition and messaging across all websites.
- Navigation and information architecture can be improved for better user experience.
- Inconsistent visual design and branding elements across competitor websites.
- Limited use of multimedia content to engage users and showcase services.
- Contact and call-to-action buttons are not always prominent and easily accessible.
Provisional Persona
I created a provisional persona reflecting the data I collected during the user research. Understanding the target audience helped me consider how this page appeals to different demographics with varying needs. My client service should handle both personas’ pain points, motivations, and needs to provide them with personalised and effective nutrition plans.
User Interviews
To better understand the user perspective, I interviewed two people who regularly searched for nutrition information online. I asked them about their experience finding and using nutrition websites and their preferences for a potential new landing page.
Needs
- A diet plan that’ll maximise her performance.
- A trustworthy nutrition expert who gets quirks and hurdles.
- Easy meal planning and prep options for added convenience.
Insights
- Trust is crucial in the healthcare industry.
- Personalisation is important to meet users’ unique needs and challenges.
- Convenience is prioritised through flexible meal planning and preparation options for users’ convenience.
- Users seek nutrition plans that enhance performance and aid goal achievement.
- Effective communication with nutritionists ensures understanding of diet plans by the users.
I found patterns that provided insights about the user experience by analysing interview responses. From this, I identified some user needs: trust, personalisation, convenience, nutrition optimisation and effective communication with nutritionists.
Ideation
Persona Creation
Next; I gathered all the data to create a persona for my client’s nutrition services business. Meet Sarah, Marathon Runner, a 35-year-old professional who’s been a runner for the past 10 years, and John, a Professional Football Player, a 28-year-old athlete who’s been playing football since high school.
POV & HMW Statements
Insights | Needs | Point of View (POV) | How Might We (HWM) |
---|---|---|---|
Trust is crucial in the healthcare industry. | A trustworthy nutrition expert who gets her quirks and hurdles. | As a user, I need to trust the nutritionist's expertise and understanding of my unique challenges. | How might we establish trust and credibility with the user through the nutritionist's qualifications and experience? |
Personalisation is important to meet users' unique needs and challenges. | A diet plan that'll boost her performance to the max. | As a user, I need a personalised nutrition plan that addresses my unique needs and helps me achieve my performance goals. | How might we create a personalised nutrition plan for the user based on their individual needs, preferences and performance goals? |
Convenience is prioritised through flexible meal planning and preparation options for users' convenience. | Easy meal planning and prep options for added convenience. | As a user, I need flexible meal planning and preparation options that fit into my busy lifestyle. | How might we provide convenient and flexible meal planning and preparation options that align with the user's lifestyle and preferences? |
Users seek nutrition plans that enhance performance and aid goal achievement. | A diet plan that'll boost her performance to the max. | As a user, I need a nutrition plan that helps me achieve my performance goals and enhances my overall health. | How might we design a nutrition plan that optimises the user's performance and overall health through tailored nutrient intake and dietary guidelines? |
Effective communication with nutritionists ensures understanding of diet plans by the users. | A trustworthy nutrition expert who gets her quirks and hurdles. | As a user, I need clear and effective communication with my nutritionist to ensure an understanding of my diet plan. | How might we establish clear communication channels between the user and the nutritionist to ensure effective communication and understanding of the diet plan? |
How might we Statment solutions
At this stage, my friends helped me to generate ideas for this project. For each How Might We question, I asked them to develop as many solutions as possible in the given time frame.
As for incorporating all solutions into the 30-minute consultation free call, my client can use this time to discuss the user’s unique needs, preferences, and goals and create a personalised plan that suits their lifestyle. It can also discuss meal planning and preparation options and establish clear communication channels to ensure effective communication and understanding of the plan.
Business and User Goals
Stakeholder Goals Venn Diagram
So Next started to think about what the business wanted, what users needed and any technical issues that might pop up. Once we figured out where everyone was coming from, it was easy to figure out which product features we absolutely had to include in the prototype.
IA
Sitemap
Next, I created a sitemap for the Nutrition page that outlined the page navigation and information hierarchy. This allowed us to design a sales funnel that would best guide users through the page and encourage them towards conversion.
This idea is both simple and effective. Use a catchy sentence to grab attention, provide short informative information about the service provider, highlight the benefits of using their service and the risks if not utilized. This will lead users to question how the specialist can help them and encourage them to take action through a free consultation with the specialist. If there are any hesitations, customer satisfaction reviews can be found below to aid in making an informed decision.
Simple! yet not sooo simple 😉
Design
LAYOUT & GRID
The grid system helped me to align page elements based on sequenced columns and rows.
For the layout, a grid with 12 columns with a width of 72px is used. With the column spacing of 20px, this results in a width of 1080px. With a smaller screen width, the blocks automatically narrowed and placed differently.
Wireframe
Style
#5BB20E
#DCEFCC
#7597C9
#F2F8FC
#3D3D3D
Aa
Lato Bold 42pt
Raleway Medium 24pt
Raleway Regular 16pt
Raleway Regular 14pt
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Cras ultricies ligula sed magna dictum porta. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Sed lectus nibh.
FinalDesign
Other Projects
We hope you enjoy exploring the project.