Mobile first design : The 90% Reality Check
00
Shifting to a Mobile-First culture after discovering 90% of our users incorporate via smartphone.
Problem
As a team, we worked on wide monitors, so we naturally designed for them. However, a deep dive into our analytics revealed a stark disconnect: +90% of our users were accessing the platform via mobile.
Our existing interface was not optimized for this and was breaking on small screens. This heavily impacted the user experience during onboarding. Because our registration flow was already dense, users were forced to pinch-to-zoom on complex legal forms, leading to high friction and mis-clicks. We realized we were designing for the ideal scenario, not the real one.
Solution
Our initial mobile approach was lazy: we simply shrank the desktop view. I decided to stop treating mobile as a "small desktop" and to put it at the center of all of our design decisions. I started designing it as a native experience. The core strategy was simple: on mobile, the screen is the container.
1. The Questionnaire: Utilizing Full Width
Our original mobile design mimicked the desktop "card" layout, placing questions inside a white box on a gray background. This wasted valuable pixels and made the text feel cramped.
The Fixes:
- I removed the card container entirely for mobile. The interface now uses the full width of the screen, feeling native and breathable, while the desktop version got a larger, cleaner card to let the content breathe.
- I moved primary validation buttons to a fixed bottom bar on mobile, ensuring the CTA is sticky and always within the user's thumb reach.
2. The Paywall: Removing Visual Noise
The payment screen suffered from the same issue : squished information inside a small mobile card. Additionally, it was overcrowed with a lot of information (detailed price plan, disclaimer, tips…) as we were testing what was driving conversion at the time. Because of this, sometimes the user had to scroll down to see the CTA.
The Fix: I stripped away the framing and simplified the information we showed. The paywall now acts as a full-screen view, with CTA visible when landing on the screen.
3. Pricing Plans: Swiping vs. Stacking
Comparing complex pricing plans on a vertical mobile screen was difficult. The old version forced users to scroll up and down to remember features. It wasn't optimised for mobile at all.
The Fix: I introduced a horizontal swipe interaction. Users can now swipe between plans like a carousel. This keeps the comparison context intact and uses familiar mobile gestures to navigate options.
The Impact
A New Design Standard : This project triggered a fundamental change in our product culture. Following this redesign, we inverted our entire workflow. We now design all client-facing features for mobile first, ensuring the constraints of the smallest screen dictate the clarity of the flow.
By aligning our interface with the reality of our 90% mobile user base, we improved usability, but we also acknowledged that for modern entrepreneurs, business happens in their pocket, not at a desk.
see also
