JO

Experience

Current product/design/full-stack leadership with zero-to-one delivery depth.

A focused view of my roles, responsibilities, and proof points, including current PixeSci website and portal, application, design-system, frontend, and backend workflow work.

Experience

Current PixeSci leadership, backed by detailed Ticet EDU zero-to-one delivery proof.

PixeSci

Remote / Nairobi, Kenya / Scientific software

Website

Lead Product Designer, Frontend Developer, and Full-Stack Portal Developer

Current

Lead product design, frontend direction, and full-stack portal development for a scientific workflow platform, connecting product storytelling, application UX, design-system foundations, Figma product design, implementation guidance, and customer administration workflows.

Responsibilities
  • - Lead UX and product design direction for the PixeSci application, company website, and organization portal.
  • - Create Figma wireframes, user flows, high-fidelity interface designs, prototypes, product visuals, and design-system patterns.
  • - Create and maintain the PixeSci Design System for layouts, components, interaction states, typography, spacing, color, and responsive behavior.
  • - Redesign the application experience from an earlier interface into a more modern, structured, and market-ready product UI.
  • - Shape interface patterns for chat-to-workflow experiences, workflow context, artifact review, template management, audit logs, agent activity, software catalogs, and administration surfaces.
  • - Guide frontend implementation so React/Next.js interfaces match the intended UX, component behavior, responsive layouts, and product hierarchy.
  • - Build full-stack portal workflows for customer account setup, organization profile management, license visibility, seat administration, and offline license support.
  • - Implement backend rules for account access, organization-scoped data, license and seat workflows, audit-minded actions, and offline license-support artifacts without exposing sensitive operational details.
  • - Use Claude and Codex for implementation, debugging, refactoring, documentation, and rapid iteration.
Achievements
  • - Created the PixeSci Design System, giving the product a consistent foundation for components, visual hierarchy, spacing, typography, color, interaction states, and responsive layouts.
  • - Designed and built the company's web platform as both a public product website and an authenticated customer portal foundation.
  • - Redesigned the application experience from an earlier interface into a cleaner, more structured, and more usable product UI.
  • - Guided the recreation of the application frontend around a modern Next.js, React, TypeScript, Tailwind CSS, shadcn-style/Radix, Redux Toolkit, and desktop-oriented product stack.
  • - Implemented portal backend workflows for account access, organization administration, license visibility, seat lifecycle actions, and offline license-support artifacts.
  • - Created product-inspired visuals and interface mockups for workflow, execution, catalog, audit, template, environment-control, and agent experiences.
  • - Helped move PixeSci into the market with a clearer website, stronger visual system, more polished application experience, and a practical full-stack portal surface.

Ticet EDU Limited

Nairobi, Kenya / EdTech startup / Remote

Website

Lead Product Designer

July 2018 - December 2025

Lead Product Designer for a zero-to-one educational platform focused on personalized and social learning. Owned end-to-end design of web and mobile experiences from product discovery and UX strategy to high-fidelity UI, design systems, and developer handoff.

Responsibilities
  • - Conducted user research, competitor analysis, and usability testing.
  • - Built and maintained a scalable component-based Ticet EDU Design System/Kit.
  • - Designed onboarding, learner dashboards, content discovery, creator tools, rewards systems, and responsive web/mobile flows.
  • - Defined information architecture, interaction patterns, and visual language.
  • - Created user stories and product documentation to support handoff.
  • - Prepared structured design handoff packages with wireframes, prototypes, interaction specs, and component documentation.
Achievements
  • - Reduced design-to-development handoff time by 40%.
  • - Improved task-flow efficiency by 25%.
  • - Delivered 400+ high-fidelity screens and interactive prototypes.
  • - Established foundational UX standards and design systems.

Frontend Developer

March 2020 - December 2025

Frontend Developer building a zero-to-one EdTech web platform using React, Next.js, TypeScript, Material UI, Tailwind CSS, and Redux Toolkit.

Responsibilities
  • - Developed core frontend features using Next.js, TypeScript, Tailwind CSS, and Material UI.
  • - Implemented global state management using Redux Toolkit.
  • - Translated high-fidelity Figma designs into responsive UI components.
  • - Built reusable component-driven UI architecture.
  • - Integrated frontend components with backend APIs and managed loading/error states.
  • - Implemented responsive layouts and accessibility improvements.
Achievements
  • - Transitioned the frontend codebase from React.js to Next.js.
  • - Delivered core MVP features including dashboards, onboarding flows, and content-driven interfaces.
  • - Improved state predictability and reduced UI bugs with Redux Toolkit slices.
  • - Strengthened design-to-code workflow through close collaboration during handoff.

Product Manager

June 2023 - December 2025

Product Manager leading the end-to-end lifecycle of a zero-to-one digital learning platform serving learners, educators, and content creators. Owned roadmap strategy, backlog prioritization, MVP delivery, and stakeholder alignment.

Responsibilities
  • - Owned and prioritized roadmap, epics, and feature backlog.
  • - Translated business requirements and research into user stories, workflows, and acceptance criteria.
  • - Prioritized backlog with MoSCoW and impact-effort frameworks.
  • - Facilitated Agile ceremonies and requirements sessions.
  • - Bridged engineering, design, and business stakeholders.
  • - Made scope, timeline, and priority tradeoffs for MVP delivery.
Achievements
  • - Authored 400+ detailed user stories.
  • - Delivered 120+ MVP features across web and mobile platform work.
  • - Reduced delivery cycle time by 30%.
  • - Increased early-stage tester satisfaction by 40%.

Process

From Research to Release.

I do not treat product work as a screen-production exercise. I move from market context and user understanding into product structure, interface systems, implementation, testing, and ongoing improvement.

Operating principles

The product has to make sense before the interface can feel right.

My process helps teams make decisions in the right order: understand the opportunity, define what matters, design the system, build the product behavior, then improve it with feedback.

Market fit before visual polishUser flows before isolated screensReusable systems before one-off UIBuildable stories before vague handoffData boundaries before backend shortcutsTesting and iteration before final claims

Journey map

01

02

03

04

05

01Discover the market and the real problem
02Define product goals and the experience structure
03Design the interaction, interface, and system
04Build the interface and product workflows
05Test, launch, learn, and improve

Phase 01

Market research

A clearer product brief that connects user needs, business goals, and realistic delivery constraints.

Discover the market and the real problem

I start by understanding the business context, market pressure, user pain, and constraints before suggesting screens or features.

Market research, problem discovery, target users, interviews, personas, and competitor analysis.

What happens here

  • Review the market, product category, and competing experiences.
  • Clarify the audience, use cases, decision makers, and adoption barriers.
  • Run stakeholder conversations, user interviews, or persona-based discovery when direct users are not yet available.
  • Separate symptoms from root problems so the team does not build the wrong thing faster.

Useful outputs

Research notesProblem framingAudience segmentsCompetitor patterns

Phase 02

Product goals

A shared product map that helps founders, product teams, designers, and engineers make the same tradeoffs.

Define product goals and the experience structure

Once the problem is clear, I turn ambiguity into a buildable product direction: goals, scope, flows, and information architecture.

Product goals, feature scope, information architecture, user flows, and success criteria.

What happens here

  • Translate research and stakeholder goals into product outcomes.
  • Prioritize MVP scope against effort, risk, and user value.
  • Map navigation, content hierarchy, user flows, edge cases, and system states.
  • Write user stories, acceptance criteria, and delivery notes that engineering can build from.

Useful outputs

Product goalsMVP scopeUser flowsInformation architectureUser stories

Phase 03

UX wireframing

A product experience that looks polished, behaves consistently, and is easier to implement without guesswork.

Design the interaction, interface, and system

I move from UX structure into wireframes, high-fidelity UI, reusable components, prototypes, and design-system rules.

UX wireframing, UI design, design systems, reusable components, responsive states, and prototyping.

What happens here

  • Sketch and wireframe core journeys before polishing visual details.
  • Design responsive screens, component states, empty states, errors, and accessibility-aware interactions.
  • Build reusable UI patterns for consistency across product surfaces.
  • Prototype key flows so stakeholders can review behavior, not only static screens.

Useful outputs

WireframesHigh-fidelity UIDesign systemPrototypeHandoff notes

Phase 04

Frontend development

A working product surface that respects the design intent while handling real implementation constraints.

Build the interface and product workflows

I translate the product design into responsive React/Next.js interfaces and practical server-side workflows where the product requires them.

Frontend development, component implementation, portal workflows, API integration, state, responsiveness, and QA.

What happens here

  • Create component-driven frontend interfaces with React, Next.js, TypeScript, Tailwind CSS, and UI systems.
  • Connect screens to APIs, authenticated sessions, and data states where the product requires it.
  • Account for loading states, errors, permissions, data boundaries, responsiveness, accessibility, and maintainability.
  • Use Claude and Codex to accelerate implementation, debugging, refactoring, and iteration while keeping product judgment in control.

Useful outputs

Frontend componentsIntegrated flowsPortal workflowsResponsive UIQA fixesImplementation notes

Phase 05

Testing

A product that can keep improving after release instead of becoming a one-time design handoff.

Test, launch, learn, and improve

The work does not stop at handoff. I test, gather feedback, improve friction points, and help the product mature after launch.

Testing, feedback, iteration, launch readiness, analytics thinking, and ongoing optimization.

What happens here

  • Review usability, visual quality, responsiveness, edge cases, and interaction details before release.
  • Collect feedback from stakeholders, testers, users, or product analytics where available.
  • Iterate on flows that create confusion, friction, hesitation, or unnecessary engineering complexity.
  • Support launch readiness, post-launch improvements, and product-system cleanup.

Useful outputs

Usability notesIteration backlogLaunch fixesOptimization ideasSystem improvements