ETH Web Design & Development
Echez Tech Hub had a pressing need for a digital presence, hence I designed and developed a website with opencode and antigravity agents (vibe-coding). The site is simple with payment functionality and built with the brand's design system.
Company
Echez Tech Hub
Industry
Edtech, Education
Role
Product Engineer
Year
2026
Tools
Figma, Antigravity, Opencode, Claude, ChatGPT.
Intro.
Echez Tech Hub had a pressing need for a website where prospects of the next cohort would visit and enroll seamlessly. The goal was to design a clean and simple responsive website that would help visitors quickly understand what Echez offers, explore courses, make payment and get access to the bootcamp's whatsapp group.
Problem & Context
There were some hiccups on the backend side of the main website and LMS project, which would mean that prospects would manually make enquiries from the support team (which is a lot to handle!) and very exhausting!
Key breakdowns
Echez Tech Hub needed a simple and clear digital presence that converts: The brand needed a website that clearly explains what they do, available bootcamps to join, and guides users into the right action like making payment seamlessly, without confusion or information overload.
The challenge wasn’t only to design a good-looking website, it was to create a clear system that supports a good user journey: from landing on the page to payment, to enrollment, all without confusion or unnecessary steps.
Research & insights
Before building the website, I researched on the preferred tech stack to use for the development, how paystack integration works, the security measures involved in building file structure for payment involved platforms, how tech training brands present their programs, and how prospetcs currently interact with education websites, especially in cohort based types.
Key breakdown
What I looked at:
Preferred tech stack to use for the development
How to handle sensitive keys in the development environment
Common patterns education websites.
How people skim and interact with such websites.
How to ensure a good pre-payment and post-payment user experience.
UX patterns from similar platforms.
Key Insights:
For a lean multi-page website with payment functionality, the preferred tech stack is HTML + CSS + Javascript + React.
Prospects want a simple clear website that shows courses, details, price and smooth payment process.
Keeping the structure simple and relatable was non-negotiable
Sharp user-flows and fast load times was a necessity.
This research made it clear what to prioritize: clarity, structure, and a smooth user experience.
Strategy & Key Decisions
The insights I got from the research helped guide the strategy for the website design and development.
Key breakdowns
The website was structured for fast scanning, not long reading.
Courses were designed to be easy to browse, with clear CTAs and simple course detail pages.
Payment flows was designed to be smooth
Good prompt structure and PRD was crafted
Agent's SKILLS and other important context files were created
Proper use of design system was adopted which made it easy to be converted to CSS.
This gave me a clear direction for the pages, implementations, and flows that needed to be designed.
Testing & Iteration
After building the main flows, I shared the prototype for quick review & feedback to validate the structure, catch usability issues, and improve the experience where necessary.
Key breakdowns
Ensured the responsiveness was sharp across different breakpoints
Fixed the email validation in the payment flow. Users can only enter emails with valid formats.
Fixed image rendering issues
Outcome & Impact
The final solution focuses on clarity, structure, and ease of use, helping Echez Tech Hub attract the right users and deliver a smoother experience.
Key breakdowns
What the solution achieved:
A clear, well-structured website that explains Echez’s offerings at a glance.
A full course experience: course listing -> course details -> enrollment flow.
A consistent design system across the website design and development for scale and future updates.
Smooth payment integration for a seamless experience.
Impact:
Faster decision-making for website visitors due to clearer structure and messaging.
A stronger brand presence that supports trust and credibility.
How success is measured:
Higher course inquiry and enrollment conversions from the website.
Reduced drop-offs during course exploration and enrollment.
Fewer support questions about course details.
Faster enrollment processes.
Get In Touch.
Have a project in mind? I’ll respond ASAP.