Small organisations that need a shared directory without the weight of a full CRM; company admins and platform operators.
Featured deep case · Multi-company contact management · Functional web app
ContactHub
A PHP/MySQL contact-management product with company workspaces, shared and personal records, permissions, groups and CSV import.
Role & scopeProduct structure · UX/UI · Full-stack implementation
Product surfaceAuthentication, roles, contacts, groups, import, administration
OutcomeA working multi-tenant MVP and a safe static product walkthrough
EvidenceSource code, database schema and documented browser-tested flows
01 / Context
The problem behind the screen
A contact directory looks simple until ownership and permissions matter. Users need personal records, companies need shared records, administrators need control, and a super-admin must manage organisations without exposing one company’s data to another.
A working multi-tenant MVP and a safe static product walkthrough.
02 / UX logic
Decisions with a reason
Make ownership visible
Shared and personal contacts use explicit labels and filter states. Permission is communicated in the table instead of appearing only after an edit fails.
Design roles around real tasks
User, company admin and super-admin navigation changes with responsibility. Impersonation is visibly signposted so platform operators know when they are viewing a company context.
Treat empty and recovery states as product states
The interface includes first-contact guidance, no-filter-results feedback, CSV import paths and confirmation patterns rather than assuming a populated happy path.
03 / Structure
From intent to interface
Retrospective reconstruction. These wireframes clarify the interaction logic visible in the implemented product; they are not presented as original dated research artifacts.
Workspace01
Find02
Act03
04 / UI system
Visual choices support the task
A dense but calm blue-grey system prioritises tables and operational clarity. Consistent badges carry ownership and role meaning, while modal forms keep CRUD work — create, read, update and delete — inside the directory context.
#12223d
#2e6cff
#eef4ff
#16794b
05 / Final interface
The designed experience
06 / Outcome & evidence
What is proven — and what is not
Delivered outcome
The repository contains the working server application, setup schema and role-aware screens. For portfolio safety, the public version is a standalone walkthrough with sample data only: it exposes no database, credentials, accounts or client records.