FORM PR-02 · PROJECT PR-0005 · Web & Product Design

Selected Web & Product Design Work

A curated record of responsive client websites, product interfaces, and interactive prototypes, included as supporting design and frontend experience alongside my current AI systems focus.

PR-0005.1

The design brief

Clear journeys across different products and audiences

Scope: Live websites and product interface work
Contribution: UX/UI, responsive frontend implementation, and prototyping
Evidence: Live destinations and public Figma prototypes

Why it matters

The work spans different audiences and decision paths, so each piece needed a clear hierarchy, responsive behavior, and an interface that made the next action easy to understand.

PR-0005.2

Design approach

From requirements to a testable interface

Stage	Design activity
01	Clarify the audience, primary task, content requirements, and constraints for each product.
02	Structure the information and user journey around the decisions people need to make.
03	Develop a visual system that supports the brand while keeping hierarchy and interaction states clear.
04	Build or prototype the interface at high fidelity, including responsive behavior where the work moved into production.
05	Review the result across screen sizes and refine usability, content presentation, and interaction details.

Focus · Usability and hierarchy
Delivery · Live sites and prototypes

PR-0005.3

Working process

A practical path from discovery to delivery

Review the brief, brand materials, content, and technical constraints.
Map the main journey and organize information around the user's next decision.
Create interface directions and reusable visual patterns in Figma.
Prototype key states and interactions before handoff or implementation.
Translate approved designs into responsive frontend layouts where implementation was in scope.
Check the finished experience for clarity, responsiveness, and consistent interaction behavior.

PR-0005.4

Selected coverage

Client websites · Product design · Delivery methods

Client websites

Herts On Training
Accra Coded
Responsive Layouts
Frontend Implementation

Product design

Air Control Products
Onboarding Redesign
User Flows
Interactive Prototypes

Methods

Figma
Information Architecture
UX/UI Design
Responsive QA

PR-0005.5 · Selected work

Design showcase

04 pieces

Herts On Training homepage with first-aid course messaging, booking actions, and workplace training imagery — Live website · Current
Herts On Training
Design and frontend implementation
A responsive training website that organizes accredited first-aid and safety services around clear course discovery and booking paths.
Visit the Herts On Training live site

Accra Coded homepage with wellness messaging, resource actions, and editorial lifestyle imagery — Live website · Current
Accra Coded
Design and frontend implementation
A responsive wellness discovery website with an editorial visual system, local resource exploration, events, and community membership paths.
Visit the Accra Coded live site

Air Control Products website redesign showing HVAC solutions, product categories, project work, partner brands, and customer content — Website redesign · 2025
Air Control Products
Product Designer
A product-led website redesign for a commercial and industrial HVAC supplier, covering product discovery, project proof, partner brands, and company information.
Open the Air Control Products Figma prototype

Onboarding redesign mockups showing dark mobile and desktop screens for a multi-step sports game entry flow — Product experience redesign · 2024
Onboarding Redesign
UI/UX Designer
A high-fidelity redesign of a multi-step onboarding experience, focused on explaining choices, reducing ambiguity, and creating a consistent progression into the product.
Open the onboarding redesign Figma prototype