MKT Investments
Building a corporate website that reads like a credible institution. MKT Investments needed a digital presence that could carry weight with partners, trustees, procurement stakeholders, and community beneficiaries—without looking like a template site.
This project wasn’t “make pages and ship.” It was a translation problem: convert a designer’s sitemap and wireframe intent into a real, scalable WordPress implementation where content can be edited safely, layouts remain consistent across breakpoints, and the site communicates trust before a single sentence is read.
Live Site: mktinvestments.co.za/en
Focus: responsive build, CMS-safe structure, clean service hierarchy, and production-ready polish.
- Role Developer • WordPress Implementer • UI Engineer
- Timeline 2024
- Collaboration Worked closely with a UX/UI Designer
- Stack WordPress, Sitejet Builder, HTML, Tailwind CSS, JavaScript
- Focus Responsive Implementation • Component Consistency • CMS Structuring
- Status Live & Deployed
6+
Core Site Sections
4
Service Templates
1
PPE Catalogue Flow
CMS
Editable Without Breaking Layout
Implementation headline: This build was about legibility + authority. Every decision—navigation depth, page rhythm, component spacing, and CTA placement—was engineered to make MKT feel credible to stakeholders who judge professionalism in seconds.
The Story: Turning Structure Into Trust
“A corporate site isn’t just content. It’s a credibility interface.”
— Build principle used throughout implementation
“Consistency is what makes a multi-page site feel like one product.”
— Why component rhythm mattered
MKT’s content spans service offerings, procurement pathways, community involvement, and ongoing news—meaning the site had to support different intent states: “What do you do?” “How do I engage?” “What have you done?” and “Can I trust you?” The designer delivered a sitemap + wireframe system that mapped the experience. My job was to make it real in a CMS environment where non-technical edits are inevitable.
Constraint That Shaped Everything
Build it fast—but don’t build it fragile. The site needed to be editable, but also resilient: headings shouldn’t collapse spacing, images shouldn’t break grids, and new posts shouldn’t distort layout rhythm. This is the difference between “a website” and “a maintainable product.”
What I Built
1) Navigation + Information Hierarchy
Implemented multi-level navigation that reflects stakeholder mental models: Services are discoverable without burying subpages, and “Our Involvement” is structured to read as impact—not a random list of links. Mobile nav behavior was tuned to keep depth without overwhelming the screen.
Result: Clear wayfinding across a dense content system.
2) Service Templates That Stay Consistent
Built a repeatable page rhythm for Consultancy & Advisory, Investments, Procurement, and Capacity Building—so the site feels like one product, not a set of unrelated pages. Tailwind utilities were used to keep spacing, typography, and component behavior predictable.
Result: A scalable system for future expansion.
3) Procurement → PPE Catalogue Pathway
Implemented the procurement funnel as a deliberate user journey: explain procurement services, then route users into the PPE catalogue flow with clear calls-to-action. This is where “corporate content” becomes “operational intent.”
Result: A clearer conversion path for procurement enquiries.
4) CMS-Safe Blog / News System
Configured blog listing + single-post templates so MKT can publish updates without breaking layout. Posts inherit stable typography rules, media constraints, and spacing rhythm—so every new article looks intentional.
Result: Stakeholders can publish confidently without dev support.
Technical Notes
Platform: WordPress • Builder: Sitejet • Front-End: HTML + Tailwind CSS • Interactivity: Vanilla JavaScript
The emphasis was minimal dependency overhead, predictable responsive behavior, and maintainability under real-world content edits.
Collaboration: Designer Intent → Production Reality
The designer owned the experience structure (sitemap + wireframes). I owned the build: turning those artifacts into a functioning system that behaves correctly on real devices, supports real content, and doesn’t degrade over time. This project is a clean example of how I work with designers: preserve intent, surface risk early, and ship a build that still looks good after non-technical stakeholders start editing.
How We Worked
- • Sitemap alignment → page inventory + navigation decisions
- • Wireframe translation → responsive layout rules
- • Component mapping → reusable sections & consistent spacing
- • QA cycles → layout integrity across breakpoints
What I Protected
- • Visual hierarchy (headline rhythm, spacing, CTA placement)
- • Consistency (same component = same behavior everywhere)
- • CMS safety (content edits don’t destroy layout)
- • Performance (lean JS, stable responsive grid)
Outcome: A Site That Feels Like an Organization
The finished site communicates professionalism quickly: clear service hierarchy, credible page rhythm, and a maintainable CMS structure. It’s built to last—meaning the system remains coherent even as content evolves.
Why This Matters In My Portfolio
This project shows I can operate as the “bridge” between design and production: I take structure from a designer and ship a real website that preserves intent, performs well, and stays editable. It’s a developer story—but it’s also a product craft story.