Product, Front-End & Marketing
GenAI Academy
An AI learning platform I designed and co-built in two months. Earned $12K in its first 30 days against a $10K target with no paid acquisition, and reached 37,000 accounts.
Overview
Gatekeepers are rarely the good guys.
The first Academy MVP hid every course behind registration. Learners had to create an account before they could see the topic, instructor, duration, or expected outcome.
I was one of two senior designers. The other senior designer led the flows and page structure. I led high-fidelity UI, responsive design, the Academy visual system, launch marketing, and co-built the Next.js front end with Claude Code. The shipped front end covered roughly 15-20 unique pages and more than 80 reusable components across desktop, tablet, and mobile.
I wrote the research questionnaire, analyzed more than 100 responses, and joined 7-8 interviews. My analysis supported the decision to open the catalogue and move registration to enrollment. I also proposed course categories and built the visual publishing system used by every instructor and course.
Work ran from late January to late March. That speed was possible because an MVP already existed, developers supplied the repository rules, and the two designers used Claude Code to build the beta.
$12K+
Launch-month revenue
$10K target, no paid acquisition
37,000
Registered student accounts
Confirmed in August 2026
31
Live courses
10 at launch, 31 by August 2026
Problem
Learners had to register before they knew whether a course was worth their time
Academy hosts GenAI Works courses alongside sponsored courses from external instructors.
The MVP hid the entire catalogue behind registration. Visitors could not check the topic, instructor, time commitment, or expected outcome before creating an account. Learners also lacked a quick way to find courses that matched their interests.
The product had a second audience. Instructors needed a consistent way to join Academy, package a course, and promote it. The education team needed that system to work across every release without designing each course from scratch.
01- Gated behind signup/signin, 02- Weak hierarchy, 03- No Categories
01- Accessible without signup or login, 02- Improved hierarchy, 03- Categorized for easier accessibilty
Research
People wanted the course details before the sign-up form
Research started at the end of January. The team ran around 20 interviews and received more than 100 survey responses from the education group inside the GenAI Works LinkedIn community.
I wrote the questionnaire, analyzed the responses, and turned the findings into product actions. I joined around 7-8 interviews and translated the notes into changes for the catalogue, categories, and learner profile.
Two learner groups appeared often. Juniors and recent graduates were building skills from the beginning. Experienced professionals were adding AI skills to their current careers.
Both groups wanted to judge course relevance before creating an account. They wanted to see the topic, instructor, expected outcome, and time commitment. They also wanted a faster way to find courses that matched their interests.
The research sample came from a motivated education community, so I used it for access and course-selection decisions. Pricing stayed outside this launch round, and the team kept the existing course model for launch.
What we learned
Learners needed to see the course topic, instructor, expected outcome, and time commitment before registering. They also needed a faster way to reach courses that matched their interests.
"I don't want to create an account just to see what the course is about. Let me check the topic, the instructor, how long it takes, and what I will learn first."
Interview participant
College Grad
Ideation
The catalogue opened first, and registration moved to the point of enrollment
Moving registration to enrollment
My questionnaire analysis showed that people wanted to see the catalogue before registering.
I recommended opening the catalogue and asking for registration at enrollment. The team adopted the change. The rejected option kept registration at the entrance and protected the existing account-capture flow. We opened access because the gate blocked the information people needed to make a course decision. Public course pages could also be indexed, linked, and shared.
Making courses easier to find
I proposed and designed homepage categories with the other senior designer. We used subjects such as AI, design, and coding so learners could reach relevant courses quickly.
Management questioned whether categories added enough value. The alternative was a mixed catalogue where promotional areas carried more of the filtering work. I used interviews, survey responses, and a review of competing learning products to defend the category model.
Categories also supported the business. GenAI Works could keep internal courses and free material near the front without adding another campaign block.
Building the instructor publishing system
I designed one publishing system for every instructor and course.
The recruitment kit began with a 14-slide deck that explained the Academy offer and gave the education team a consistent tool for outreach. After an instructor joined, the system covered sign-up documents, covers, thumbnails, promotional assets, and course graphics.
I set a photorealistic direction based on real people and real environments. I excluded CGI scenes, invented product interfaces, and staged stock setups because they reduced credibility.
Keeping the first release focused
Research showed that learners wanted to track progress after enrollment. The team considered a fuller learning management system and rejected it for the first release. I designed a focused profile that showed enrolled courses and current progress.
The education team also increased the amount of free material. I designed free in-house courses and guides as an entry point into the wider catalogue.
Designs
One visual system carried every course from catalogue card to launch campaign
I carried the access and category decisions through high-fidelity and responsive design across desktop, tablet, and mobile.
Course cards needed their own cleanup. Stylized tags sat over the thumbnail artwork and competed with the course title and instructor. I moved the badges out of the artwork and redesigned them as consistent metadata. The same rules carried into thumbnails and promotional assets.
Every instructor and published course used the visual system. By August 2026, I had produced packages for all 31 live courses. The system became part of the publishing process.
For the beta, developers first gave us the technical rules and repository constraints. The two designers worked in a shared repository and used Claude Code with Next.js to turn approved Figma work into a functioning front end. I built desktop, tablet, and mobile layouts across roughly 15-20 unique pages and more than 80 reusable components.
The beta gave developers and QA engineers a working product to review before production. I shipped it without checking each breakpoint as its own state. At tablet widths, the product rendered a compressed desktop layout instead of the intended tablet design. The breakpoint logic was wrong, and I had not caught it. Several controls became too small for reliable touch input.
Engineering caught the issue during beta review. I handed over the intended tablet designs and related code. Developers corrected the breakpoint behavior manually before production and used the beta as the base for the release. I checked the corrected tablet controls against a 44 by 44 CSS pixel minimum and confirmed the tap targets myself.
Lessons
The tablet miss moved breakpoint checks into every build review
Academy launched in late March 2026 with 10 live courses. The first 30 days produced a little over $12,000 in gross revenue before expenses against a $10,000 target. The launch used the company's existing audience and owned channels, with no paid acquisition.
I led the campaign graphics, course thumbnails, promotion assets, and instructor packages used in the launch. The same visual system carried Academy from the product into every course release and campaign.
As of August 2026, Academy had 31 live courses and around 37,000 registered student accounts. The Lead of Education and Product Marketing Manager confirmed both figures.
The tablet miss changed my build process. I now treat desktop, tablet, and mobile as separate test states. I personally checked the corrected tablet layouts and 44 by 44 CSS pixel targets before production.
