Clairo Academy
eCommerce training platform with creative methodologies and practical learning. Design focused on user experience and conversion.
Design and Development
Complete UI/UX design and responsive web development focused on conversion and user experience.
Branding and Rebranding
Complete visual identity refresh, design system, and brand application across all touchpoints.
Analytics and Behavior
Implementation of Microsoft Clarity and Google Analytics for behavior analysis and continuous optimization.
Project Phases
A structured process that guarantees measurable results and an exceptional user experience.
Research and Strategy
In-depth analysis of the market, competition, and target users. Definition of business objectives, key metrics, and positioning strategy.
- Market and competition analysis
- User research and needs
- Definition of objectives and KPIs
.webp)
.webp)
Branding and Rebranding
Complete renewal of Clairo Academy's visual identity. Development of a design system, color palette, typography, and style guide to ensure consistency across all touchpoints.
- Logo design and visual identity system
- Color palette and typography
- Style guide and brand application
UI/UX Design
User-centered interface design with a focus on conversion. Creation of wireframes, interactive prototypes, and high-fidelity visual design optimized for different devices.
- Information architecture and wireframes
- Interactive prototyping in Figma
- Responsive visual design and conversion optimization
.webp)
.webp)
Web Development
Responsive frontend development with modern technologies. Implementation of animations, performance optimization, and ensuring cross-browser compatibility.
- Responsive frontend development
- Performance optimization and technical SEO
- Cross-browser testing and validation
Analytics and Implementation
Implementation of advanced analytics tools to measure user behavior, identify friction points, and continuously optimize the experience.
- Google Analytics 4 setup
- Microsoft Clarity implementation
- Behavior analysis and heatmaps
.webp)
Design and Web Development
A platform designed to convert and offer an exceptional learning experience. Every detail has been carefully planned and executed to maximize usability, performance, and conversion.
Mobile Optimization
UI/UX Design
User-centered interface design with a clear focus on conversion. Every visual element and interaction has been thought out to guide the user towards the desired action, maintaining usability and aesthetics as fundamental pillars.
Information Architecture
Intuitive content structuring that facilitates navigation and reduces friction in the learning process.
Design System
Reusable components and style guide that ensure visual consistency throughout the platform.
Interactive Prototyping
High-fidelity prototypes in Figma that allow validating flows before development.
.webp)
.webp)
.webp)
.webp)
.webp)
Design Features
Perfect adaptation to mobile, tablet, and desktop with optimized breakpoints.
Optimized flows that guide users toward enrollment and learning.
Subtle animations that improve the experience and provide visual feedback.
Harmonic Major Scale Typography System
For this project, a unique sizing system was created based on the harmonic major musical scale, ensuring a balanced and harmonious visual aesthetic across every design element.
Here is an interactive Figma viewer where you can explore the Clairo Academy platform design.
Frontend Development
Modern web development using current technologies, ensuring optimal performance, fast load times, and a smooth experience across all browsers and devices.
Tech Stack
Modern, proven technologies and frameworks to ensure scalability and maintainability.
Performance
Load and response optimization.
Accessibility
WCAG standards compliance.
Performance Metrics
Load time
Performance Score
Responsive
Accessibility
Visual Gallery
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
Highlighted Technical Features
Implemented Optimizations
- • Lazy loading for images and resources
- • Code splitting and tree shaking
- • Asset minification and compression
- • CDN for static content delivery
UX Improvements
- • Clear, intuitive navigation
- • Immediate visual feedback on interactions
- • Loading states and smooth transitions
- • Accessible design compatible with screen readers
Consulting and Organization
End-to-end project management from concept to delivery, ensuring smooth communication, efficient organization, and results that exceed expectations.
Strategic Consulting
From the start of the project, I provided strategic consulting based on experience and industry best practices. The goal was not only to create a functional platform, but a solution that truly generates value and measurable business results.
Needs Analysis
Identification of business goals, target audience, and functional requirements to define the project scope.
Technical Recommendations
Selection of the most suitable technologies and architecture according to objectives, budget, and required scalability.
Process Optimization
Proposed improvements to workflows and internal processes to maximize efficiency and outcomes.
Client Communication and Stakeholder Alignment
Clear and transparent communication was essential to the success of the project. I set up well-defined communication channels and kept regular contact with the client to ensure every decision aligned with expectations and objectives.
Regular Communication
Weekly check-ins, progress updates, and immediate communication for any change or key decision.
Actionable Feedback
A structured system to collect, process, and implement client feedback efficiently and consistently.
Full Transparency
Full access to documentation, progress, and project decisions, keeping the client informed at every stage.
Project Organization
Meticulous organization was key to keeping the project on track and on time. I implemented agile methodologies and management tools that enabled precise progress tracking and efficient delivery.
Initial Planning
Scope definition, timeline, milestones, and resources needed for the full project.
Task Management
Breaking down the project into manageable tasks with prioritization and realistic time allocation.
Continuous Tracking
Ongoing progress monitoring, early risk identification, and proactive adjustments.
Delivery and Documentation
Complete project documentation, usage guides, and knowledge transfer to the client.
Management Outcomes
On-time delivery
Availability and communication
Client satisfaction
Branding and Rebranding
A new visual identity that reflects Clairo Academy’s essence and strengthens its market positioning.
Identity Refresh
The Clairo Academy rebrand was a strategic process aimed at modernizing the brand while preserving its educational essence. A complete design system was developed, including logo, color palette, typography, and graphic elements applied consistently across all touchpoints.
Logo and Brand System
A versatile logo design with variations for different contexts and applications.
Color Palette
Strategic color selection that communicates trust, innovation, and professionalism.
Typography
Font choices that ensure readability and visual consistency across all media.
@hiperorb If you need a logo, visit: www.hiperorb.com (Link in bio)
♬ original sound - Jumping to Hyperspace - Hiperorb - Digital Agency
Rebrand Presentation
Explore the complete Clairo Academy rebrand presentation in Figma, where the brand evolution and new visual direction are detailed.
Behavior Analytics
Continuous measurement and analysis of user behavior to optimize the experience and improve conversion.
Google Analytics 4
Full Google Analytics 4 setup to measure key metrics, custom events, and conversion flows. Audience, behavior, and platform performance analysis.
- Custom events and conversions
- Audience analysis and segmentation
- Custom reports and dashboards
Microsoft Clarity
Microsoft Clarity implementation to gain visual insights into user behavior. Heatmaps, session recordings, and click analysis to identify friction points and improvement opportunities.
- Click and scroll heatmaps
- User session recordings
- Frustration analysis and dead clicks
.webp)
Digital Marketing Study
Development of an end-to-end omnichannel strategy for Clairo Academy, focused on customer experience and optimizing acquisition, conversion, and retention across multiple digital touchpoints.
End-to-End Omnichannel Strategy
Our omnichannel strategy ensures a cohesive experience across digital touchpoints, guiding the student journey from awareness to post-purchase. The goal is to reach them where they are, providing value in every interaction and integrating channels so they work together.
The customer journey is mapped across five stages: Awareness, Consideration, Decision, Purchase, and Post-purchase, detailing how the digital entrepreneur interacts with the academy at each step. This includes key touchpoints, user actions, emotional state, pain points, improvement opportunities, and success tracking metrics.
Acquisition Campaigns
Multi-channel strategies to attract new potential students through Google Ads, Meta Ads, and optimized organic content.
Email Marketing and Automation
Personalized nurturing flows and automated campaigns that increase conversion and engagement.
SEO and Content
Technical SEO optimization and content strategy that improves organic rankings and domain authority.
Key Results and Metrics
Increase in organic traffic
Reduction in CPA
Increase in conversions
PPC Campaigns
Optimization of Google Ads and Meta Ads campaigns with advanced targeting, continuous A/B testing, and bid automation based on machine learning.
- Targeting by audiences and strategic keywords
- A/B testing of creatives and landing pages
- Bid automation and budget optimization
Email Marketing
Email marketing strategy with advanced automation that increases engagement and conversion through personalization and optimized timing.
- Personalized nurturing flows by funnel stage
- Advanced segmentation based on behavior
- Optimized timing and sending frequency
SEO and Content
Comprehensive technical and content SEO strategy that positions Clairo Academy as an authority in eCommerce training.
- Technical optimization and content structure
- Keyword strategy and link building
- Creation of high-value educational content
Analysis and Optimization
Continuous analysis of metrics and KPIs to identify improvement opportunities and optimize the performance of each marketing channel.
- Complete conversion tracking and attribution
- Custom dashboards and automated reports
- Continuous testing and data-driven optimization
What the client says
"Aleks is a crack. The three attributes I would highlight when working with him are; he knows how to give clear proposals and does not just stick to what you tell him, he has great web design quality and adapts to the needs that are identified during the course of the project, and finally, he lives with spectacular attention, he commits himself to make the project a success. I highly recommend working with Aleks, without a doubt."