Role: UX design lead
Timeline: 8 weeks
Team: Product manager, 2x FE Developers, User researcher
Project overview
Ratio.City began as a web-based platform used in offices by urban planners, architects and developers. Use on mobile was not considered in the original build, so our challenge was to translate our current data-heavy experience into a mobile-first product; maintaining depth of features while embracing the unique opportunities of mobile interaction.
The Problem
• App not designed for mobile; some tools were unusable and others very difficult
• Build up of feedback from users stating they would use mobile product during meetings and on the go
• Falling behind competitors not offering a mobile friendly service; a way to stand out of the crowd
• Internal challenges of time timelines; we only had 3 weeks with the front-end team for build
• Build up of feedback from users stating they would use mobile product during meetings and on the go
• Falling behind competitors not offering a mobile friendly service; a way to stand out of the crowd
• Internal challenges of time timelines; we only had 3 weeks with the front-end team for build
Business objectives
• Become the go-too tool for mobile
• Optimise mobile service for our core mobile friendly tools: Explore, Projects, Reports
• Increase the % of mobile users from 4% to 10% in 12 months.
• Pass a mobile accessibility audit across all tools
• Create a plan to build mobile capabilities up gradually over 1 year period; optimizing mobile specific interactions
• Optimise mobile service for our core mobile friendly tools: Explore, Projects, Reports
• Increase the % of mobile users from 4% to 10% in 12 months.
• Pass a mobile accessibility audit across all tools
• Create a plan to build mobile capabilities up gradually over 1 year period; optimizing mobile specific interactions
Design strategy
• Progressive complexity: offer users basic, simple features on first look. Gradually disclose more features and informations as customers look for them.
• Thumb-driven navigation: bring in new side bar for users to swipe up/down and ensure all primary buttons are reachable by thumb
• Make our most-used mobile tools and core navigation the priority; rest to follow (Explore, Projects, Reports)
• Set up new breakpoints; 320px, 480px, 768px, 1024px, 1280px
• 2 step process: get our current offerings usable on mobile, then work on new mobile forward features: what mobile features can we use to drive growth specially on mobile?
Research & discovery
Competitor research
Some competitors have mobile offerings.
• 1 native app
• 2 mobile friendly web apps
• 3 poor mobile offerings
• 1 native app
• 2 mobile friendly web apps
• 3 poor mobile offerings
Best practise map design research
• Use collapsable panels that can slide up from bottom
• Show appropriate level of information at different zoom levels
• Ensure overlays don't interfere with each other or map
• Show appropriate level of information at different zoom levels
• Ensure overlays don't interfere with each other or map
Discovery interviews
• Sessions ran with existing users; what are they looking for in mobile offerings?
Snapshot of user insights
Scoring each of our current tools out of 10 for mobile usability
Prototyping
• Lo-fi to hi-fi
• Testing on devices with team
• Working out breakpoints
• Tablet optimisation where needed
• Design library updates; ensuring consistency
• Accessibility auditing
Final design
Our final design was developed in close collaboration with the front end team; due to their time constraints, it was vital the design was achievable and realistic and our time was spent focused in the right places.
We were aware this was very much an 'MVP' level design with further features to be designed throughout the year.
Full annotated file handed over to the dev team.
Project learnings & next steps
This project is currently in the build phase, with launch scheduled for October 2025.
Next phase:
• Font sizes: conform font sizes with mobile accessibly standards (some still too small due to time)
• Roll out across all tools: Develop, Stories, Locate
• Mobile first design: next project will look at specific mobile tools we could implement.
How can we use location services for use on site?
How can we tie this in with notifications?
Can we use camera to upload documents to projects?
What does collaboration on mobile look like?
This will form part of our 2026 development plan