Wireframes
Initially, I knew the icons I wanted and how I wanted them displayed. I wanted a home screen, notifications, prices, and profile. These later changed after user testing. My other two early ideas were setting a gas station as a favorite and switching between miles and kilometers. 
Prototyping
The prototype consisted of different paper "screens" along with an early edition of the logo. This was the prototype that underwent three rounds of user testing. After testing, I concluded that the icons were difficult for users to understand and changed them to home, activity, locations, and profile.
Surface/Final Product
The app starts off with a standard log-in and register screen. An added step is inserting your car make and credit/debit card information. I included details such as the private policy so the user knows what's happening with all of this private information they're providing.
One of my biggest pet peeves when it comes to apps is when the app doesn't allow you to see the time, and my users agreed throughout testing. Not allowing the app to cover the time and battery made several users exclaim that they'd be more willing to keep the app.
Using the App
When purchasing gas, the app will open up a pop-up menu. Note that there isn't an X to exit out of the pop-ups. During user testing, the consensus was that clicking on an X would exit out of the entire screen rather than take you to the previous screen, so I implemented next and back buttons. This way, it's clear that the purchasing process goes in a sequential order.
Day vs Night Mode
While creating the surface of this app, Twitter had just unleashed their Dark Mode which was getting high praise from users. Due to this, I decided to incorporate a night mode as well. This way users looking to purchase gas at night won't develop eye strain when looking at the bright background of the day version. This option can be accessed under settings. 

You may also like

Back to Top