Treehouse design examples

Treehouse

Sign-in screen where the user authenticates with their email and password, featuring a promotional section for the mobile application.

• Sign In

Treehouse

Pricing page where the user picks between a Basic and Pro subscription plan, views customer testimonials, and reads frequently asked questions.

Treehouse

Signup and checkout page where the user selects a billing cycle, enters personal details, and provides payment information to start a free trial.

• Checkout
• Payment Form

Treehouse

Onboarding step where the user selects their coding experience level from three options or chooses to skip the survey.

• Setup Wizard
• Form

Treehouse

Onboarding step where the user selects what they want to build from options like mobile apps, web apps, or websites to personalize their course recommendations.

• Setup Wizard
• Welcome

Treehouse

Onboarding Form Modal screen

Treehouse

Onboarding step where the user is recommended a specific development track based on their survey answers, featuring an introductory video and a primary action to begin the course.

• Welcome

Treehouse

Detail page where the user watches a video lesson on HTML and CSS, with access to teacher's notes, questions, and a workspace environment.

• Media Detail
• Video Player

Treehouse

Home page where a student can resume their recommended PHP Development track and see prompts to take a survey or download the mobile app.

• Home
• Dashboard

Treehouse

Home dashboard where the user views their getting started track, dismisses a mobile app promo banner, and accesses account settings via an open profile dropdown.

• Home
• Profile

Treehouse

Settings page where the user views their profile information, including email and company, and can navigate to other account preferences.

• Profile
• Account Settings

Treehouse

Settings page where the user compares Basic, Pro, and Techdegree plans, views their current enrollment status, and can upgrade or change their subscription.

• Pricing
• Billing Settings