Project goal
I wanted to show that the design principles I use for web applications are easily adaptable to mobile platforms, and that I can create native, well-thought-out user interfaces for iOS.
Original product link: Map Rank Tracker
Original product link: Map Rank Tracker
My approach
- Research & AnalysisThe app is aimed at business owners who are always on the go and want to stay up to date with their business performance.
- DesignIn addition, I studied the new iOS 26 design principles using Liquid Glass.
Map rank tracker for ios
Step-by-step description
Empty state
I have developed a user-friendly empty state that explains to the user how they will benefit from using the app. Instead of a boring interface, interface immediately motivate the user to take action.
Smart search
As soon as the user starts typing the name, the app automatically suggests options. This speeds up the process and helps avoid mistakes if the user does not remember the exact name.
I have developed a user-friendly empty state that explains to the user how they will benefit from using the app. Instead of a boring interface, interface immediately motivate the user to take action.
Smart search
As soon as the user starts typing the name, the app automatically suggests options. This speeds up the process and helps avoid mistakes if the user does not remember the exact name.
Clear explanation
The title and text immediately explain how keywords affect search results. This motivates the user to make an informed choice.
Visual interaction
We used interactive highlighted tags to make it easy for the user to select the suggested keywords.
Add your own words
The ability to add your own keywords makes the app more flexible and versatile, as it is suitable for any type of business.
The title and text immediately explain how keywords affect search results. This motivates the user to make an informed choice.
Visual interaction
We used interactive highlighted tags to make it easy for the user to select the suggested keywords.
Add your own words
The ability to add your own keywords makes the app more flexible and versatile, as it is suitable for any type of business.
Data visualization
Green dots indicate good positions (1-3), while yellow and red dots indicate lower positions. This allows users to quickly assess the situation at a glance.
Additional Information
When user clicks on any pin on the map, a modal window appears with detailed Google Maps search results. This allows users to check the data and see who their main competitors are.
Thoughtful navigation
At the top of the screen, the user always sees which keyword the report is displaying. It is also possible to quickly switch between other keywords via a drop-down menu.
Green dots indicate good positions (1-3), while yellow and red dots indicate lower positions. This allows users to quickly assess the situation at a glance.
Additional Information
When user clicks on any pin on the map, a modal window appears with detailed Google Maps search results. This allows users to check the data and see who their main competitors are.
Thoughtful navigation
At the top of the screen, the user always sees which keyword the report is displaying. It is also possible to quickly switch between other keywords via a drop-down menu.
Сonclusion
While working on this concept, I demonstrated my skills in product adaptation and iOS design. I successfully transferred complex functionality from a web application to a user-friendly mobile interface using native patterns and modern design language. I am confident that this approach makes the product more accessible and valuable to users, which ultimately increases its competitiveness.
