Work / UI/UX
Lottery Back Office
UI/UX overhaul and front-end build of the admin dashboard behind a lottery platform — 69 screens, two brands, light and dark.
- Role
- UI/UX redesign + front-end
- Client
- Thailand-based lottery platform (at work)
- Type
- UI/UX
- Links
- Private · internal tool
The problem
The app worked, but every screen had grown its own way of doing things: coloured borders on every card, filters hidden behind a builder, errors hidden on wizard steps.
What I built
I redesigned all 69 screens as one calm system — 13 neutrals, one brand accent, no shadows — then built the front end on MUI. One codebase serves two brands, each in light and dark, in Thai and English.
Where it is now
Shipped as the internal back office for the operator's team. It's a private tool, so there's no public link.
Stack
- Routing
- Next.js Pages Router
- UI
- MUI v5 + Emotion, MUI X DataGrid + DataGrid Pro for big tables
- Server data
- React Query v3 + Axios
- App state
- Redux Toolkit
- Forms
- React Hook Form + Yup
- Translations
- i18next (Thai by default, plus English)
- Permissions
- CASL
- Charts
- Recharts and ApexCharts
- Small stuff
- react-hot-toast, react-datepicker, Iconify icons
- Tooling
- Jest, ESLint 9, Prettier
- Deploy
- Docker + Bitbucket Pipelines
Want something like Lottery Back Office?