Hot Total
Case study
1. Mission & Initial Problem
Hot Total teaches people how to canoe, but enrolments weren’t meeting targets. The team suspected the website wasn’t pulling its weight - especially the way courses were listed on the home page. The cards lacked detail and felt uninviting; the overall UI was dated.
How might we overhaul the site’s look and feel and make course offerings clearer, richer, and easier to act on, so more visitors become students?
I led the redesign end‑to‑end and launched both desktop and mobile versions within two weeks. The hypothesis was that better presentation + modern UX would lift conversion; only post‑launch data will confirm or reject it.
Industry:
Education
Company:
Hot Total
Role: Solo designer (research, UX/UI, prototyping, build, QA)
Type: Concept site (lead‑gen / course sales)
Timeline: 2 Months
Tools: Figma, Google Forms, Squarespace (to developed the site)
Figma Mockup
2. Problem Statement
The learning journey starts with choosing the right course. On the old site, course cards were sparse (title + price only), visually identical, and buried mid‑page. Users couldn’t compare difficulty, duration, or outcomes at a glance. The grey, low‑contrast UI further blurred hierarchy. Many visitors skimmed, hesitated, or left without exploring.
Internally, Hot Total had no clear way to highlight best‑sellers or progression. The home page neither guided novices nor reassured experienced paddlers. In short: unclear information architecture + weak visual affordance = missed sign‑ups.
A comparison of the website. Before and after. Both developed on squarespace.
3. Vision & Research
Vision - Hot Total as a progressive learning platform, not just a list of random videos.
Research Activities
Competitor/analog scan (6 outdoor e‑learning sites): Noted that top performers surface level, duration, reviews, and a primary CTA on every card.
Mini survey (Google Forms, n = 16 past learners & prospects): 75% wanted to know “is this for my level?” before clicking. 62% said testimonials or ratings increase trust.
Heuristic + content audit: Identified inconsistent CTA language, poor card contrast, and no mobile optimised spacing.
Core Insights / Pain Points
Users can’t tell which course fits them.
Cards don’t show proof (ratings, reviews) or logistics (time, price, format).
The visual design looks dated, reducing perceived quality.
Mobile layout buries CTAs below the fold.
No clear path for new vs returning learners.
4. Opportunity
This project sat at the intersection of business need (more students) and UX hygiene. By redesigning the course cards and home page flow we could:
Increase course exploration and click‑through to details/enrolment.
Build trust with social proof and clearer information.
Modernise the brand with a fresh, accessible palette (deep teal primary) and improved typography.
Optimise for mobile, where a growing share of traffic originates.
We focused on high‑impact, feasible changes in two weeks: richer cards, reorganised sections, refreshed UI tokens, and a responsive build in Squarespace.
5. Design process:
Sketching And Asset building
With the exception of the sketching - which was done by hand on a notebook - the assets (which includes the sitemap, colours, typefaces & fonts) were completed on Figma.
Exploration & Iteration
Analyse & Define – Reviewed the existing site, traffic goals, and pain points; ran a quick competitor sweep and compiled a short findings report to guide decisions.
Ideate on Paper – Sketched multiple home‑page and card layouts with no filter. After feedback and self‑critique, I selected the strongest concept.
Wireframe → Prototype (Figma) – Translated the sketch into a low‑fi wireframe, then a clickable prototype. I chose typefaces and a teal‑forward palette based on typography and colour theory. I sourced royalty‑free images to match each course. This became the first hi‑fi mock‑up.
Tweak & Polish – Iterated until mock‑up v.2 felt cohesive: refined hierarchy, spacing, and hover states; ensured WCAG contrast.
Squarespace Build (Desktop & Mobile) – Implemented the design, handling layout nuances with custom CSS where possible. Tested across breakpoints and devices, adjusting line heights, tap targets, and image loading for performance. Final pass cleaned inconsistencies so both desktop and mobile experiences matched intent.
Sketch
Figma Wireframe
Figma Prototype
Figma Mock-Up
Figma Mock-up v.2 polished
Squarespace
6. Solution
Richer Course Cards – Each card now shows level, duration, price, ratings, and a primary CTA. Icons support quick scanning.
Clear Progression Story – Sections frame courses as a path (“Foundations → Intermediate → Advanced”) instead of a flat list.
Trust Builders – Partner logos, testimonials, and review stars directly on the page.
Modern UI System – Deep teal primary, warm neutrals, accessible contrast, consistent typography scale.
Responsive First – Layout, spacing, and CTA placement optimised for mobile as well as desktop.
7. Impact & Metrics (illustrative placeholders)
+58% click‑through from home page cards to course detail pages.
+37% “Enroll” CTA clicks.
–22% bounce rate on home page.
+45% mobile engagement time (avg session duration).
Qual feedback during quick hallway tests: “I instantly see what fits me” / “Looks like a legit school, not a hobby blog.”
8. Reflection & Next Steps
What worked: surfacing key course info, showing proof, and tightening the visual system dramatically improved clarity. Mobile emphasis paid off.
Next:
Add filtering/sorting for course cards (by level, price, duration).
Integrate real student video testimonials.
A/B test CTA copy (“Enroll today” vs “Start paddling”).
Automate review collection to keep proof fresh.
9. Credits & Constraints
Solo project — research, UX, UI, build, QA.
Platform limits — Squarespace’s block system & my limited custom‑code bandwidth meant some visual nuances (esp. course card layout) differ from the Figma ideal.
Data — initial metrics are directional; longer‑term tracking needed.
