It is a mobile app where u can check for the cheapest gas near you.
The app originally had a crowded interface. There were lines of text too close to read, bright colours, and big bold icons. This made it difficult to use the app. It was not as functional as it could be.
Adding buttons with big text and padding makes it easier for the user to see and click. I used this on the dashboard with a "Find Gas" button. This is the main reason users are on this platform, so it should be easy to find. I then took away information from the list to tidy it up. This also ensures users are not clicking small text they did not mean to. By making the map more zoomed, this allows for more space between the gas station markers. Again making sure the user is not clicking a place they do not want. I also made the bottom nav bar more condensed with the main pages on the bottom. This allows for click control and an aesthetically pleasing interface.
Figma: I used Figma to construct my mock up. I brought in some icons and shapes that I made on Illustrator. I used a 4 column grid to make my layout.
Illustrator: I made icons and shapes using the pen tool and shape builder.
Photoshop: I used Photoshop to mock up my interface
