LemangDijo.com

Temo Crop Management System (Temo CMS)

(formerly Temo Letlotlo)

A national agricultural digital platform for the Ministry of Lands and Agriculture – Botswana that helps farmers manage their crops, farms, applications, approvals, inventory, and government interactions. Worked as a consultant to Botswana International University of Science and Technology (BIUST), leading the major transition by redesigning and enhancing both the user experience and frontend architecture.

UI/UX DesignerFrontend DeveloperConsultant to BIUSTMinistry of Lands and Agriculture
ReactTypeScriptTailwind CSSFigmaDesign Systems
LemangDijo.com

Project Overview

Temo CMS is a national agricultural platform for the Ministry of Lands and Agriculture in Botswana. It connects farmers, extension officers, and government administrators in one system for managing crops, farm applications, approvals, and inventory.

As a consultant to BIUST, I led the platform's major transition: a full UI/UX redesign and frontend overhaul to support the new Lemang Dijo brand identity. I rebuilt the design system, rewrote user flows, and rearchitected the frontend in React and TypeScript.

The hardest part was balancing complex government workflows with interfaces that worked for farmers across different literacy levels, on varied devices, with limited connectivity.

Agricultural Focus

National platform

Brand Redesign

Complete UI overhaul

Frontend Dev

React & TypeScript

Security

Enhanced protection

Design Contribution

Led the complete design transformation for the Lemang Dijo rebrand

Design System
Built the design system for the new Lemang Dijo identity: colour tokens, typography scale, spacing system, grids, and reusable components
  • •Colour tokens & palettes
  • •Typography scale & hierarchy
  • •Spacing & grid systems
  • •Reusable component library
  • •Visual consistency standards
User Flows & Wireframes
Designed user flows for all four user types, from initial wireframes through to high-fidelity handoff
  • •Farmer journey mapping
  • •Extension officer workflows
  • •Administrator interfaces
  • •Low-fidelity wireframes
  • •High-fidelity mockups
UI Designs & Prototypes
Created detailed UI screens and interactive prototypes for stakeholder review and development handoff
  • •Dashboard revamps
  • •Form layouts & components
  • •Tabular data interfaces
  • •Interactive prototypes
  • •Feature sign-off demos
Iterations & Improvements
Conducted continuous refinement based on stakeholder feedback and real user testing
  • •UX bottleneck resolution
  • •Alignment & consistency fixes
  • •Layout responsiveness
  • •Accessibility enhancements
  • •Readability improvements

Frontend Development Contribution

Rebuilt the frontend from the ground up: accurate to Figma, performant, and more secure

Implemented Frontend Features
Converted all Figma screens into functional, responsive frontend interfaces
  • •Accurate design implementation
  • •Responsive component development
  • •React + TypeScript architecture
  • •Tailwind CSS styling
  • •Modern pattern adoption
Code Optimization
Refactored existing codebase to improve maintainability and performance
  • •Removed code duplication
  • •Enhanced readability
  • •Better state management
  • •Improved component structure
  • •Logic cleanup & optimization
Security Improvements
Enhanced frontend security practices across the entire application
  • •Input sanitization
  • •Safer routing patterns
  • •Secure context handling
  • •Enhanced form validations
  • •Protected routes & access control
Theming & Styling
Applied the new brand identity through a token-based theming system used across every screen
  • •Global theme implementation
  • •Typography system
  • •Colour palette integration
  • •Spacing consistency
  • •Updated UI components

Platform Capabilities

Core modules covering farming, administration, and government interactions

🌾
Crop Management
Track crop cycles, planting schedules, and harvest data with detailed analytics
🚜
Farm Administration
Manage farm profiles, land parcels, and agricultural resources efficiently
📋
Applications & Approvals
Submit and track government applications with streamlined approval workflows
📦
Inventory Management
Monitor seeds, fertilizers, equipment, and other agricultural inputs
📊
Farmer Dashboard
Single view of all farming activities, notifications, and insights
🏛️
Government Integration
Direct connection to Ministry of Agriculture services, applications, and programmes

My Process on This Project

How the work unfolded — from first conversation with the Ministry to shipped code

01

Research

Interviewed farmers, extension officers & Ministry staff to map real workflows

02

Define

Mapped user journeys per role, identified friction in the legacy system

03

Design

Built design system, wireframes & high-fidelity screens in Figma

04

Build

Rebuilt frontend in React & TypeScript with improved patterns

05

Ship

Presented to BIUST & Ministry stakeholders, incorporated sign-off feedback

06

Iterate

Ran ongoing review cycles, resolved UX bottlenecks post-launch

Competencies Demonstrated

User & Business Insight

Grounded every screen in field research with farmers and Ministry staff before any design work began.

Stakeholder Engagement

Presented to BIUST and Ministry representatives at each milestone; iterated based on institutional feedback.

Design System & Documentation

Delivered a full token-based design system and documented handoff specs so the dev team could build consistently.

Experience & Interface Design

Simplified complex government workflows into clear, step-by-step interfaces accessible to varying literacy levels.

Technology Enablement

Led a full React & TypeScript frontend rebuild, refactoring legacy code and raising the technical baseline.

Usability & Accessibility

Embedded contrast ratios, logical tab order, and explicit labelling from day one — not as an afterthought.

Quality Assurance

Reviewed every build against Figma specs and flagged deviations before they reached the live environment.

Continuous Improvement

Maintained ongoing stakeholder review cycles, resolving UX friction points across the entire engagement.

Interested in This Project?

Visit the live platform to see how Temo CMS is being used by farmers and government administrators across Botswana.