Health Website Rredesign

Your one stop shop for holistic health

This project redesigns the Inside Out Health website, to enhance usability and visual appeal. Key issues in navigation, information architecture, and user engagement were identified through usability testing, and addressed through redesign

Tap to interact

Tap to interact

Challange

Challange

Health Website Redesign

Health Website Redesign

Redesigning the Inside Out Health website to overcome significant usability, navigation, and visual design issues, using appropriate principles and techniques.

Redesigning the Inside Out Health website to overcome significant usability, navigation, and visual design issues, using appropriate principles and techniques.

Approach

Approach

Lean UX + Design thinking

Lean UX + Design thinking

This project follows a structured and iterative approach, blending the principles of Design Thinking and the Think-Make-Check loop from Lean Startup.

This project follows a structured and iterative approach, blending the principles of Design Thinking and the Think-Make-Check loop from Lean Startup.

Role

Role

UX/UI & Visual designer

(Solo Course Work)

UX/UI & Visual designer

(Solo Course Work)

I handled the User research, and testing (UX audit, interviews, usability studies). Ideation, Visual design, and overall project management.

Timeline

Timeline

Feb - Apr 2023 ( Two months)

Feb - Apr 2023 ( Two months)

Understanding Inside out health

Understanding Inside out health

Understanding Inside out health

A Local supplement shop in Reigate focusing on nutrition and wellbeing of people. Its website delivers products all over the UK and aims to reach users outside their reach. Bringing its services online to get more users.

A Local supplement shop in Reigate focusing on nutrition and wellbeing of people. Its website delivers products all over the UK and aims to reach users outside their reach. Bringing its services online to get more users.

Health hub

Wellness Check-In

Food Recipes

Nutritional Therapist

Blog / Articles

Loyalty Card

The context of use

Information seekers

Health conscious individuals

This user is likely to seek information on health and wellness products, supplements and lifestyle tips.

Users with prescription

People with Health problems

This user is likely to seek to purchase prescribed supplements or medications. supplements or .

Final Solution

Home

Shop

Health hub

Recipes

About

More

A Fresh Face for Inside Out Health

The redesigned landing page combines a refreshed brand identity with a user-focused design approach, giving the website a modern and cohesive update. I streamlined navigation to make call-to-actions more visible and intuitive, ensuring users can quickly find essential information.

Final Solution

Home

Shop

Health hub

Recipes

About

More

A Fresh Face for Inside Out Health

The redesigned landing page combines a refreshed brand identity with a user-focused design approach, giving the website a modern and cohesive update. I streamlined navigation to make call-to-actions more visible and intuitive, ensuring users can quickly find essential information.

Formative test

UX Audit

Using Jacob Nelson Heuristic guidelines

To assess the website's overall quality, a heuristic evaluation using Nielsen's 10 Usability Heuristics was conducted. This audit identified key issues, defined the scope of the project, informed design decisions, and provided a foundation for further usability research.

Match between system and the real world

Confusing language and navigation misalign with user expectations.

Confusing language and navigation misalign with user expectations.

User control and freedom

Limited user autonomy due to low visibility and automatic selections.

Limited user autonomy due to low visibility and automatic selections.

Error prevention

Insufficient guidance increases the risk of user errors.

Insufficient guidance increases the risk of user errors.

Recognition and recall

Inconsistent elements force users to rely on memory over recognition.

Inconsistent elements force users to rely on memory over recognition.

Consistency

Inconsistent design elements create a disjointed experience.

Inconsistent design elements create a disjointed experience.

Flexibility and Efficiency of Use

Site lacks features for novices, reducing usability and efficiency.

Site lacks features for novices, reducing usability and efficiency.

Error Recovery

Error messages inform problems but don’t guide solutions.

Error messages inform problems but don’t guide solutions.

Aesthetic and Minimalist design

Cluttered design hampers focus and usability.

Cluttered design hampers focus and usability.

Visibility of system status

Lack of clear visual feedback on user interactions

Lack of clear visual feedback on user interactions

Help and documentation

Inaccessible help resources leave users unsupported.

Inaccessible help resources leave users unsupported.

Usability study

Task and severity

SUS-System Usability scale

Interviews

The System Usability Scale assessment yielded a score of 38%, indicating significant usability issues with the website. This low score reflects users’ dissatisfaction and underscores the need for substantial improvements to enhance the overall user experience.

Usability study

Task and severity

SUS-System Usability scale

Interviews

The System Usability Scale assessment yielded a score of 38%, indicating significant usability issues with the website. This low score reflects users’ dissatisfaction and underscores the need for substantial improvements to enhance the overall user experience.

Usability study

Task and severity

SUS-System Usability scale

Interviews

The System Usability Scale assessment yielded a score of 38%, indicating significant usability issues with the website. This low score reflects users’ dissatisfaction and underscores the need for substantial improvements to enhance the overall user experience.

Design & Build

By leveraging user research insights and design principles, with an aim to create a visually appealing, intuitive and user-centred experience. The following sections explore the key stages of the design and build process, including personas, brainstorming, user flows and wireframes.

Persona
Persona
Persona
Brainstorm
Brainstorm
Brainstorm
User flows
User flows
User flows
Wireframes
Wireframes
Wireframes

Summative test

Usability study

Summative testing evaluated task completion and severity, showing that all five user tasks were completed swiftly with low difficulty ratings, highlighting significant improvements in navigation, usability, and overall user experience.

SUS-System Usability scale

The SUS testing yielded an overall score of 80% for the redesigned website. An SUS score of 80% is considered above average and acceptable, exceeding the standard threshold of 68 for usable designs. While it doesn’t place the site in the top tier of usability, it indicates significant improvements and aligns the website with normal web usability standards.

A new look for Inside Out Health

Clear navigation

To assess the website's overall quality, a heuristic evaluation using Nielsen's 10 Usability Heuristics was conducted. This audit identified key issues, defined the scope of the project, informed design decisions, and provided a foundation for further usability research.

Old Design

New Design

Revamping the face

New logo and identity

The logo design started with sketching ideas, focusing on the brand’s message. Using psychology and marketing insights, the design was refined to clearly represent the brand and communicate its purpose effectively.

New logo and identity

The logo design started with sketching ideas, focusing on the brand’s message. Using psychology and marketing insights, the design was refined to clearly represent the brand and communicate its purpose effectively.

A Fresh Face for Inside Out Health

The redesigned landing page combines a refreshed brand identity with a user-focused design approach, giving the website a modern and cohesive update. I streamlined navigation to make call-to-actions more visible and intuitive, ensuring users can quickly find essential information.

A Fresh Face for Inside Out Health

The redesigned landing page combines a refreshed brand identity with a user-focused design approach, giving the website a modern and cohesive update. I streamlined navigation to make call-to-actions more visible and intuitive, ensuring users can quickly find essential information.

A Fresh Face for Inside Out Health

The redesigned landing page combines a refreshed brand identity with a user-focused design approach, giving the website a modern and cohesive update. I streamlined navigation to make call-to-actions more visible and intuitive, ensuring users can quickly find essential information.

Improving the online store

A prominent search bar, filters, and product categories were added to help users quickly find what they need. The product details page was revamped with clear visual hierarchy, making information easier to understand, while the new product card design provides interactive options like selecting capsule quantities and viewing detailed descriptions. Upselling strategies, such as discount notifications, and an easily accessible cart further enhance the user experience, making shopping seamless and intuitive.

Improving the online store

A prominent search bar, filters, and product categories were added to help users quickly find what they need. The product details page was revamped with clear visual hierarchy, making information easier to understand, while the new product card design provides interactive options like selecting capsule quantities and viewing detailed descriptions. Upselling strategies, such as discount notifications, and an easily accessible cart further enhance the user experience, making shopping seamless and intuitive.

Improving the online store

A prominent search bar, filters, and product categories were added to help users quickly find what they need. The product details page was revamped with clear visual hierarchy, making information easier to understand, while the new product card design provides interactive options like selecting capsule quantities and viewing detailed descriptions. Upselling strategies, such as discount notifications, and an easily accessible cart further enhance the user experience, making shopping seamless and intuitive.

Simplifying access to the Health Hub

The Health Hub section was redesigned to make learning about health and well-being more accessible and user-friendly. I introduced categories to organise topics, helping users quickly find content of interest. A prominent search bar was also added, enabling effortless navigation and ensuring users can locate valuable information with ease. 

Simplifying access to the Health Hub

The Health Hub section was redesigned to make learning about health and well-being more accessible and user-friendly. I introduced categories to organise topics, helping users quickly find content of interest. A prominent search bar was also added, enabling effortless navigation and ensuring users can locate valuable information with ease. 

Simplifying access to the Health Hub

The Health Hub section was redesigned to make learning about health and well-being more accessible and user-friendly. I introduced categories to organise topics, helping users quickly find content of interest. A prominent search bar was also added, enabling effortless navigation and ensuring users can locate valuable information with ease. 

Easier access to healthy recipes

The Recipes page was revamped to make finding healthy meal ideas effortless. I categorised recipes into clear sections—breakfast, lunch, dinner, desserts, and drinks—allowing users to quickly navigate to the meals they’re looking for. This streamlined organisation enhances usability, making it simpler for users to explore and enjoy nutritious recipe options.

Easier access to healthy recipes

The Recipes page was revamped to make finding healthy meal ideas effortless. I categorised recipes into clear sections—breakfast, lunch, dinner, desserts, and drinks—allowing users to quickly navigate to the meals they’re looking for. This streamlined organisation enhances usability, making it simpler for users to explore and enjoy nutritious recipe options.

Easier access to healthy recipes

The Recipes page was revamped to make finding healthy meal ideas effortless. I categorised recipes into clear sections—breakfast, lunch, dinner, desserts, and drinks—allowing users to quickly navigate to the meals they’re looking for. This streamlined organisation enhances usability, making it simpler for users to explore and enjoy nutritious recipe options.

Upholding the story

The "About Us" page serves as the heart of Inside Out Health, offering visitors a compelling narrative that conveys the mission and values of the platform. Through a thoughtfully crafted story, it highlights the platform’s dedication to empowering individuals on their journey to healthier living. By connecting emotionally with users, the story fosters trust and engagement, ensuring that the essence of Inside Out Health resonates deeply with its audience.

Upholding the story

The "About Us" page serves as the heart of Inside Out Health, offering visitors a compelling narrative that conveys the mission and values of the platform. Through a thoughtfully crafted story, it highlights the platform’s dedication to empowering individuals on their journey to healthier living. By connecting emotionally with users, the story fosters trust and engagement, ensuring that the essence of Inside Out Health resonates deeply with its audience.

Upholding the story

The "About Us" page serves as the heart of Inside Out Health, offering visitors a compelling narrative that conveys the mission and values of the platform. Through a thoughtfully crafted story, it highlights the platform’s dedication to empowering individuals on their journey to healthier living. By connecting emotionally with users, the story fosters trust and engagement, ensuring that the essence of Inside Out Health resonates deeply with its audience.

Footer design

Old Design

New Design

The footer redesign is well-structured, providing essential information and quick access to key features. It highlights the company's mission as a "holistic hub for nutrition and wellness" while offering links to contact options, policies, and resources like the newsletter subscription and opening times. The inclusion of a map link makes it easy for users to locate the store, enhancing usability.

Expert Review

UX Audit

Using Jacob Nelson Heuristic guidelines

After the redesign of this project the project was viewed by a different ux designers, below are a summary of the review given on this project

Match between system and the real world

Language is straightforward and relatable, aligning with users’ expectations.

Language is straightforward and relatable, aligning with users’ expectations.

User control and freedom

Navigation flows provide flexibility.

Navigation flows provide flexibility.

Error prevention

Redesign minimises potential user errors by simplifying navigation.

Redesign minimises potential user errors by simplifying navigation.

Recognition and recall

Intuitive labels and an organised footer ensures users easily find key sections.

Intuitive labels and an organised footer ensures users easily find key sections.

Consistency

The redesign adheres to web design norms, ensuring elements behave predictably.

The redesign adheres to web design norms, ensuring elements behave predictably.

Flexibility and Efficiency of Use

Improved structure supports both novice users and returning users.

Improved structure supports both novice users and returning users.

Error Recovery

Error messages are clear, providing actionable steps to resolve issues.

Error messages are clear, providing actionable steps to resolve issues.

Aesthetic and Minimalist design

Clean, spacious layouts balance visuals and information, reducing cognitive overload for users.

Clean, spacious layouts balance visuals and information, reducing cognitive overload for users.

Visibility of system status

Prominent feedback such as navigation states or confirmation messages ensures users are informed.

Prominent feedback such as navigation states or confirmation messages ensures users are informed.

Help and documentation

The About Us and Contact sections, combined with visible store policies, offer users sufficient guidance.

The About Us and Contact sections, combined with visible store policies, offer users sufficient guidance.

Final Note

To enhance the Inside Out Health website, continued research and prototyping are vital. Prioritizing user testing, particularly for the e-commerce section, will provide valuable insights into user interactions and preferences. While a heuristic evaluation has been completed, further testing during final development will validate design decisions, refine features, and ensure the site meets user needs, reinforcing a commitment to usability and satisfaction.

To enhance the Inside Out Health website, continued research and prototyping are vital. Prioritizing user testing, particularly for the e-commerce section, will provide valuable insights into user interactions and preferences. While a heuristic evaluation has been completed, further testing during final development will validate design decisions, refine features, and ensure the site meets user needs, reinforcing a commitment to usability and satisfaction.

I'm available

Let's Connect

Feel free to contact me if having any questions. I'm available for new projects or just for chatting.

Anthony Akintola

I'm available

Let's Connect

Feel free to contact me if having any questions. I'm available for new projects or just for chatting.

Anthony Akintola

I'm available

Let's Connect

Feel free to contact me if having any questions. I'm available for new projects or just for chatting.

Anthony Akintola