About Project
MT Cidadão 2.0
What the citizen needs to sort out comes first. The redesign focused on two screens at the centre of the experience: Login and Home.
The aim was to bring information that demands attention to the front — deadlines, documents and pending items — cutting visual noise and making navigation more direct. I also used motion and micro-interactions to reinforce feedback, continuity and identity within the experience.
Login and home, and the brand in motion.
Concept, design and prototype. What changed on the two screens:
- The way in now has a single path, with nothing competing for attention;
- Urgent items moved to the top of the home, with the deadline and amount in plain sight;
- Shortcuts reorder themselves around the services each person uses most;
- The digital wallet got a permanent place in the navigation;
- The emergency button was redrawn to be recognised at a glance;
- The brand gained an animation of its own, shown at launch and on the login screen.
Identity in motion
The signal icon in the logo gained behaviour of its own. It loops here exactly as it does when the app opens.
The three arcs light up from the inside out, like a signal searching for a connection, and the centre dot pulses once each time around. The mark stops being a static stamp and gains a way of introducing itself that people recognise.
Animation with purpose, not decoration.
In the interface, motion is there to orient, to confirm actions and to reduce uncertainty. The emergency button, for instance, asks for confirmation before placing the call, so it is never triggered by accident.
- Haptic feedback confirms certain actions at the moment of touch;
- Transitions help explain changes of state and the continuity of the flow;
- The animations also respect the system’s reduced-motion preference.
Run the prototype
Not a video, not an image: you can actually move around it. Come in through the login, browse the home, open emergency and notifications. It only loads when you ask for it.
Or full screen: MT Cidadão prototype.
