Every screen redesigned with the Penster brand kit — warm backgrounds, forest greens, DM Serif Display headlines, and a thoughtful information hierarchy.
01 — First Contact
Auth — Welcome, Login, Signup
The front door to Penster. Forest-dark hero with warm accents, benefit-focused copy, and pill-shaped CTAs that establish the brand immediately.
Welcome Screen
9:41
●●●
penster
Your marketing team is ready.
AI-powered content for healthcare practices. Designed, written, and scheduled — automatically.
500+
Practices
12K+
Posts Made
4.8
Rating
Get Started
I already have an account
Free 14-day trial · No credit card required
Forest-dark hero with social proof strip and pill CTAs
Login Screen
9:41
●●●
← Back
Welcome back.
Sign in to your practice dashboard
Email
doctor@clinic.com
Password
●●●●●●●●
Forgot password?
Log In
or
Continue with Google
Continue with Apple
Don't have an account? Sign up
Warm-base body with brand inputs and pill buttons
Signup — Email Step
9:41
●●●
← Back
Let's get started.
Create your free account
1/3
Full Name
Dr. Sarah Chen
Work Email
you@practice.com
Continue →
or
Sign up with Google
Already have an account? Log in
Progress bar + simplified step-by-step flow
1
Forest-dark gradient hero establishes brand identity from the first pixel. Social proof strip (500+ practices) builds trust.
2
Pill-shaped CTAs per brand kit. Bright green for primary action, outline for secondary. "Get Started" instead of "Sign up with email".
3
DM Serif Display headlines with italic accent words. Warm-base backgrounds for form areas. Progress bar on signup to reduce anxiety.
02 — First Journey
Onboarding Flow
From clinical form-filling to a guided, warm, and celebratory experience. Progress bar visible on every step, fields grouped logically, and a completion moment that builds excitement.
Onboarding Welcome
9:41
●●●
Welcome to Penster.
Your AI marketing team is about to come alive. Let's set it up in under 3 minutes.
FeedGen
Posts designed & written for you, automatically
WebGen
Website pages that convert visitors to patients
Calendar
Smart scheduling around holidays & events
AdGen
Targeted ads that bring the right patients
Set Up My Practice →
Takes about 3 minutes
Lucide icons instead of emojis. Benefit-focused feature cards.
Business Profile
9:41
●●●
← Back
Tell us about your practice.
2/6
Practice Name
Evergreen Dermatology
Phone
(555) 123-4567
Location
Search address...
Start typing to auto-fill your address from Google Places
Continue →
Progress bar, grouped fields, address auto-fill as primary input
Specialty Selection
9:41
●●●
← Back
What's your specialty?
3/6
Search specialties...
Dermatology
Skin & cosmetic
Cardiology
Heart & vascular
Psychiatry
Mental health
Ophthalmology
Eye care
Continue →
Search + icon-adorned cards, selected state with green-tint
Onboarding Complete
9:41
●●●
You're all set.
Your marketing team for Evergreen Dermatology is being assembled.
Building your calendar
Events relevant to dermatology
Preparing first suggestions
Tailored to your specialty
Setting up brand profile
Colors, logo, and tone
Go to Dashboard →
Celebration moment with real-time setup progress
03 — The Hub
Dashboard
The most important screen in the app — showing two distinct modes: a guided setup experience for new users, and a data-rich command center for active users.
New User — Setup Mode
9:41
●●●
Good morning,
Sarah.
SC
Getting Started
2 of 5 complete
40%
Business profile
Choose specialty
Connect Instagram
Start →
Set brand preferences
Invite team members
Tip
Connect your social accounts first — we'll start generating posts for your practice right away.
Home
Calendar
Create
Profile
Guided checklist with progress ring. Contextual tip card.
Active User — Command Center
9:41
●●●
Good morning,
Sarah.
SC
2 posts ready for review
12
Posts This Month
2
Pending Review
8
Published
Next Up
Pending
World Skin Health Day
Apr 17 · Instagram, LinkedIn
Review & Approve
Skip
Quick Actions
Create
Calendar
Connect
Home
Calendar
Create
Profile
Stats strip, featured "Next Up" card, quick action grid
Calendar — Timeline
9:41
●●●
April 2026
Timeline
Month
Posting 3x/week
Healthy ↑
APR
15
Tue
Tax Day Tips
Instagram · Carousel
Ready to review
APR
17
Thu
World Skin Health Day
Instagram, LinkedIn
Generating...
APR
20
Sun
Earth Day Wellness
All platforms
Published
Home
Calendar
Create
Profile
Thumbnails, status badges, health indicator, date column
A
New user dashboard replaces empty lists with a guided checklist + progress ring. The next uncompleted task is highlighted with a primary border. A contextual tip card guides the user to the highest-impact next step.
B
Active user dashboard leads with stats (DM Serif Display numbers), a featured "Next Up" content card with inline approve CTA, and a quick actions grid for the 3 most common workflows.
C
Calendar timeline now shows content thumbnails (or generation spinners), platform targets, status badges, and a "Calendar Health" indicator. Each event has a clear visual weight proportional to its urgency.
04 — Core Flow + Edge Cases
Content Review & Empty States
The approval screen gets social preview frames and celebration moments. Empty states become helpful guides instead of dead ends.
Content Review
9:41
●●●
World Skin Health Day
Apr 17, 2026
IG
in
World Skin Health Day
Healthy Skin Starts Here
Evergreen Dermatology
InstagramLinkedIn
This World Skin Health Day, we're sharing simple steps to protect your skin all year round...
186 / 2,200 characters
Approve
Platform badges, variant selector, caption with char count
Empty State — Calendar
9:41
●●●
April 2026
Timeline
Month
Your calendar is empty
Complete your setup to start generating content for upcoming events and holidays.
Complete Setup →
Or create a custom post
Home
Calendar
Create
Profile
Helpful empty state with illustration, explanation, and CTA
Profile Tab
9:41
●●●
SC
Dr. Sarah Chen
Evergreen Dermatology
OwnerGrowth Plan
47
Total Posts
3
Connected Accounts
Team Room
3 members
Social Accounts
Billing
Notifications
Brand Preferences
Home
Calendar
Create
Profile
Team, socials, billing consolidated under Profile tab
Ready to build?
These mockups show the target state. Phase 1 (theme rewrite) gets you 60% of the way there. Phase 2 (screen restructuring) completes the transformation. Say the word and I'll start implementing.