Client
The Trainee Club
Disciplines
UX Design Responsive Website
Timeline
10.2023 to Current
Deliverables
Information Architecture Wireframes and Flow of Content Responsive Website Layout The Trainee Club UI Kit Prototypes & Final Outcomes
Tools
Figma FigJam Framer Google Analytics Hotjar
The Trainee Club Responsive Website
A [UX] C-TTC
The Trainee Club is one of the leading companies in training young talents and providing creative services to leverage employer brand, particularly for campaigns such as Management Trainee or large recruitment campaigns.
The Trainee Club new strategy boosted its digital presence with consistent online assets. A professional website for B2B clients and optimized landing pages for B2C conversions helped increase revenue and streamline workflows.
Client
The Trainee Club
Disciplines
UX Design Responsive Website
Timeline
10.2023 to Current
Deliverables
Information Architecture Wireframes and Flow of Content Responsive Website Layout The Trainee Club UI Kit Prototypes & Final Outcomes
Tools
Figma FigJam Framer Google Analytics Hotjar
The Trainee Club Responsive Website
A [UX] C-TTC
The Trainee Club is one of the leading companies in training young talents and providing creative services to leverage employer brand, particularly for campaigns such as Management Trainee or large recruitment campaigns.
The Trainee Club new strategy boosted its digital presence with consistent online assets. A professional website for B2B clients and optimized landing pages for B2C conversions helped increase revenue and streamline workflows.
Client
The Trainee Club
Disciplines
UX Design Responsive Website
Timeline
10.2023 to Current
Deliverables
Information Architecture Wireframes and Flow of Content Responsive Website Layout The Trainee Club UI Kit Prototypes & Final Outcomes
Tools
Figma FigJam Framer Google Analytics Hotjar
The Trainee Club Responsive Website
A [UX] C-TTC
The Trainee Club is one of the leading companies in training young talents and providing creative services to leverage employer brand, particularly for campaigns such as Management Trainee or large recruitment campaigns.
The Trainee Club new strategy boosted its digital presence with consistent online assets. A professional website for B2B clients and optimized landing pages for B2C conversions helped increase revenue and streamline workflows.
Introduction
Purposes
The Trainee Club aimed to build a website that effectively boosts B2B and B2C conversions through impactful landing pages, with a key focus on providing an exceptional user experience. Throughout the project, I actively tracked user interactions on the site, identifying areas of friction or drop-off, and utilizing these insights to make ongoing enhancements to the website's design and functionality.
Business Goal
Design a website optimized for converting leads into sales, driving revenue growth from both B2B and B2C channels.
Introduction
Purposes
The Trainee Club aimed to build a website that effectively boosts B2B and B2C conversions through impactful landing pages, with a key focus on providing an exceptional user experience. Throughout the project, I actively tracked user interactions on the site, identifying areas of friction or drop-off, and utilizing these insights to make ongoing enhancements to the website's design and functionality.
Business Goal
Design a website optimized for converting leads into sales, driving revenue growth from both B2B and B2C channels.
Introduction
Purposes
The Trainee Club aimed to build a website that effectively boosts B2B and B2C conversions through impactful landing pages, with a key focus on providing an exceptional user experience. Throughout the project, I actively tracked user interactions on the site, identifying areas of friction or drop-off, and utilizing these insights to make ongoing enhancements to the website's design and functionality.
Business Goal
Design a website optimized for converting leads into sales, driving revenue growth from both B2B and B2C channels.
Discover
Competitor Analysis
The Trainee Club's main competitor is Tomorrow Marketers, both providing online learning opportunities for young talents. To guide me during this project, I analyzed Tomorrow Marketers' landing pages, noting UI patterns, content structure, and checkout processes relevant to The Trainee Club.
This competitive analysis primarily focused on gathering design inspiration and understanding user flows to kickstart the website designing process. I also examined their sitemap to understand the optimal structure that The Trainee Club should adopt, ensuring intuitive navigation.
Discover
Competitor Analysis
The Trainee Club's main competitor is Tomorrow Marketers, both providing online learning opportunities for young talents. To guide me during this project, I analyzed Tomorrow Marketers' landing pages, noting UI patterns, content structure, and checkout processes relevant to The Trainee Club.
This competitive analysis primarily focused on gathering design inspiration and understanding user flows to kickstart the website designing process. I also examined their sitemap to understand the optimal structure that The Trainee Club should adopt, ensuring intuitive navigation.
Discover
Competitor Analysis
The Trainee Club's main competitor is Tomorrow Marketers, both providing online learning opportunities for young talents. To guide me during this project, I analyzed Tomorrow Marketers' landing pages, noting UI patterns, content structure, and checkout processes relevant to The Trainee Club.
This competitive analysis primarily focused on gathering design inspiration and understanding user flows to kickstart the website designing process. I also examined their sitemap to understand the optimal structure that The Trainee Club should adopt, ensuring intuitive navigation.
Define
User Personas
The Trainee Club had already established detailed user personas for their marketing initiatives. However, to ensure the website aligned with user needs, I partnered with the marketing team to leverage the existing user personas. We worked together to adapt these personas to the specific context of this website.
Define
User Personas
The Trainee Club had already established detailed user personas for their marketing initiatives. However, to ensure the website aligned with user needs, I partnered with the marketing team to leverage the existing user personas. We worked together to adapt these personas to the specific context of this website.
Define
User Personas
The Trainee Club had already established detailed user personas for their marketing initiatives. However, to ensure the website aligned with user needs, I partnered with the marketing team to leverage the existing user personas. We worked together to adapt these personas to the specific context of this website.
Sitemap
Leveraging insights learned from competitor analysis, The Trainee Club now has a tailored sitemap that aligns with both their capabilities and their users' needs. This sitemap also factors in the CMS, guaranteeing a well-organized and SEO-friendly website that supports future growth.
Sitemap
Leveraging insights learned from competitor analysis, The Trainee Club now has a tailored sitemap that aligns with both their capabilities and their users' needs. This sitemap also factors in the CMS, guaranteeing a well-organized and SEO-friendly website that supports future growth.
Sitemap
Leveraging insights learned from competitor analysis, The Trainee Club now has a tailored sitemap that aligns with both their capabilities and their users' needs. This sitemap also factors in the CMS, guaranteeing a well-organized and SEO-friendly website that supports future growth.
Design
Brand Alignment
The Trainee Club has already established a strong brand presence, making it easily recognizable to its customers. My goal is undoubtedly to translate their brand elements into intuitive and high-converting interfaces, while still preserving the core essence of the brand.
To accomplish this, every design decision is thoughtfully considered. Elements such as colors, corner radius, and layout design are meticulously chosen to ensure a cohesive brand experience that drives conversions without sacrificing the unique identity The Trainee Club has cultivated.
Design
Brand Alignment
The Trainee Club has already established a strong brand presence, making it easily recognizable to its customers. My goal is undoubtedly to translate their brand elements into intuitive and high-converting interfaces, while still preserving the core essence of the brand.
To accomplish this, every design decision is thoughtfully considered. Elements such as colors, corner radius, and layout design are meticulously chosen to ensure a cohesive brand experience that drives conversions without sacrificing the unique identity The Trainee Club has cultivated.
Design
Brand Alignment
The Trainee Club has already established a strong brand presence, making it easily recognizable to its customers. My goal is undoubtedly to translate their brand elements into intuitive and high-converting interfaces, while still preserving the core essence of the brand.
To accomplish this, every design decision is thoughtfully considered. Elements such as colors, corner radius, and layout design are meticulously chosen to ensure a cohesive brand experience that drives conversions without sacrificing the unique identity The Trainee Club has cultivated.
UI Kit
Anticipating the company's future growth, I documented a comprehensive UI Kit to ensure consistency and seamless scalability.
UI Kit
Anticipating the company's future growth, I documented a comprehensive UI Kit to ensure consistency and seamless scalability.
UI Kit
Anticipating the company's future growth, I documented a comprehensive UI Kit to ensure consistency and seamless scalability.
Content Management System
The most demanding aspect of this project was determining the optimal CMS to manage The Trainee Club's extensive content, ranging from course details and packages to learning resources and blogs.
With the sheer volume of content, the ten CMSs available within Framer Pro is not enough. To address this, I merged several databases with varying attributes, relying heavily on conditional visibility.
For example, while virtual courses and virtual services are related, they differ in the number of content fields. To accommodate this, I implemented two distinct layouts tailored to each type within the same page. These layouts are conditionally visible based on the assigned 'Type' of each record. This approach allowed me to streamline the CMS structure, using a single CMS instead of two separate ones.
Content Management System
The most demanding aspect of this project was determining the optimal CMS to manage The Trainee Club's extensive content, ranging from course details and packages to learning resources and blogs.
With the sheer volume of content, the ten CMSs available within Framer Pro is not enough. To address this, I merged several databases with varying attributes, relying heavily on conditional visibility.
For example, while virtual courses and virtual services are related, they differ in the number of content fields. To accommodate this, I implemented two distinct layouts tailored to each type within the same page. These layouts are conditionally visible based on the assigned 'Type' of each record. This approach allowed me to streamline the CMS structure, using a single CMS instead of two separate ones.
Content Management System
The most demanding aspect of this project was determining the optimal CMS to manage The Trainee Club's extensive content, ranging from course details and packages to learning resources and blogs.
With the sheer volume of content, the ten CMSs available within Framer Pro is not enough. To address this, I merged several databases with varying attributes, relying heavily on conditional visibility.
For example, while virtual courses and virtual services are related, they differ in the number of content fields. To accommodate this, I implemented two distinct layouts tailored to each type within the same page. These layouts are conditionally visible based on the assigned 'Type' of each record. This approach allowed me to streamline the CMS structure, using a single CMS instead of two separate ones.
Hi-fi
The high-fidelity design underwent three iterations to ensure it harmonized with both the brand identity and the desired user experience. Throughout this process, I worked in close collaboration with the marketing team to achieve this alignment.
Hi-fi
The high-fidelity design underwent three iterations to ensure it harmonized with both the brand identity and the desired user experience. Throughout this process, I worked in close collaboration with the marketing team to achieve this alignment.
Hi-fi
The high-fidelity design underwent three iterations to ensure it harmonized with both the brand identity and the desired user experience. Throughout this process, I worked in close collaboration with the marketing team to achieve this alignment.
Deliver
Framer
Upon completing the high-fidelity designs, I transitioned the project to Framer for development and launched it for ongoing performance monitoring and user feedback.
Deliver
Framer
Upon completing the high-fidelity designs, I transitioned the project to Framer for development and launched it for ongoing performance monitoring and user feedback.
Deliver
Framer
Upon completing the high-fidelity designs, I transitioned the project to Framer for development and launched it for ongoing performance monitoring and user feedback.
User Feedbacks
///coming-soon
User Feedbacks
///coming-soon
User Feedbacks
///coming-soon
A/B Testing
///coming-soon
A/B Testing
///coming-soon
A/B Testing
///coming-soon
Iterations
///coming-soon
Iterations
///coming-soon
Iterations
///coming-soon
Key Takeaways
Impacts
///coming-soon
Key Takeaways
Impacts
///coming-soon
Key Takeaways
Impacts
///coming-soon
Lessons Learned
///coming-soon
Lessons Learned
///coming-soon
Lessons Learned
///coming-soon