Case study 03 · Client work at Setup Phils, Inc.
BMI Global Education Exhibitor PortalFewer detours through a large exhibitor portal
- Role
- UI/UX lead & frontend developer (team project)
- Client
- BMI Global Education (part of Times Higher Education)
- Timeline
- Setup Phils
- Stack
- Next.js, React, TypeScript, Tailwind CSS, shadcn/ui, AG Grid, React Hook Form, Zod, Zustand, SWR, Tiptap, Sentry, k6, Amazon S3, Figma
The 30-second version
- What it is
- The business portal institutions use to take part in student fairs as exhibitors.
- The problem
- An outdated system with many connected modules — users hopped between pages to find things.
- My role
- Led design, documentation, and UI/UX decisions; built frontend in Next.js and React.
- Key challenge
- Simplifying a complex system without removing anything exhibitors need.
Outcome
An exhibitor said they could complete the required information in a few minutes.
User feedback
Overview
One of my largest and proudest projects — and the first where I led the design, documentation, and UI/UX decisions.
The goal wasn't a new coat of paint. It was making a big system feel small enough to use.
Business context
- Exhibitors are the universities and schools that take part in the fairs.
- They use the portal to manage their participation and provide required information.
- The replacement application was built with Next.js and React.
The problem
- Outdated design and real usability problems.
- Many interconnected modules.
- Finding information or finishing a task often meant moving across several pages.
My role
I led design, documentation, and UI/UX on a team build. That meant:
- Simplifying existing modules and workflows.
- Improving the information architecture.
- Cutting unnecessary navigation so users finish tasks in fewer clicks.
- Documenting the direction so the team could build from a shared plan.
- Building frontend features in Next.js and React.
Features I built or substantially changed
Checkout: worked on moving checkout to the payment provider's session-based flow, with checkout details trusted from the server, sessions that expire sooner and can't be reused, and clearer payment outcome messages. Added checkout shortcuts beside service tables, and a free-option checkout that skips payment.
Hotel booking: reworked rate editing, validation, and availability display; blocked changes to hotel setups already in use; fixed a date that shifted by one day after saving; and standardized dates to DD/MM/YYYY.
Stand booking: per-day exhibitor limits with validation, a clearer overflow indicator, consistent currency display, and no duplicate city selection.
Representatives: city badge-limit warnings in the table, with an admin override when allowed.
Terms and conditions: an admin page with a rich-text editor to publish terms, and a dialog where clients accept them during hotel checkout. Length limits moved into validation so text is never silently reverted.
Admin settings: a reworked settings sidebar, role permissions, stricter user-management permissions, password updates from the edit dialog, maintenance mode with access gating, admin-only event deletion, and schedules grouped by active status.
Reports: a transaction history report with sorting, pagination, and export.
Exhibitor profile: About Us content in English, Portuguese, Spanish, and Vietnamese, plus admin-editable rich-text headers above exhibitor service tabs.
Forms everywhere: a shared unsaved-changes banner that stays in view on long forms and clears after saving, consistent success and error toasts, and fixes to numeric and alphabetical sorting in data tables.
Spreadsheet prototype: import and export of styled Excel files inside the portal.
Technical approach
- Next.js and React for the application.
- Tailwind CSS and shadcn/ui for a consistent component base.
- Amazon S3 for cloud image storage.
- React Hook Form and Zod for form state and validation; Zustand and SWR for client state and data loading.
- AG Grid for the data-heavy admin and client tables.
- Sentry for error monitoring, and k6 load tests running in CI.
- Automated code-standards and PR-format checks, plus a workflow that opens release PRs automatically.
UI/UX decisions
Most of my work here was deciding how the product should behave, before writing code.
- Bring related information together instead of spreading it across modules.
- Make the next step obvious, so users don't have to learn the system first.
- Reuse consistent patterns so each new screen feels familiar.
Before — hop between modules
- Module
- Another page
- Back
- Another module
- Task
After — related info in one place
Task view
What you need, next to where you act.
Challenges & trade-offs
The hardest part was simplifying a complex system without removing necessary functionality.
- Deciding what to merge, what to move, and what to keep separate.
- Making common tasks intuitive while still supporting less common ones.
- Hardening security without slowing users down: removed debug logging that exposed user data, tightened security headers and the logout flow, and enforced admin-only event creation.
Results & evidence
- User feedback
Exhibitors said the new portal was easier to use than the previous system.
- User feedback
One exhibitor completed the required information in a few minutes.
- User feedback
Users found it easier to locate information and finish tasks with fewer clicks.
- Platform usage · whole team· Fall 2025 – Spring 2026
The portal handled over 360 institution bookings in Fall 2025, and over 360 again in Spring 2026.
- Platform usage · whole team· to 9 Oct 2026
Over 730 institution bookings so far in 2026, with Fall 2026 fairs still running.
- Work record
Over 40 AI coding-agent tasks scoped, reviewed, and merged.
Lessons learned
- Implementation is the last step. Understanding the task comes first.
- Documentation is what turns design decisions into team decisions.
- Removing steps is often more valuable than adding features.