JO

Work

Selected work across product design, product management, full-stack development, and frontend delivery.

A curated collection of product experiences, interfaces, design systems, and implementation work, showing how ideas move from product thinking and UX through design and frontend development.

Work

Selected work spanning design systems, product design, frontend development, and product management.

RWT Motors screenshot 1

Fullstack

RWT Motors

A self-built vehicle marketplace concept for Kenya, designed and built end-to-end to explore how trust, verification, and reputation can be made legible in an interface, from first discovery through booking and dispute resolution.

Next.jsReact.jsTypeScriptTailwind CSSshadcn/uiRedux ToolkitPrismaPostgreSQLDockerFigmaClaude
PixeSci Website and Portal screenshot 1

Fullstack

PixeSci Website and Portal

A full-stack PixeSci web platform that combines the public product website with an authenticated organization portal for account setup, license visibility, seat administration, and offline license-support workflows.

Next.jsReact.jsTypeScriptTailwind CSSshadcn/uiRedux ToolkitFigmaClaudeCodex
PixeSci Application Experience screenshot 1

Frontend Development

PixeSci Application Experience

A recreated PixeSci application experience that moves the product from an earlier interface into a cleaner, more structured, and more market-ready product UI for complex scientific workflow automation.

React.jsNext.jsTypeScriptTailwind CSSshadcn/uiRedux ToolkitClaudeCodex
PixeSci Design System and Figma Product Design screenshot 1

Design Systems

PixeSci Design System and Figma Product Design

A PixeSci design system and Figma product-design foundation covering interface patterns, product visuals, responsive behavior, typography, spacing, color, component states, and scientific workflow surfaces.

FigmaClaudeCodexTailwind CSSshadcn-style UI primitives
Ticet EDU Design System screenshot 1

Design Systems

Ticet EDU Design System

A structured Figma design kit for Ticet EDU's web platform, covering reusable components, responsive layouts, typography, color palettes, icons, interaction states, and product patterns.

Figma
Ticet EDU LXP Frontend screenshot 1

Frontend Development

Ticet EDU LXP Frontend

A Next.js and TypeScript frontend for the Ticet EDU Learning Experience Platform, focused on responsive interfaces, scalable component architecture, API integration, and polished implementation of complex learning workflows.

GitHubNext.jsTypeScriptRedux ToolkitMaterial UITailwind CSSHTMLfile_type_htmlCSSfile_type_css
Ticet EDU LXP UI/UX screenshot 1

UI Design

Ticet EDU LXP UI/UX

A personalized learning experience design for Ticet EDU's LXP, covering onboarding, dashboards, content discovery, analytics, creator tools, responsive layouts, and interactive learning flows.

Figma
Sample Product Documentation screenshot 1

Product Management

Sample Product Documentation

A product documentation sample showing how Confluence and Jira can turn subscription packages, feature requirements, epics, user stories, tasks, and acceptance criteria into a transparent delivery system.

AtlassianJiraConfluence
LVBICE Website screenshot 1

Frontend Development

LVBICE Website

A modern institutional website built with Next.js, TypeScript, Material UI, Tailwind CSS, HTML, and CSS, focused on responsive layouts, accessible navigation, performance, and professional brand presentation.

Next.jsTypeScriptMaterial UITailwind CSSHTMLfile_type_htmlCSSfile_type_css
Hospital Management System UI/UX screenshot 1

UI Design

Hospital Management System UI/UX

A Figma prototype for a hospital management system designed to help clinical teams access patient records, medical history, vitals, medication schedules, and SOAP notes through a clear dashboard experience.

Figma
Personal Portfolio screenshot 1

Frontend Development

Personal Portfolio

A personal portfolio built to present product strategy, UI/UX design, product management, and frontend engineering work in one cohesive professional narrative.

GitHubNext.jsTypeScriptTailwind CSSshadcn/uiHTMLfile_type_htmlCSSfile_type_css
Ticet EDU Website screenshot 1

Frontend Development

Ticet EDU Website

A responsive marketing website for Ticet EDU, built with Vite, JavaScript, Tailwind CSS, HTML, and CSS to communicate the platform's collaborative learning mission and provide a clean public-facing brand experience.

GitHubVite.jsJavaScriptTailwind CSSHTMLfile_type_htmlCSSfile_type_css
Ticet EDU Website UI/UX screenshot 1

UI Design

Ticet EDU Website UI/UX

A Figma design and prototype for the Ticet EDU website, including wireframes, high-fidelity mockups, responsive layouts, reusable UI components, animated transitions, and stakeholder-ready prototypes.

Figma
Ticet EDU LMS UI/UX screenshot 1

UI Design

Ticet EDU LMS UI/UX

A learner-centered LMS interface designed in Figma, covering onboarding, course browsing, progress tracking, feedback flows, reusable components, and responsive layouts.

Figma
LVBICE Website UI/UX screenshot 1

UI Design

LVBICE Website UI/UX

A responsive Figma website design for LVBICE, focused on institutional identity, accessible content structure, clear navigation, professional visual hierarchy, and reusable interface components.

Figma
Infobrix Insurance Website UI/UX screenshot 1

UI Design

Infobrix Insurance Website UI/UX

A high-fidelity Figma prototype for an insurance technology platform with intentionally designed light and dark modes, clear content hierarchy, reusable components, analytics-style visuals, integrations, and mobile app presentation.

Figma
Event Listing Page UX Logic screenshot 2

UX Logic

Event Listing Page UX Logic

A UX logic exercise for an event discovery platform, focused on reducing cognitive overload through clear event-card hierarchy, featured events, searchable listings, status badges, and scalable component behavior.

Figma
World Federation for Animals Website UI/UX screenshot 1

UI Design

World Federation for Animals Website UI/UX

A Figma website design for a global advocacy organization, using accessible layouts, light and dark themes, clear content hierarchy, storytelling sections, and reusable responsive components.

Figma