VITAFLEX USA WEBSITE
REDESIGN CASE STUDY
December 2024- January 2025
Project Overview
VitaFlex is a specialty material company offering innovative soft-stretch PPE hoods for ultimate protection and comfort. Their previous website was outdated, difficult to navigate, and did not effectively showcase their products and company values. My goal was to create a modern, user-friendly website that enhances the user experience and aligns with VitaFlex’s brand identity.
Type: CMS Design
Tools Used: Odoo CMS
Role: Web Designer
TAGS
Design Process
Understanding user needs, pain points, and motivations through research and observation.
Synthesizing insights to clearly articulate the problem that needs to be solved.
Generating creative solutions and exploring possibilities through brainstorming.
Creating low- to high-fidelity representations to test and refine ideas.
Design Process
Understanding user needs, pain points, and motivations through research and observation.
Synthesizing insights to clearly articulate the problem that needs to be solved.
Generating creative solutions and exploring possibilities through brainstorming.
Creating low- to high-fidelity representations to test and refine ideas.
Problem Statement
The original VitaFlex website had several issues that hindered user experience and brand perception:
Problem
<span data-metadata=""><span data-buffer="">Outdated design with poor visual hierarchy
Cluttered layout that made it difficult to find product information
Lack of modern UI/UX best practices
Ineffective call-to-actions (CTAs)
Not optimized for mobile devices
Objectives
Improve visual appeal and professionalism
Enhance user navigation and accessibility
Effectively highlight product benefits and categories
Create clear and compelling CTAs to boost conversions
Ensure mobile responsiveness
Problem
Outdated design with poor visual hierarchy
Cluttered layout that made it difficult to find product information
Lack of modern UI/UX best practices
Ineffective call-to-actions (CTAs)
Not optimized for mobile devices
Objectives
Improve visual appeal and professionalism
Enhance user navigation and accessibility
Effectively highlight product benefits and categories
Create clear and compelling CTAs to boost conversions
Ensure mobile responsiveness
Problem
<span data-metadata=""><span data-buffer="">Outdated design with poor visual hierarchy
Cluttered layout that made it difficult to find product information
Lack of modern UI/UX best practices
Ineffective call-to-actions (CTAs)
Not optimized for mobile devices
Objectives
Improve visual appeal and professionalism
Enhance user navigation and accessibility
Effectively highlight product benefits and categories
Create clear and compelling CTAs to boost conversions
Ensure mobile responsiveness
Research and Analysis
User Research
User Persona
Competitor Analysis
To ensure the redesigned VitaFlex website meets industry standards and user expectations, I conducted a thorough analysis of leading PPE e-commerce websites in the construction industry.
Key Insights Gathered
01
Clear and Organized Product Navigation
Observation
Supporting Data
02
Strong Visual Hierarchy and Branding
Observation
Supporting Data
03
Product Detail Emphasis
Observation
Supporting Data
04
Mobile Optimization and Performance
Observation
Supporting Data
05
Trust-Building Elements
Observation
Supporting Data
06
Simplified Checkout Process
Observation
Supporting Data
Key Insights Gathered
01
Clear and Organized Product Navigation
Observation
Supporting Data
02
Strong Visual Hierarchy and Branding
Observation
Supporting Data
03
Product Detail Emphasis
Observation
Supporting Data
04
Mobile Optimization and Performance
Observation
Supporting Data
05
Trust-Building Elements
Observation
Supporting Data
06
Simplified Checkout Process
Observation
Supporting Data
Heuristic Evaluation
A detailed analysis of the previous website using Jakob Nielsen’s usability heuristics revealed
Visibility of System Status
The site does not provide real-time feedback (e.g., loading indicators, cart updates).
Recommended: Add progress bars, cart notifications, and page loading indicators.
Consistency and Standards
Font sizes, button styles, and layout spacing are inconsistent across pages.
Recommended: Establish a design system for typography, buttons, and color usage.
Aesthetic and Minimalist Design
The homepage is visually cluttered with different font styles, inconsistent images, and dense information.
Recommended: Use whitespace, consistent image dimensions, and simplified product highlights.
Help and Documentation
No dedicated FAQ, help center, or live support.
Recommended: Add a support page or chatbot to improve post-sale experience.
Heuristic Evaluation
A detailed analysis of the previous website using Jakob Nielsen’s usability heuristics revealed
Visibility of System Status
The site does not provide real-time feedback (e.g., loading indicators, cart updates).
Recommended: Add progress bars, cart notifications, and page loading indicators.
Consistency and Standards
Font sizes, button styles, and layout spacing are inconsistent across pages.
Recommended: Establish a design system for typography, buttons, and color usage.
Aesthetic and Minimalist Design
The homepage is visually cluttered with different font styles, inconsistent images, and dense information.
Recommended: Use whitespace, consistent image dimensions, and simplified product highlights.
Help and Documentation
No dedicated FAQ, help center, or live support.
Recommended: Add a support page or chatbot to improve post-sale experience.
Information Architecture & User Journey
Information Architecture
To create an intuitive and efficient navigation structure for the Vitaflex website, I conducted a thorough analysis based on industry best practices, competitor benchmarking, and a heuristic evaluation of the existing site. These insights informed the revised information architecture to enhance usability and align with business goals.
Current Site Structure
Through a thorough analysis of the existing site structure, I uncovered several key issues that hindered user experience and product discoverability:
Fragmented Shopping Experience & Complex Navigation
The “Shop” button redirected users to an external website, disrupting the browsing and purchasing flow.
Inefficient Category Organization
Similar products were scattered across multiple categories, making it difficult for users to find what they needed.
Cluttered and Overly Complicated Product Names
Product names contained excessive details, such as pricing and bulk case sizes, cluttering the navigation and increasing cognitive load.
Design Goals & Strategy
01
Streamline Site Structure
Simplify the hierarchy to ensure faster and more intuitive product discovery.
02
Optimize Purchase Flow
Create a seamless shopping experience by minimizing disruptions, ensuring users can easily add products to the cart and proceed to checkout.
03
Improve Labelling and Consistency
Remove unnecessary technical details to enhance readability and reduce cognitive friction.
UX Principles Applied
To guide the restructuring process, I applied key UX and information architecture principles:
Revised Information Architecture
The revised information architecture simplifies the browsing experience by offering clear product groupings based on industry usage and features. This structure enhances usability, improves product discoverability, and supports business growth objectives.
Information Architecture & User Journey
Information Architecture
To create an intuitive and efficient navigation structure for the Vitaflex website, I conducted a thorough analysis based on industry best practices, competitor benchmarking, and a heuristic evaluation of the existing site. These insights informed the revised information architecture to enhance usability and align with business goals.
Current Site Structure
Through a thorough analysis of the existing site structure, I uncovered several key issues that hindered user experience and product discoverability:
Fragmented Shopping Experience & Complex Navigation
Inefficient Category Organization
Cluttered and Overly Complicated Product Names
Design Goals & Strategy
01
Streamline Site Structure
Simplify the hierarchy to ensure faster and more intuitive product discovery.
02
Optimize Purchase Flow
Create a seamless shopping experience by minimizing disruptions, ensuring users can easily add products to the cart and proceed to checkout.
03
Improve Labelling and Consistency
Remove unnecessary technical details to enhance readability and reduce cognitive friction.
UX Principles Applied
To guide the restructuring process, I applied key UX and information architecture principles:
Revised Information Architecture
The revised information architecture simplifies the browsing experience by offering clear product groupings based on industry usage and features. This structure enhances usability, improves product discoverability, and supports business growth objectives.
User Journey Map
The user journey map for Vitaflex USA outlines the stages a customer experiences, from awareness to post-purchase loyalty. By prioritizing clear product information, seamless navigation, an optimized checkout process, and responsive customer support, Vitaflex can enhance user satisfaction and drive repeat purchases and brand advocacy.
Ideation and Solution Design
Wireframing & Prototyping
Following the successful restructuring of the information architecture and user journey, I moved into the wireframing and prototyping phase to design a user-friendly interface that reflects this improved structure.
High Fidelity Design
After refining the wireframes, I developed the high-fidelity UI designs, ensuring a clean, modern, and user-friendly interface.
UI Design
Brand Analysis
To maintain brand consistency, I reviewed VitaFlex’s mission and values. VitaFlex is known for:
Current Brand Weakness
Design Strategy
Improve visual appeal and professionalism
Enhance user navigation and accessibility
Use a color palette reflecting trust (blue), innovation (green), and safety (red).
Implement clean, modern typography to enhance professionalism.
Showcase VitaFlex's innovation story through dedicated content sections.
High Fidelity Design
After refining the wireframes, I developed the high-fidelity UI designs, ensuring a clean, modern, and user-friendly interface.
UI Design
Brand Analysis
To maintain brand consistency, I reviewed VitaFlex’s mission and values. VitaFlex is known for:
Current Brand Weakness
Improve visual appeal and professionalism
Enhance user navigation and accessibility
Design Strategy
Use a color palette reflecting trust (blue), innovation (green), and safety (red).
Implement clean, modern typography to enhance professionalism.
Showcase VitaFlex's innovation story through dedicated content sections.
High Fidelity Design
After refining the wireframes, I developed the high-fidelity UI designs, ensuring a clean, modern, and user-friendly interface.
UI Design
Brand Analysis
To maintain brand consistency, I reviewed VitaFlex’s mission and values. VitaFlex is known for:
Current Brand Weakness
Improve visual appeal and professionalism
Enhance user navigation and accessibility
Use a color palette reflecting trust (blue), innovation (green), and safety (red).
Design Strategy
Implement clean, modern typography to enhance professionalism.
Showcase VitaFlex's innovation story through dedicated content sections.
Typography
HEADINGS
BUTTON/LINK
FIELDS
Color Palette
TINTS
SHADES
TEXT
PRIMARY BUTTON
SECONDARY BUTTON
FIELDS
High Fidelity Wireframe
Homepage
Homepage - Category Click
Product Page
Review Order Page
Delivery Details Page
Payment Details Page
Payment Confirmation Page
High Fidelity Wireframe
Mobile Views
High Fidelity Wireframe
Mobile Views
High Fidelity Wireframe
Mobile Views
Conclusion
The VitaFlex website redesign project was an opportunity to modernize an outdated website and align it with current industry standards. Despite not being developed, the project demonstrates my ability to create effective and user-friendly web solutions.
Let’s Work Together
Whether you’re starting a new venture or elevating your brand, I’d love to help bring your vision to life.
I’m here to answer your questions, understand your goals, and explore how we can work together on something meaningful.
hello.monalyssa@gmail.com
Based in the Philippines