Palisson Tech & Media

A professional website redesign for a financial services firm, modernising their digital presence to establish trust, clarify services, and strengthen client acquisition.

1. 01

   Challenge

   As a financial services firm, first impressions are critical. The website needed to convey professionalism, accuracy, and reliability immediately. The challenge was clarifying a complex service portfolio (accounting, auditing, tax, payroll, advisory), improving lead generation pathways, and creating a contemporary visual identity appropriate for professional services.

2. 02

   Approach

   Our approach involved three phases: discovery and positioning to define clear messaging around financial clarity and compliance; information architecture restructuring so visitors quickly find services, expertise, and contact information; and modern visual design with improved typography, hierarchy, and responsive optimisation. We integrated conversion-focused elements including clear contact pathways, service highlights, and strategic calls-to-action throughout.

3. 03

   Outcome

   The completed website gives NMK a stronger digital foundation aligned with its reputation as a trusted financial services partner. The new design better reflects the firms expertise, services are now clearly communicated, usability improved across devices, and simplified navigation with clearer CTAs strengthens lead generation potential. The website provides a scalable platform for future growth and digital initiatives.

A clean, professional company website for Expert17 — built in HTML, CSS, and JavaScript to establish digital credibility.

1. 01

   Challenge

   Companies in Expert17’s sector are judged heavily by their web presence. A site that feels outdated undermines confidence before a conversation starts.

2. 02

   Approach

   Three phases: discovery (understanding the business and its competitive context), design (high-fidelity Figma mockups iterated with the client), and development (clean, semantic HTML/CSS/JavaScript with no framework dependencies). Content architecture focused on three journeys: learning about the company, understanding services, and making contact.

3. 03

   Outcome

   Expert17 launched its site and began using it actively in business development. The project was completed on schedule, however another redesign is in progress.

A mobile-first budget tracker that opens straight to the month's balance and formats currency the way South Africans actually read it.

1. 01

   Challenge

   Budgeting apps assume two things: that you want a configurable dashboard, and that you bank in dollars or euros. The dashboard buries this month's balance behind setup screens; the currency assumption shows up in everything from digit grouping to decimal separators. I wanted to know how much of a budgeting app survives without those assumptions. One user, one month at a time, one currency. Opens to the balance. Works one-handed on a phone.

2. 02

   Approach

   Vanilla HTML, CSS and JavaScript, with Chart.js for the breakdowns and localStorage for persistence. No framework, no build step.
   
   State lives in a single month-filtered array, and every card, chart and row derives from it — so the summary can never disagree with the transaction list. The visual direction is frosted glass: cards are backdrop-filter layers over a fixed ambient gradient, so they pick up colour from behind and gain depth without heavy chrome. Theming runs on CSS custom properties, so light and dark swap from one attribute on the root element. Corner geometry uses corner-shape: squircle where supported, falling back to border-radius elsewhere.

3. 03

   Outcome

   The app loads to a populated screen, navigates months in one tap, and never asks the user to configure anything before it's useful.
   
   Most of the work went into mobile, because that's where a budget tracker either succeeds or gets deleted:
   
   

   • · The header collapses to one row below 760px with icon-only controls, so the balance is visible without scrolling.
   • · Every touch target is at least 44×44px, and modals size to dvh so they don't slide behind mobile browser chrome.
   • · An empty dashboard offers sample data in one tap; a blank screen is a bad first impression.

   
   

   Accessibility got the same treatment: animations respect prefers-reduced-motion, focus states use :focus-visible, and muted text contrast was raised after the first palette failed WCAG AA.

Web application for assessing loan eligibility. Interactive form, real-time calculations, and comprehensive reporting. Currently in development.

1. 01

   Challenge

   Complex loan criteria and a diverse applicant base required a user-friendly interface and accurate assessment tools.

2. 02

   Approach

   Developed a responsive web application with intuitive form design and robust backend logic for real-time eligibility calculations.

3. 03

   Outcome

   Significantly reduced manual assessment time and improved accuracy in loan eligibility decisions.

Product interface for a fitness tracking app. Design system and component library. Built for the product team, documented for the engineering team.

1. 01

   Challenge

   Users asked for custom workout routines and a Dark Mode that eases eye strain in early-morning and late-night sessions. The design had to be readable at a glance mid-workout, stay accessible in both themes, and make building a routine quick, even from a long exercise library.

2. 02

   Approach

   Journey first. We mapped the path from Home to a finished session, then wireframed the Home, Workout Tracking and Workout Library screens before adding any style.
   
   Built for the moment of use. Home shows daily progress as three rings, each paired with an icon and a percentage so colour never carries meaning alone. Tracking leads with a large timer and a live heart-rate zone bar, with rest, paused and confirm-finish states.
   
   Dark Mode as a system. Light and Dark share semantic Figma Variables, with surfaces raised by tone instead of heavy shadows.
   
   Accessibility checked throughout. Every palette pair was measured against WCAG AA, with 48px touch targets and a 12px text minimum.
   
   Ready for engineers. A documented design system and handoff notes cover tokens, component props, states and accessibility behaviour.

3. 03

   Outcome

   A complete, build-ready design package: three core screens in two themes plus session states, a WCAG AA-checked palette, a reusable design system and an interactive prototype with a working Light/Dark toggle. As a concept project it has no usage metrics. Its value is a clear flow and a system that scales.

A design and build of a landing page for a fictional South African recruitment company helping UK businesses hire South African talent.

1. 01

   Challenge

   The only real constraint was the goal: generate enquiries, and do it fast.

2. 02

   Approach

   A fully responsive hamburger menu, global colour and type styles, scroll-triggered entrance animations, and a lead generation form. The two genuinely custom pieces, the live clock and the calculator sit in scoped custom code which are easy to handle.

3. 03

   Outcome

   Harbourline is a small project, but it is a complete one, proof of working end-to-end from an ambiguous brief to a live, responsive, conversion-oriented landing page.