Tiroeteng.com

Marketplace for Jobs, Vacancies, Freelancers & Tenders

A marketplace platform connecting employers, freelancers, and organisations through job listings, vacancies, freelance opportunities, and tender management. Contributed as both Product Designer and Frontend Developer across the full design and build.

Product DesignerFrontend Developer
ReactTypeScriptTailwind CSSFigmaDesign Systems
Tiroeteng.com

Project Overview

Tiroeteng.com connects job seekers, employers, freelancers, and organisations on one platform. Each user type has distinct needs: a job seeker browses differently to an employer shortlisting, and a freelancer pitches differently to an organisation managing tenders.

As lead designer and frontend developer, I built the full design system, translated every screen to production code, and worked directly with backend engineers on API integration and authentication flows.

The challenge was keeping four user roles coherent within a single product without the interface feeling bloated or confusing for any one of them.

Design System

Complete UI/UX design

Frontend Dev

React & TypeScript

User Flows

Multi-role experiences

Prototyping

Interactive demos

Design Contribution

As lead designer, I built the design system and defined the user experience across all four roles

🎨
Design System
Built a complete design system: colour tokens, typography, components, spacing scale, and interaction patterns
📐
Wireframes
Designed low-fidelity wireframes for all core screens to establish information architecture
🔄
User Flows
Created comprehensive user flows for job seekers, employers, freelancers, and tender participants
✨
High-Fidelity UI
Designed high-fidelity screens in Figma, accurate to the final build, for all four user roles
🔗
Prototyping
Built clickable prototypes for stakeholder sign-off and developer handoff
♿
Accessibility
Ensured accessibility, scalability, and consistent UI rules across all pages

Frontend Development

Turned every Figma screen into working React code, accurate and performant

💻
Design Implementation
Translated all Figma designs into responsive React and TypeScript screens, true to the original layouts
🧩
Component Architecture
Implemented component reuse using modular React patterns and Tailwind CSS for maintainability
⚡
Code Quality
Applied TypeScript best practices throughout for clean, maintainable, and type-safe code
🚀
Performance
Improved performance through code splitting, lazy loading, and optimized state management
🔌
API Integration
Worked directly with backend engineers to integrate APIs and authentication flows
🔄
Agile Workflow
Participated in daily standups, sprint reviews, and QA testing for continuous delivery

⭐ Key Screens I Worked On

Designed and developed comprehensive interfaces for all user roles

Dashboard
Comprehensive overview with analytics, recent activity, and quick actions for all user types
Marketplace Listings
Advanced filtering, search, and sorting for jobs, vacancies, freelance gigs, and tenders
Application Flows
Multi-step application forms for jobs, freelance proposals, and tender submissions
Admin Interfaces
Powerful admin tools for managing listings, users, and marketplace operations
User Profiles
Detailed user profiles with role management, permissions, and activity history
Authentication
Secure login, registration, and onboarding flows with email verification

How I Approached This Project

Process and competencies behind every decision on Tiroeteng

01ResearchMapped 4 user roles: seekers, employers, freelancers & tender orgs
02DefineEstablished marketplace structure, filters & multi-role user flows
03DesignBuilt full design system + high-fidelity Figma screens per role
04BuildTranslated all screens to React + TypeScript with modular components
05ShipQA cycles with stakeholder review before each feature release
06IterateAgile sprints with continuous feedback from product & backend teams

User & Business Insight

Researched 4 distinct user types before designing any screen, letting role differences drive every filter and listing pattern.

Stakeholder Engagement

Presented designs in sprint reviews, incorporated feedback before handoff, and kept backend engineers aligned throughout.

Design System & Docs

Delivered colour tokens, typography scale, spacing rules, and a component library so every marketplace screen shared the same visual logic.

Interface Design

Tuned information density and CTAs for desktop employers and mobile job seekers without fragmenting the design system.

Technology Enablement

Built modular React + TypeScript components with Tailwind CSS and collaborated on API integration and auth flows.

Usability & Accessibility

Designed accessible contrast, keyboard-navigable flows, and validated interfaces through stakeholder walkthroughs.

Quality Assurance

Participated in QA cycles reviewing screens against spec and flagging regressions before each sprint release.

Continuous Improvement

Applied code splitting, lazy loading, and state management improvements while adopting agile practices to deliver incrementally.

Interested in This Project?

Visit the live platform to explore the complete marketplace for jobs, vacancies, freelancers, and tenders.