Solo, replacing the previous agency
Phygital Center
An MVP mobile app for centres in a federal sports programme. The previous agency spent several months and did not deliver, so I designed it again, alone, in a little over a month.
- Product design
- UI/UX
- Mobile interfaces
What the product is
A federal programme overseen by the sports ministry and tied to the Games of the Future: a network of centres where physical sport and esports stand side by side. Five-a-side football, basketball and volleyball next to FIFA and CS, and a person develops in both directions at once, in any proportion.
What phygital means
The word is two words: physical and digital. Physical sport and esports pulled into one discipline and one building.
A person plays a FIFA match, walks onto the pitch in the same centre an hour later, and their progress counts both halves at once.
The client arrived in a panic
The previous contractor had worked on it for months and had not delivered. They needed an MVP, but a dense one, so the centre could open.
I did it alone, in a little over a month. This is work from 2022, shown as it was.
What I did
Took the requirements apart from scratch. There was no architecture: I sat with someone from the client team and went through every item of the flow chart they had brought.
Roles and progress for a physical athlete and an esports player in any chosen proportion, achievements, quests, rankings.
The economy and the booking: wallet, booking for one person and for a team, invitations, payment.
The empty state and the full one. The empty screen is what a person actually meets first.
The centres
The programme is federal and the centres are being built across the country. The app was designed for them, so this is not only screens.
Some centres already stand, some are still renders. Inside it is the same thing: pitches for football, basketball and volleyball, an esports hall next door, and one person visits both in an evening.
- 60regions on one platform
- 20k+athletes in the ecosystem
- 450+events run through the platform
From chaos to a working MVP
There was no current product architecture. They brought a flow chart that had words in it but no meaning, so I sat with someone from the client team and took every item apart.
This repeats across my projects: domain knowledge lives in people's heads, and the only way to get it out is conversation. The result of that analysis is the main artefact of this case, the screens come second.
The map zooms and drags. Click it first, then the wheel works.
- 70screens in the MVP
- 50+mechanics and scenarios
Click to zoom with the wheel
Seventy screens
The whole MVP on one sheet. That is how many screens it took to get the centre open: roles and progress, achievements and quests, booking, wallet, tournaments, settings, empty states.
Sign-in and registration
You can come in by phone or by email, and it is one path repeated in two channels. The first screen is shared, then the pairs: phone on the left, email on the right.
The third button is the Phygital ID. The order follows what people actually use: phone as the large button, the ID second, email as a line with no button at all.
Three ways in, and they are not equal. Both paths below start here.
Phone. A number and a code; there is no password on this path.
Email. The same screen, a different field.
The code from the text. Resend sits next to the field.
The code from the email. It repeats the phone screen; only the line on top changes.
Registration and the second channel
The registration form differs between the two paths by exactly one field, and after it each one picks up the channel it is missing. Whichever way a person came in, the centre ends up with both a phone and an email.
Came by phone: the form has an email. Plus the warning inside the form: on a first visit the details are checked against a passport.
Came by email: no email field. It is already known, so asking twice is pointless.
The email earns its keep in the computer hall. A temporary password goes there for a club machine: the app lives on a phone, and half the centre is an esports hall.
The phone is confirmed after the form. Field and code on one screen: the step is plumbing.
Centre, direction, disciplines
Registration does not end with the form. Next a person picks a centre, sets the proportion of physical to esports, marks their disciplines and takes an avatar. These are the roles and progress from earlier, met at the door.
Map and list are one choice shown twice. A centre is looked up by where it is and by what is inside it: the line-ups differ.
The list is for when the map does not help. What decides is not distance but whether the right court is there: PCs, five-a-side, PS5, streetball. The card carries both the address and the line-up.
The proportion, turned into a screen. Physical, Brain, All-rounder: 75 to 25, 25 to 75, or even. The direction is chosen once a season, and the deadline sits right there so the choice does not read as permanent.
Disciplines come in pairs. FIFA with five-a-side, NBA with streetball. Three at most: quests and rankings hang off them, and picking everything would hollow out both.
An avatar from three presets. No uploads in the MVP, which also means no moderation queue. A person still has a face from day one.
The main screens
The profile is recoloured by direction: purple for the Brain, blue for the Physical. The colour carries into the card people share.
Notifications push the content down. They arrive inside the same screen instead of floating over it: an invitation to the computer zone is accepted or declined right there in the feed.
The phygital card is built to be screenshotted. Handle, team, age, achievements, points: this is the part people share, and it has to live outside the app.
There are three directions and the sheet shows two. The third is the All-rounder, an even split, and its profile works the same way.
Getting into the hall
When this was designed, nobody had settled how a person actually gets through the turnstile. So both routes were drawn: the phone reads the code on the turnstile, and the turnstile reads the code on the phone. Which hardware the centres would get was a later answer, and the mockups were needed earlier.
Not active yet. Before the first visit the code does nothing: an administrator verifies the account against a passport. The screen says what to go and do, not that something went wrong.
The phone reads the turnstile. A framing overlay on the live camera, then through you go.
Or the other way round, the turnstile reads the phone. Same entry, opposite direction. The second option cost one screen and removed a dependency on hardware nobody had chosen.
Notifications are sorted by kind. An invitation is accepted or declined on the spot, a booking reminds you of itself, a quest and a tip lead inward. Filters on top, because mixing these into one feed helps nobody.
Booking
Zone, date, time, package, seat. Time is taken by the minute or in blocks, a seat singly or several at once. Several means a team: a five-person bootcamp, or a whole pitch for twelve.
Zones in one menu. PCs, consoles, VR, five-a-side, streetball, workout. Half digital, half physical, chosen from a single list.
The date is the same everywhere. Up to this step paid and free centres behave identically; after it they part.
By the minute. Start and end on dials, with the price and the points underneath.
Or in blocks. One, two, four hours, for people who would rather not count minutes.
A seat, or several. Taken in red, free in white, chosen in green. The tally sits underneath: how many seats and what they cost.
Paid centre and free
Centres come paid and free, and this is not two different apps. The screen is one; the difference is money, present in one case and absent in the other.
No separate mockup was drawn for the second kind of centre. Same step, same order, same elements, only part of the data never arrives.
Paid: a block with a price. Every block of time carries a price and the points it earns.
Free: the same block. Duration and the choice itself are what remain.
Paid: a seat with a tally. The sum and the points for the booking sit at the bottom.
Free: a seat with no tally. Only the seats themselves are counted.
Checkout
There is one summary screen, assembled differently each time: paid centre against free, a seat against a whole pitch. Plus two outcomes, because payment does not always go through.
Payment is made of three sources at once. Account, points and card are toggles rather than a single choice: part of the sum can go on points and the rest on a card. The points rate is written next to the toggle, not buried in the rules.
Paid centre. Centre, time, seats, and beneath them three payment sources and the total. The button leads to payment.
Free centre. The top is the same, the payment part is gone entirely. The verb on the button changes too: book, not pay.
A whole pitch instead of seats. The seat line becomes a zone and a capacity, twelve people. The rest of the summary holds.
The team starts here. People are invited after the booking, not before: first the slot is held, then the players gather around it.
It failed. The screen says what happened and who will get in touch. Without that a person books again and pays twice.
Who joins the booking
When a whole pitch or several machines are booked, people are gathered around it. They are found by handle, the one invented at registration.
The seat counter stays visible through the search. One of twelve added sits above the field, because the capacity came from the booking: you invite as many as you took.
Recent people first. The list opens on those you have played with: line-ups repeat more often than they change, and there is nothing to search for.
Search by handle. The handle is the identity here: the centre needs a phone and an email, players know each other by name.
The added ones collect in place. Each button flips to cancel, and the whole line-up stays visible until it is saved.
The booking with its line-up. Opened from a notification. From here the session starts, the participants change and the booking is shared.
Cancelling gets its own screen. The action cannot be undone and it hits everyone invited, so it asks rather than sitting in a row of buttons.
The shared pages
Points, achievements, the leaderboard, a tournament and a team. These are not steps on a route but places people return to, so they go on one sheet.
Points carry their rate and their deadline. Five hundred tokens for a hundred rating points, the date the balance dies, and the condition: not everyone may convert, a rating is required. All of it on the screen rather than in the rules.
The leaderboard always contains you. The top places first, then your own neighbourhood with your row inside it: a table without yourself in it is not worth reading.
A tournament keeps its requirements next to the sign-up. A team of five, a rating of at least 1500, the deadline. A refusal on those grounds should happen before the application, not after.
