iOS & Android
When asked which application we thought most needed a makeover, our immediate thought was Green P. We use this app all the time when parking in Toronto. Its interface is incredibly confusing and you need to play with it a few times in order to understand what different components mean. There are areas where content is unclear or buttons don’t do what you expect them to do. It’s for all of these reasons that we thought the Green P app could use a makeover.
We started by conducting a heuristic evaluation on the current Green P iOS app in hopes that it would show us exactly what areas of the app need work to improve usability. The iOS app is identical to the Android app (most likely a webapp) and we didn’t change the design language whatsoever.
The goal was to change as little of the visual design as possible while increasing usability as per the Nielsen/Norman Group’s Usability Heuristics for User Interfaces.
We initiated 6 user tests and recorded all the issues that our testers voiced.
1. Location IDs do not relay any geographical information.
2. This sign is only one version that Green P uses around Toronto.
3. Warning text is lengthy and can be placed elsewhere.
4. Loading screens are unnecessary and slow down the process.
5. Instructions could be much clearer.
6. Phone number is not clickable and doesn’t explain why a user should call.
7. Instructions are duplicated and are not relevant to this screen.
8. Screen is titled incorrectly.
9. No way to change or add payment information.
10. Screen titled incorrectly.
11. Modal uses platform defaults which may confuse users.
12. This dialog is hard to read.
13. The recommended action is not highlighted.
To ensure a direct heuristic comparison, we redesigned the Green P app without making any changes to the look or feel. All the changes are structural and benefit the user experience directly.
1. Added relevant geographical information to each location ID.
2. Displayed all the potential Green P signs that a user may encounter.
3. Shortened warning and added all the legal information behind a link.
4. Added a checkout flow so the user always knows the status and what’s next.
5. Made the instructions clearer and in plain language.
6. Added clarity on when to call the phone number which is now clickable.
7. Changed the copy to plain English and provided further clarity.
8. Removed unnecessary warning that was displayed earlier.
9. Clarified the instructions..
10. Added a way for users to add a payment method directly on this screen.
11. The modal is now branded and much easier to read.
12. The recommended action is easily identifiable.
13. Not shown – removed all loading screens.