This project was very straight forward as I was working with the dedicated UX lead on this one as my stakeholder. His instructions were straight forward and simple.
Make/design a native app design.
It should be consistent with the existing website style and branding.
It will have 3 tabs: Home (which contained pertinent information about user's financial details on the car they loaned for, as well as details of the car), a make payments app to make it easy for users to pay through the instead of the website, and a settings tabs to enable/disable notifications, change passwords and a hotline contacts display.
The "finished" app UI Design:
Interactive High Fidelity Prototype:
https://www.figma.com/proto/cFRhFLBucKjAJCuTm9DYhg/AutoPay-3?node-id=2%3A272&scaling=scale-down&page-id=0%3A1&starting-point-node-id=1%3A2&show-proto-sidebar=1
The website:
Wireframing was a bit straight forward because they only asked for three main tabs.
Later on, I decided upon a secondary way to access the tabs via the burger menu if users happen to be more comfortable with that. The reason I even put one was to have the ability for the app to have additional features, or links etc. as well as a way to logout their account with it being too obvious on the main home page.
It moves in from the left to be consistent with the location of the burger menu and less jarring.
Proposed design layout I decided upon is a layered cake layout because I wanted to make the tabs to be coming from below to make it an easy reach for the thumb while holding phones with one hand.
There was no good reason NOT to use the Google icon materials IMO. It is well thought out and native to android devices that A LOT of people use and are used to. Ofcourse, when doing the IOS variant, Apple materials will be used where necessary.
Now that the wireframe was done, and "approved" I put in the website colors to be consistent with the branding.
Looks good, with respect to color usage. So blues, becomes exclusively for buttons to highlight it more and differentiate it from non-interactive parts of the app. I decided on a black burger menu background not a light color to make it standout more from the main page.
However, I realized that it lacked a tangible feeling because of the thin lines. It also makes it look like a website extension much more than a native app as it is.
To differentiate the buttons more, I decided to make it round. Added a login page and a "car tech", "fast" BG image (I'm 50/50 on this but it is consistent with the website style). So IMO, its 2 steps forward, and then just a step-back.
It is good considering the design directions, but what do you think? What could be improved?
Any ideas to improve on the design or gestures is very much appreciated.'