The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Otto's link used to open straight onto a sign-in card. Anyone who followed it learned nothing about what Otto does.
Now a signed-out browser tab gets a 3-page website (Home, Product, Pricing & access), and sign-in moved to /signin.
The trade-off: a second HTML entry would have broken shared report links, the voice pairing QR, the installed phone app and the desktop app. So the website and the app share one index.html, and the code decides which to show before React mounts.
Measured on the production build:
→ entry chunk: 897 KB → 155 KB
→ a website visit loads 123 KB of gzipped JS
→ the app's own JS: unchanged at 269 KB gzipped
The site is built from the app's own design system, and the three AI reviews lead, because they are what Otto does that a project tool does not.
Lesson: split the code before you split the URL.
What does your product's link show a stranger?
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
13:40: a finished Figma frame. 15:48: this, live on Vercel
Claude wrote every line of the code. I spent those two hours on the part clients actually pay for: looking at each version and saying what's off
17 commits, each one deployed. My notes went in as screenshots with red circles:
→ make the button edges look like ticket cutouts
→ replay the story chips every time you scroll past them
→ spacing 156, then 92, then back to 156
What made it fast was one Figma frame called "Ready for Dev". Every size, color and gap came from there, so nobody had to guess what the mockup meant
For a founder this means a real link on day one, and a fix you ask for at lunch is live by the afternoon
Meet UNFORMED, my new Framer template for independent creative studios and agencies. 🖤💚
I wanted to build something that doesn’t play it safe. Most studio sites look the same, so this one leans into huge condensed type, a warm off-white and black palette, and one loud lime accent.
A few things I’m proud of:
A draggable chrome object in the hero. Grab it and break the frame.
A type experiment where visitors drag the words to make their own composition, and it works by keyboard too.
CMS case studies, an accordion services section and a live local clock.
Fully responsive, with clean text and colour styles and a template guide to help you set it up.
Pages: Home, Work, Project, Studio, Capabilities, Contact and a Template guide.
Built for studios that want their site to have a point of view. Would love to hear what you think.
The MacWhisperer | Kajabi Website Design for Online Courses & Memberships
I designed The MacWhisperer website using Kajabi, creating a professional online platform that helps users learn how to use Apple technology with greater confidence, simplify everyday tasks, and improve productivity.
The design focuses on making technology education approachable through a clear website structure, engaging content sections, and a user-friendly experience. I aimed to help visitors understand the value of the training, explore educational resources, and discover the available courses and membership opportunities.
What I Focused On
Kajabi Website Design: A professional website layout aligned with the brand's identity and educational mission.
Course Presentation: Clear organization of learning content to help visitors explore technology training.
Membership Experience: Structured presentation of membership benefits and learning opportunities.
User-Friendly Navigation: An intuitive browsing experience that makes important information easy to find.
Trust Building: Strategic presentation of testimonials, brand information, and service benefits.
Conversion-Focused Design: Clear calls to action that encourage visitors to explore courses, memberships, and contact options.
The goal was to create an engaging digital learning platform that builds trust, communicates the value of online education, and makes it easier for visitors to take the next step.
Platform: Kajabi
Service: Website Design
Industry: Technology Education, Online Courses & Memberships
For technology training, I’d make the course-versus-membership choice explicit: solve one specific problem with a course, or get ongoing help through membership. Showing who each path suits beside its CTA could reduce the decision load for someone who already feels unsure about the technology.