Case Study · UX/UI Design, Framer Development & CRO
Joseph Abell
A conversion-focused Framer website, custom-coded upsell page and GoHighLevel funnel created to sell a high-protein cookbook bundle across desktop and mobile.
Overview ↘
Joseph Abell is a high-protein recipe creator with a large social audience. The website was created to turn that reach into a focused product experience for his digital cookbook bundle.
I designed and developed the complete sales journey: the responsive website in Framer, a custom-coded upsell page, the funnel in GoHighLevel, checkout integration and analytics tracking. I also connected every part into one continuous system.
Project Impact ↘
The Challenge ↘
Turning audience attention into a clear path to purchase
The offer included multiple cookbooks, bonuses, recipe categories and supporting benefits. The challenge was to explain that value without overwhelming visitors or making the page feel like a catalogue.
The experience also needed to work as one connected system: introduce the product in Framer, move users through checkout, continue into a custom upsell page and keep the GoHighLevel funnel and tracking synchronized.
Work Process ↘
- 01
Research & analysis
Audited the offer, audience needs, product structure and the existing path to purchase.
- 02
User flow creation
Mapped the journey from product discovery through trust-building content to checkout.
- 03
Wireframe creation
Defined section hierarchy, repeated decision points and responsive content priorities.
- 04
Style & branding development
Built a direct visual language around Joseph’s identity, food imagery and signature yellow.
- 05
UX/UI design
Designed desktop and mobile interfaces for the storefront, product story, reviews, FAQ and checkout.
- 06
Framer development
Implemented the responsive experience and interaction system in Framer.
- 07
GoHighLevel funnel development
Built the funnel in GoHighLevel and structured the path from checkout through the post-purchase offer.
- 08
Custom-coded upsell page
Developed an additional upsell page with custom code to extend the purchase journey beyond the initial order.
- 09
System integration
Connected the Framer website, GoHighLevel funnel, checkout, upsell logic and tracking into one working system.
- 10
Tracking pixel setup
Prepared analytics instrumentation to measure sales and checkout conversion.
- 11
Launch
Completed responsive QA and released the production experience.
Conversion Journey ↘
The page follows the information visitors need before buying, moving from product clarity to evidence, reassurance and checkout.
Desktop Website ↘
A complete product story in one sales page
The desktop experience combines the bundle offer, cookbook contents, recipe previews, product benefits, social proof and repeated purchase actions in a continuous path toward checkout.
CRO: Recipe Value ↘
Making healthy eating feel affordable, satisfying and achievable
To strengthen conversion, I added a recipe preview block that shows the calories, protein, preparation time and price per serving for each dish. Instead of relying on a general promise, the section makes the cookbook’s value measurable: visitors can see how it helps them eat tasty high-protein meals, support their weight-loss goals and spend less without following an overly restrictive diet.
Checkout & Funnel ↘
Connecting checkout, upsell and GoHighLevel
The checkout separates contact and billing details from the order summary, while the custom-coded upsell page extends the purchase journey. Both were connected to the GoHighLevel funnel and integrated with the Framer website as one system.
Post-Purchase Experience ↘
Extending the funnel beyond the initial checkout
After checkout, the custom-coded upsell page presents an additional recipe-library subscription with clear pricing, value framing and a low-friction decline option. The final thank-you page confirms the order, explains where access instructions will arrive and provides a direct support contact.
CRO Decisions ↘
- 01
Make the bundle value immediate
The opening screen explains the cookbook bundle, free bonuses and total value before asking users to continue.
- 02
Turn product content into proof
Recipe previews, benefits and cookbook details help visitors understand exactly what they receive.
- 03
Repeat one consistent action
The same purchase action returns after key information and trust-building sections.
- 04
Place proof before objections
Reviews, usage numbers and the founder story build confidence before the FAQ and checkout.
- 05
Keep checkout focused
A dedicated checkout removes the long-form sales narrative and concentrates on contact, payment and order summary.
Favicon ↘
A recognizable brand mark at browser scale
I adapted the JA monogram and Joseph Abell’s yellow brand palette into a compact favicon that remains clear and recognizable in browser tabs and bookmarks.
My Role ↘
- Research and analysis
- Information architecture
- User flow design
- Wireframing
- UX/UI design
- Visual direction
- Responsive design
- Framer development
- Custom-coded upsell page
- GoHighLevel funnel development
- Framer and funnel system integration
- Analytics tracking setup
Color Palette ↘
Outcome ↘
A complete e-commerce journey with measurable conversion
The final experience connects Joseph’s Framer website, product story, checkout, custom-coded upsell page, GoHighLevel funnel and analytics in one responsive path to purchase.
The resulting system generated more than 17,000 sales, with a 5% sales conversion rate and a 30% checkout conversion rate, demonstrating how the structure, messaging and integrated funnel support commercial performance.