FYP(Sem B) Week 6: Drawing Every Screen Before Touching Code

We made a rule this week — nobody opens VS Code until the wireframes are done. It was hard to resist honestly because some of us just wanted to start building. But we forced ourselves to map out every single screen a player would go through.

We drew out the full user flow on a whiteboard first. Login leads to role assignment, then dashboard, then marketplace, then negotiation, and eventually the game ends at the leaderboard. Simple enough on paper but when you start thinking about all the little screens in between — confirmation popups, error states, empty states when there is nothing listed on the marketplace — it gets complicated fast.

We wireframed the main pages: login/lobby, dashboard, marketplace, trader page, facility view, and leaderboard. We kept everything low fidelity on purpose. Grey boxes, placeholder text, no colours. The point was to nail the layout and flow without anyone getting attached to how it looks visually. We have all been in that situation before where someone spends hours making a button look pretty and then the whole layout changes and that work is wasted.

Everyone reviewed each wireframe and we argued about a few things — like whether the marketplace filter should be a sidebar or a top bar, and where the day counter should sit on the dashboard. Small things but they matter.