Desktop to mobile passport application animation for HelloGov

More than 60% of HelloGov’s traffic came from phones, so mobile couldn’t be a squeezed-down copy of desktop. Every detail that keeps people moving through the application had to survive the smaller screen, or conversions would drop.

Progress is one of those details. On desktop, a sidebar sits beside every question with the five steps of the application and how far along you are: 10%, step 1 of 17. A passport application is long, and knowing where you are and how much is left is what keeps people going. On a phone there’s no room for a sidebar, and the easy move is to cut it.

Instead, it folds into a dropdown at the top of the page. The current step, the percentage and a progress bar stay in view, and one tap opens the full summary, the same steps and progress as on desktop. The animation follows that path: the page narrows to phone width, the sidebar folds into the dropdown, and a tap brings the summary back.