The second most question PG Gonni receives when teaching is "Should I learn to code?", surpassed only by "How do I learn to code?".

As a Design Engineer himself, and evangelist of this type of function in product teams, he wanted to help designers all over the world learn how to code, with a practical course that cuts out all the fluff and gets designers building exactly what matters to them: front-end UIs.

His answer became Intro to Coding for Designers, a first look at coding from the unique perspective of designers. To help PG Gonni reach his goal of teaching 1k designers to code in 2024, he enlisted my help.

Together we researched, designed, and built a beautiful landing page that adds legitimacy to the brand, while clearly outlining the value users can expect when they enroll.

Problem & goals

One of the main goals of the landing page was to educate designers about all of the value this course delivers, and tying that back to their own career and personal advancement.

It was critical to package it all up in a way that would appeal visually and emotionally to our target audience of designers looking to improve their skillset, communications with developers, and increase their chances of landing a role.

Personas, moodboarding and lo-fi

We moved quickly through the early stages, identifying persona archetypes, and using the empathy we developed to analyze the landscape and moodboard the types of web products we thought best aligned with out goals.

We then jumped into low fidelity ideation, which was a critical step in ensuring we were aligned in our vision for the page, and helped us iterate and nail the story we were going to tell our users.

Foundations & Components

As we continued to move into higher fidelity stages of design, we relied heavily on Tailwind as the foundations for the site's visual language. This helped us move fast while we worked on a mighty tight 3-week timeline, as I continued leading the charge in materializing our vision for the landing page, and PG Gonni juggled finalizing the course content.

It also helped us maintain visual consistency across all the various touch points: starting from the marketing site, through to the course content, all the way to the actual practical projects students build.

A somewhat robust, but never limiting, set of components helped us transition the designs over to Framer, where we continued to iterate into higher and higher levels of refinement.

HI-FI & Build

PG Gonni urged me to jump right into Framer as early as possible in the process, ensuring that we continued moving fast and efficiently, rather than designing every last detail in Figma, only to have to make compromises or deal with implementation quirks.

The launch window was critical, as we targeted a release before the holidays to take advantage of the market's spending habits coupled with the end of year L&D budgets resetting.

I jumped into Framer, converting the already high-quality Figma designs into pixel perfect, responsive designs in Framer. We also focused on sprinkling little touches of visual and interaction candy through the page to appeal to designers' creative nature, while supporting the story we tried to tell.

Impact

In its first month, the site garnered just under 3,000 page views, and generated a little over $8,000 in revenue.

Most importantly though, it helped PG Gonni's business present a clear call to action and value proposition that he can share with his community across all of his socials.

As the Sekei content brand continues to grow, the Coding for Designers landing-page is a central pillar to keeping his business sustainable in years to come, and sets him up beautifully for future iterations and sequels to this introductory course!

Thank you!

A big thank you and high-five to PG Gonni. This collaboration taught me the deep importance of sweating the details and reminded me how we need to be adaptable in the face of unexpected challenges.

Working on the product underscored the importance of a deep understanding of established conventions, enabling us to creatively navigate and innovate within them. A lesson in true innovation. Grateful for the opportunity and the valuable insights gained!

⚡️Check out the website → Coding for Designers