Introduction

Mike, an ex-Googler & veteran software engineer wanted to revolutionize the way full-stack development was learned.

He created a full-stack web development program where students could choose their preferred technologies & get continuous lifetime updates as the technologies evolve.

Webstone Education directly competes with bootcamps that charge $10,000 for a 6-month course.

We were hired to design the entire website & course learning experience for user delight.

When working on one-off offers for high traffic websites like Webstone Education, we start by defining our goals.

In our case, the goal was clear: maximize website conversions.

Creating A Brand Narrative

We started the project by auditing the current level of sophistication of Webstone’s offer.

Understanding the market sophistication allows us to position our brand better. We do this with the market sophistication audit.

We analyzed competitors like Educative, Scrimba, Levelop, Wesbos, etc to understand their offer & positioning.

Something that stood out: there was no one offering what Webstone did.

This means we’re in stage 1 of market sophistication.

We just had to be extremely clear & precise with our offer, show benefits, and tell them how this works.

A simple headline:

Learn Full-Stack Web Development With Your Custom Tech Stack

Transform your tech career by mastering full-stack web development and get lifetime updates for one single cost

Visual Design Exploration

With the positioning set strong, we started exploring different visual design styles which could define our brand identity well.

These inspirations included neo-brutalism, flat design, glass morphism, neo morphism, and more!

We asked Mike to review the moodboard and leave comments on what he likes. This gave us an initial direction for the visual design.

Using the comments, we created 5 different visual design concepts to start our exploration.

After rounds of feedback and learnings, we ended up with this approach for the hero section

Conversion Focused LP Structure

With the brand positioning & visual design style set, we had to plan the information architecture across the website to maximize conversions.

After going over multiple direct & indirect competitor websites, we broke down the homepage user journey into the following sections.

• Hero Section

• Choose Your Tech Stack

• Core Benefits

• ‘Paths’ With Recommended Stacks

• Customer Success Story

• Unique Features

• Wall of Testimonials

• B2B Offering Section

• Pain Points Section

• Partner With Us Section

• Meet Mike Section

• Pricing Section

• Our Numbers Section

• Summary Section

• Single Call to Action

• FAQs

This comprehensive IA was structured to optimize the entire website for conversions.

Conversational & Goal-Oriented Copywriting

Next, we worked on writing the copy for each section as it was laid out in the information architecture.

The copy stitched all sections together creating a strong brand narrative as users read through each section on the page.

Every sentence was written with the user in mind to showcase empathy & generate desire towards Webstone Education.

Homepage

With the homepage copy & hero section ready, our job was to extend the visual design style to each section.

We created a detailed wireframe for the entire homepage, experimented with different layouts, presented different options & finalized this version for the homepage.

Course Overview Page

Next, we had to design the course overview page. We followed the same process:

• Defined the information architecture

• Wrote the copy

• Designed the course overview page

As the visual design style was already set, we created the course overview page fast & effectively.

Purchase Flow

For the Purchase Flow, we ensured the entire payment process was branded to match the rest of the platform. This created a cohesive experience from start to finish. 

Additionally, we optimized the flow to reduce friction and maximize completion rates, ensuring users could make their purchases quickly and effortlessly.

Conclusion

Mike promoted Webstone Education through his blog and X profile & started acquiring new students with the new website :)

Fun fact: After 8 months of project completion, Mike reached out to design his new product, Loopback. We designed the entire product + landing page in 21 days. Check out the case study